| 1 | <template> |
| 2 | <n-tabs type="line" animated :tabs-padding="24" pane-class="min-h-100 p-6!"> |
| 3 | <n-tab-pane name="Details" tab="Details" display-directive="show" class="flex flex-col gap-4"> |
| 4 | <n-card embedded class="overflow-hidden"> |
| 5 | <div class="flex flex-wrap justify-between gap-8"> |
| 6 | <n-statistic label="Checks" :value="sca.total_checks" tabular-nums /> |
| 7 | <n-statistic label="Pass" :value="sca.pass" tabular-nums /> |
| 8 | <n-statistic label="Fail" :value="sca.fail" tabular-nums /> |
| 9 | <n-statistic label="Invalid" :value="sca.invalid" tabular-nums /> |
| 10 | <n-statistic label="Score" :value="`${sca.score}%`" tabular-nums /> |
| 11 | </div> |
| 12 | </n-card> |
| 13 | |
| 14 | <n-card embedded class="overflow-hidden"> |
| 15 | <div class="xs:flex-row! flex flex-col justify-between gap-8"> |
| 16 | <n-statistic |
| 17 | class="grow" |
| 18 | label="Start scan" |
| 19 | :value="formatDate(sca.start_scan, dFormats.datetime).toString()" |
| 20 | /> |
| 21 | <n-statistic |
| 22 | class="grow" |
| 23 | label="End scan" |
| 24 | :value="formatDate(sca.end_scan, dFormats.datetime).toString()" |
| 25 | /> |
| 26 | </div> |
| 27 | </n-card> |
| 28 | |
| 29 | <div v-if="properties" class="grid-auto-fit-200 grid gap-2"> |
| 30 | <CardKV v-for="(value, key) of properties" :key> |
| 31 | <template #key> |
| 32 | {{ key }} |
| 33 | </template> |
| 34 | <template #value> |
| 35 | <template v-if="value && key === 'references'"> |
| 36 | <a |
| 37 | :href="value" |
| 38 | target="_blank" |
| 39 | alt="references url" |
| 40 | rel="nofollow noopener noreferrer" |
| 41 | class="leading-6" |
| 42 | > |
| 43 | <span> |
| 44 | {{ value }} |
| 45 | </span> |
| 46 | <Icon :name="LinkIcon" :size="14" class="relative top-0.5 ml-2" /> |
| 47 | </a> |
| 48 | </template> |
| 49 | <template v-else> |
| 50 | {{ value ?? "-" }} |
| 51 | </template> |
| 52 | </template> |
| 53 | </CardKV> |
| 54 | </div> |
| 55 | </n-tab-pane> |
| 56 | <n-tab-pane name="Description" tab="Description" display-directive="show"> |
| 57 | <n-input |
| 58 | :value="sca.description" |
| 59 | type="textarea" |
| 60 | readonly |
| 61 | placeholder="Empty" |
| 62 | size="large" |
| 63 | :autosize="{ |
| 64 | minRows: 3, |
| 65 | maxRows: 18 |
| 66 | }" |
| 67 | /> |
| 68 | </n-tab-pane> |
| 69 | <n-tab-pane name="SCA Results" tab="SCA Results" display-directive="show:lazy"> |
| 70 | <ScaResults :sca :agent /> |
| 71 | </n-tab-pane> |
| 72 | </n-tabs> |
| 73 | </template> |
| 74 | |
| 75 | <script setup lang="ts"> |
| 76 | import type { Agent, AgentSca } from "@/types/agents.d" |
| 77 | import _pick from "lodash/pick" |
| 78 | import { NCard, NInput, NStatistic, NTabPane, NTabs } from "naive-ui" |
| 79 | import { computed, defineAsyncComponent } from "vue" |
| 80 | import CardKV from "@/components/common/cards/CardKV.vue" |
| 81 | import Icon from "@/components/common/Icon.vue" |
| 82 | import { useSettingsStore } from "@/stores/settings" |
| 83 | import { formatDate } from "@/utils/format" |
| 84 | |
| 85 | const { sca, agent } = defineProps<{ sca: AgentSca; agent: Agent }>() |
| 86 | |
| 87 | const ScaResults = defineAsyncComponent(() => import("./ScaResults.vue")) |
| 88 | |
| 89 | const dFormats = useSettingsStore().dateFormat |
| 90 | const LinkIcon = "carbon:launch" |
| 91 | |
| 92 | const properties = computed(() => { |
| 93 | return _pick(sca, ["name", "hash_file", "references"]) |
| 94 | }) |
| 95 | </script> |