From b3d6f31a271d8347825eaec5274356ab82a45699 Mon Sep 17 00:00:00 2001
From: weibaohui <weibaohui@yeah.net>
Date: Mon, 13 Nov 2023 15:52:49 +0800
Subject: [PATCH] secret keys view

---
 .../components/secret/SecretDataKeysView.vue  | 25 ++++++++++++++++---
 .../components/secret/SecretDataListView.vue  | 15 +++++------
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/frontend/components/secret/SecretDataKeysView.vue b/src/frontend/components/secret/SecretDataKeysView.vue
index 8d1c80be..b7c6a14e 100644
--- 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
index 629440fa..55116b46 100644
--- a/src/frontend/components/secret/SecretDataListView.vue
+++ b/src/frontend/components/secret/SecretDataListView.vue
@@ -1,7 +1,7 @@
 <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,
@@ -9,12 +9,13 @@ const props = defineProps({
 </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>