System Initiative

<template> <div class="flex flex-row justify-between"> <div class="flex flex-row items-center gap-xs"> <template v-if="!noText"> <TextPill v-if=" component.qualificationTotals.failed === 0 && component.qualificationTotals.warned === 0 && component.qualificationTotals.succeeded === 0 " tighter variant="component" class="text-xs ml-auto" > Unknown </TextPill> <TextPill v-else-if=" component.qualificationTotals.failed === 0 && component.qualificationTotals.warned === 0 " tighter variant="success" class="text-xs ml-auto" > All passed </TextPill> <TextPill v-else-if="component.qualificationTotals.failed > 0" tighter variant="destructive" class="text-xs ml-auto" > {{ component.qualificationTotals.failed }} Failed </TextPill> <TextPill v-else-if="component.qualificationTotals.warned > 0" tighter variant="warning" class="text-xs ml-auto" > {{ component.qualificationTotals.warned }} Warning </TextPill> </template> <StatusIndicatorIcon type="qualification" size="sm" :status="qualificationStatus" /> </div> </div> </template> <script setup lang="ts"> import { TextPill } from "@si/vue-lib/design-system"; import { computed } from "vue"; import { ComponentInList, BifrostComponent, } from "@/workers/types/entity_kind_types"; import StatusIndicatorIcon from "@/components/StatusIndicatorIcon.vue"; const props = defineProps<{ component: ComponentInList | BifrostComponent; noText?: boolean; }>(); const qualificationStatus = computed(() => { if (props.component.qualificationTotals.failed > 0) return "failure"; if (props.component.qualificationTotals.warned > 0) return "warning"; if (props.component.qualificationTotals.succeeded > 0) return "success"; return "unknown"; }); </script>