secret keys view

weibaohui · Nov 13, 2023 · b3d6f31 · b3d6f31
1 parent 7039566
commit b3d6f31
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 10 deletions.
diff --git a/src/frontend/components/secret/SecretDataKeysView.vue b/src/frontend/components/secret/SecretDataKeysView.vue
@@ -1,15 +1,34 @@
 <script setup lang="ts">
 import { V1Secret } from '@backend/k8s/model/V1Secret'
+import { ResType } from '@backend/k8s/watch/watch.model'
+import SecretView from '@frontend/components/secret/SecretView.vue'
+import { useDrawerService } from '@frontend/service/drawer-service/use-drawer'
+import { ColorHelper } from '@frontend/service/page/ColorHelper'
+import { DrawerHelper } from '@frontend/service/page/DrawerHelper'
+import { NSpace, NTag } from 'naive-ui'
 
 const props = defineProps({
   secret: V1Secret,
 })
+
+const drawer = useDrawerService()
+
+function show() {
+  DrawerHelper
+    .instance
+    .drawer(drawer)
+    .show(`${ResType.Secret}:${props.secret.metadata.name}`, SecretView, { secret: props.secret })
+}
 </script>
 
 <template>
-  <NTag v-for="(v, k) in props.secret.data" :key="k">
-    {{ k }}
-  </NTag>
+  <NSpace v-for="(v, k) in props.secret.data" :key="k" :vertical="false">
+    <NTag :color="{ color: ColorHelper.randomColor() }">
+      <span @click="show">
+        {{ k }}
+      </span>
+    </NTag>
+  </NSpace>
 </template>
 
 <style scoped>

diff --git a/src/frontend/components/secret/SecretDataListView.vue b/src/frontend/components/secret/SecretDataListView.vue
@@ -1,20 +1,21 @@
 <script setup lang="ts">
 import { V1Secret } from '@backend/k8s/model/V1Secret'
 import SecretDataValueEditView from '@frontend/components/secret/SecretDataValueEditView.vue'
-import { NDivider } from 'naive-ui'
+import { NTabPane, NTabs } from 'naive-ui'
 
 const props = defineProps({
   secret: V1Secret,
 })
 </script>
 
 <template>
-  <div v-for="(v, k) in props.secret.data" :key="k" style="height: 50%;max-height: 100px">
-    <NDivider title-placement="left">
-      {{ k }}
-    </NDivider>
-    <SecretDataValueEditView :v="v" :k="k" :meta="props.secret.metadata" />
-  </div>
+  <NTabs type="card">
+    <NTabPane v-for="(v, k) in props.secret.data" :key="k" :name="k" :tab="k">
+      <div style="height: 100%;min-height: 20px">
+        <SecretDataValueEditView :v="v" :k="k" :meta="props.secret.metadata" />
+      </div>
+    </NTabPane>
+  </NTabs>
 </template>
 
 <style scoped>