@cryptotaxi247 / CoPilot
Code Commits Issues Pulls Sessions CI/CD
main
main
vue 142 lines 3.66 KB
Raw
1 <template>
2 <n-tabs type="line" animated :tabs-padding="24" pane-class="min-h-100 p-6!">
3 <n-tab-pane name="Overview" tab="Overview" display-directive="show:lazy" 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="Result" tabular-nums>
7 <span
8 class="uppercase"
9 :class="
10 data.result === 'failed'
11 ? 'text-error'
12 : data.result === 'not applicable'
13 ? 'text-warning'
14 : 'text-success'
15 "
16 >
17 {{ data.result }}
18 </span>
19 </n-statistic>
20 <n-statistic label="Condition" tabular-nums>
21 <span class="uppercase">{{ data.condition }}</span>
22 </n-statistic>
23 <n-statistic label="Compliance" :value="data.compliance.length" tabular-nums />
24 <n-statistic label="Rules" :value="data.rules.length" tabular-nums />
25 </div>
26 </n-card>
27
28 <n-card content-class="p-0!" embedded class="overflow-hidden">
29 <div
30 v-shiki="{ lang: 'shell', decode: true }"
31 class="scrollbar-styled code-bg-transparent overflow-hidden"
32 >
33 <pre v-html="data.command"></pre>
34 </div>
35 </n-card>
36
37 <div v-if="properties" class="grid-auto-fit-200 grid gap-2">
38 <CardKV v-for="(value, key) of properties" :key>
39 <template #key>
40 {{ key }}
41 </template>
42 <template #value>
43 {{ value ?? "-" }}
44 </template>
45 </CardKV>
46 </div>
47 </n-tab-pane>
48 <n-tab-pane name="Description" tab="Description" display-directive="show:lazy">
49 <n-input
50 :value="data.description"
51 type="textarea"
52 readonly
53 placeholder="Empty"
54 size="large"
55 :autosize="{
56 minRows: 3,
57 maxRows: 18
58 }"
59 />
60 </n-tab-pane>
61 <n-tab-pane name="Rationale" tab="Rationale" display-directive="show:lazy">
62 <n-input
63 :value="data.rationale"
64 type="textarea"
65 readonly
66 placeholder="Empty"
67 size="large"
68 :autosize="{
69 minRows: 3,
70 maxRows: 18
71 }"
72 />
73 </n-tab-pane>
74 <n-tab-pane name="Reason" tab="Reason" display-directive="show:lazy">
75 <n-input
76 :value="data.reason"
77 type="textarea"
78 readonly
79 placeholder="Empty"
80 size="large"
81 :autosize="{
82 minRows: 3,
83 maxRows: 18
84 }"
85 />
86 </n-tab-pane>
87 <n-tab-pane name="Remediation" tab="Remediation" display-directive="show:lazy">
88 <n-input
89 :value="data.remediation"
90 type="textarea"
91 readonly
92 placeholder="Empty"
93 size="large"
94 :autosize="{
95 minRows: 3,
96 maxRows: 18
97 }"
98 />
99 </n-tab-pane>
100 <n-tab-pane name="Compliance" tab="Compliance" display-directive="show:lazy">
101 <div class="flex flex-col gap-2">
102 <CardKV v-for="item of data.compliance" :key="item.key">
103 <template #key>
104 {{ item.key }}
105 </template>
106 <template #value>
107 {{ item.value ?? "-" }}
108 </template>
109 </CardKV>
110 </div>
111 </n-tab-pane>
112 <n-tab-pane name="Rules" tab="Rules" display-directive="show:lazy">
113 <div class="flex flex-col gap-2">
114 <CardKV v-for="item of data.rules" :key="item.type + item.rule">
115 <template #key>
116 {{ item.type }}
117 </template>
118 <template #value>
119 {{ item.rule }}
120 </template>
121 </CardKV>
122 </div>
123 </n-tab-pane>
124 </n-tabs>
125 </template>
126
127 <script setup lang="ts">
128 import type { ScaPolicyResult } from "@/types/agents.d"
129 import _pick from "lodash/pick"
130 import { NCard, NInput, NStatistic, NTabPane, NTabs } from "naive-ui"
131 import { computed } from "vue"
132 import CardKV from "@/components/common/cards/CardKV.vue"
133 import vShiki from "@/directives/v-shiki"
134
135 const { data } = defineProps<{
136 data: ScaPolicyResult
137 }>()
138
139 const properties = computed(() => {
140 return _pick(data, ["id", "policy_id", "title"])
141 })
142 </script>