mini json Monaco View

weibaohui · Nov 18, 2023 · 43a3b98 · 43a3b98
1 parent a7b4df1
commit 43a3b98
Show file tree

Hide file tree

Showing 9 changed files with 142 additions and 17 deletions.
diff --git a/src/frontend/components/MutatingWebhook/MutatingWebhookBasicInfoView.vue b/src/frontend/components/MutatingWebhook/MutatingWebhookBasicInfoView.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { V1MutatingWebhookConfiguration } from '@backend/k8s/model/V1MutatingWebhookConfiguration'
 import LabelSelectorView from '@frontend/components/common/LabelSelectorView.vue'
+import MiniJsonMonacoView from '@frontend/components/common/MiniJsonMonacoView.vue'
 import ResourceMetadataView from '@frontend/components/common/ResourceMetadataView.vue'
 import TitleBar from '@frontend/components/common/TitleBar.vue'
 import { NDivider, NTable } from 'naive-ui'
@@ -36,7 +37,12 @@ const props = defineProps({
             Client Config
           </td>
           <td>
-            {{ hook.clientConfig }}
+            <div style="width:90%;height: 100%">
+              <MiniJsonMonacoView
+                :min-height="200"
+                :item="hook.clientConfig"
+              />
+            </div>
           </td>
         </tr>
         <tr v-if="hook.matchPolicy">

diff --git a/src/frontend/components/PersistentVolume/PersistentVolumeBasicInfoView.vue b/src/frontend/components/PersistentVolume/PersistentVolumeBasicInfoView.vue
@@ -2,6 +2,7 @@
 import type { V1ObjectReference } from '@backend/k8s/model/V1ObjectReference'
 import { V1PersistentVolume } from '@backend/k8s/model/V1PersistentVolume'
 import { ResType } from '@backend/k8s/watch/watch.model'
+import MiniJsonMonacoView from '@frontend/components/common/MiniJsonMonacoView.vue'
 import TitleBar from '@frontend/components/common/TitleBar.vue'
 import PvcView from '@frontend/components/PersistentVolumeClaim/PvcView.vue'
 import { useDrawerService } from '@frontend/service/drawer-service/use-drawer'
@@ -47,7 +48,14 @@ async function onPvcClick(ref: V1ObjectReference) {
         <td>
           capacity
         </td>
-        <td>{{ props.persistentVolume.spec.capacity }}</td>
+        <td>
+          <div style="width:90%;height: 100%">
+            <MiniJsonMonacoView
+              :min-height="150"
+              :item="props.persistentVolume.spec.capacity "
+            />
+          </div>
+        </td>
       </tr>
       <tr>
         <td>

diff --git a/src/frontend/components/PersistentVolumeClaim/PvcBasicInfoView.vue b/src/frontend/components/PersistentVolumeClaim/PvcBasicInfoView.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { V1PersistentVolumeClaim } from '@backend/k8s/model/V1PersistentVolumeClaim'
 import { ResType } from '@backend/k8s/watch/watch.model'
+import MiniJsonMonacoView from '@frontend/components/common/MiniJsonMonacoView.vue'
 import ResourceConditionView from '@frontend/components/common/ResourceConditionView.vue'
 import ResourceMetadataView from '@frontend/components/common/ResourceMetadataView.vue'
 import TitleBar from '@frontend/components/common/TitleBar.vue'
@@ -45,7 +46,14 @@ async function onPvClick(name: string) {
         <td>
           requests
         </td>
-        <td>{{ props.pvc.spec.resources.requests }}</td>
+        <td>
+          <div style="width:90%;height: 100%">
+            <MiniJsonMonacoView
+              :min-height="150"
+              :item="props.pvc.spec.resources.requests "
+            />
+          </div>
+        </td>
       </tr>
       <tr>
         <td>

diff --git a/src/frontend/components/StorageClass/StorageClassBasicInfoView.vue b/src/frontend/components/StorageClass/StorageClassBasicInfoView.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { V1StorageClass } from '@backend/k8s/model/V1StorageClass'
+import MiniJsonMonacoView from '@frontend/components/common/MiniJsonMonacoView.vue'
 import TitleBar from '@frontend/components/common/TitleBar.vue'
-import { ColorHelper } from '@frontend/service/page/ColorHelper'
-import { NSpace, NTable, NTag } from 'naive-ui'
+import { NTable } from 'naive-ui'
 import ResourceMetadataView from '@frontend/components/common/ResourceMetadataView.vue'
 
 const props = defineProps({
@@ -48,11 +48,11 @@ const props = defineProps({
           Params
         </td>
         <td>
-          <NSpace v-for="([k, v]) in Object.entries(props.storageClass.parameters)" :key="k" vertical>
-            <NTag :color="{ color: ColorHelper.randomColor() }">
-              {{ k }}={{ v }}
-            </NTag>
-          </NSpace>
+          <div style="width:90%;height: 100%">
+            <MiniJsonMonacoView
+              :item="props.storageClass.parameters "
+            />
+          </div>
         </td>
       </tr>
     </tbody>

diff --git a/src/frontend/components/ValidatingWebhook/ValidatingWebhookBasicInfoView.vue b/src/frontend/components/ValidatingWebhook/ValidatingWebhookBasicInfoView.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { V1ValidatingWebhookConfiguration } from '@backend/k8s/model/V1ValidatingWebhookConfiguration'
 import LabelSelectorView from '@frontend/components/common/LabelSelectorView.vue'
+import MiniJsonMonacoView from '@frontend/components/common/MiniJsonMonacoView.vue'
 import ResourceMetadataView from '@frontend/components/common/ResourceMetadataView.vue'
 import TitleBar from '@frontend/components/common/TitleBar.vue'
 import { NDivider, NTable } from 'naive-ui'
@@ -36,7 +37,9 @@ const props = defineProps({
             Client Config
           </td>
           <td>
-            {{ hook.clientConfig }}
+            <div style="width:90%;height: 100%">
+              <MiniJsonMonacoView :item="hook.clientConfig" />
+            </div>
           </td>
         </tr>
         <tr v-if="hook.matchPolicy">
@@ -85,7 +88,12 @@ const props = defineProps({
             rules
           </td>
           <td>
-            {{ hook.rules }}
+            <div style="width:90%;height: 100%">
+              <MiniJsonMonacoView
+                :min-height="500"
+                :item="hook.rules"
+              />
+            </div>
           </td>
         </tr>
         <tr v-if="hook.namespaceSelector">

diff --git a/src/frontend/components/common/MiniJsonMonacoView.vue b/src/frontend/components/common/MiniJsonMonacoView.vue
@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+import * as monaco from 'monaco-editor'
+
+const props = defineProps({
+  item: Object,
+  minHeight: Number,
+})
+const monacoEditorRef = ref()
+const editor = ref<monaco.editor.IStandaloneCodeEditor>()
+
+onMounted(() => {
+  editor.value = monaco.editor.create(monacoEditorRef.value, {
+    automaticLayout: true,
+    bracketPairColorization: {
+      enabled: true,
+      independentColorPoolPerBracketType: true,
+    },
+    copyWithSyntaxHighlighting: true,
+    cursorSmoothCaretAnimation: 'on',
+    emptySelectionClipboard: false,
+    find: {
+      addExtraSpaceOnTop: true,
+    },
+    wordWrap: 'on',
+    wrappingStrategy: 'advanced',
+    autoIndent: 'full',
+    lineNumbers: 'off',
+    foldingImportsByDefault: false,
+    matchOnWordStartOnly: true,
+    mouseWheelZoom: true,
+    smoothScrolling: true,
+    tabSize: 2,
+    wrappingIndent: 'indent',
+    autoClosingBrackets: 'always',
+    autoSurround: 'languageDefined',
+    language: 'json',
+    theme: 'vs-dark',
+    fontSize: 14,
+    minimap: {
+      enabled: false,
+    },
+    value: typeof props.item === 'string' ? props.item : JSON.stringify(props.item, null, '\t'),
+  })
+})
+</script>
+
+<template>
+  <div
+    ref="monacoEditorRef" class="vue-monaco-editor"
+    :style="{
+      minHeight: `${props.minHeight ? props.minHeight : 200}px`,
+    }"
+  />
+</template>
+
+<style scoped>
+.vue-monaco-editor {
+  min-height: 10px;
+  width: 100%;
+  height: 100%;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  resize: vertical;
+  overflow: auto;
+}
+</style>
diff --git a/src/frontend/components/common/MonacoView.vue b/src/frontend/components/common/MonacoView.vue
@@ -10,6 +10,7 @@ const props = defineProps({
   item: Object,
   saveActionOverride: Boolean,
   itemKey: String,
+  minHeight: Number,
 })
 const emit = defineEmits(['onSaveBtnClicked'])
 const monacoEditorRef = ref()
@@ -65,12 +66,16 @@ async function onSaveBtnClicked() {
     </NButton>
   </NButtonGroup>
   <NHr />
-  <div ref="monacoEditorRef" class="vue-monaco-editor" />
+  <div
+    ref="monacoEditorRef" class="vue-monaco-editor"
+    :style="{
+      minHeight: `${props.minHeight ? props.minHeight : 800}px`,
+    }"
+  />
 </template>
 
 <style scoped>
 .vue-monaco-editor {
-  min-height: 800px;
   width: 100%;
   height: 100%;
   border: 1px solid rgba(0, 0, 0, 0.1);

diff --git a/src/frontend/components/limitrange/LimitsBasicInfoView.vue b/src/frontend/components/limitrange/LimitsBasicInfoView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { V1LimitRange } from '@backend/k8s/model/V1LimitRange'
+import MiniJsonMonacoView from '@frontend/components/common/MiniJsonMonacoView.vue'
 import ResourceMetadataView from '@frontend/components/common/ResourceMetadataView.vue'
 import TitleBar from '@frontend/components/common/TitleBar.vue'
 import { NTable } from 'naive-ui'
@@ -21,7 +22,14 @@ const props = defineProps({
         <td class="left">
           limits
         </td>
-        <td>{{ props.limits.spec.limits }}</td>
+        <td>
+          <div style="width:90%;height: 100%">
+            <MiniJsonMonacoView
+              :min-height="450"
+              :item="props.limits.spec.limits "
+            />
+          </div>
+        </td>
       </tr>
     </tbody>
   </NTable>

diff --git a/src/frontend/components/resourcequota/QuotaBasicInfoView.vue b/src/frontend/components/resourcequota/QuotaBasicInfoView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { V1ResourceQuota } from '@backend/k8s/model/V1ResourceQuota'
+import MiniJsonMonacoView from '@frontend/components/common/MiniJsonMonacoView.vue'
 import ResourceMetadataView from '@frontend/components/common/ResourceMetadataView.vue'
 import TitleBar from '@frontend/components/common/TitleBar.vue'
 import { NTable } from 'naive-ui'
@@ -21,13 +22,27 @@ const props = defineProps({
         <td class="left">
           hard
         </td>
-        <td>{{ props.quota.status.hard }}</td>
+        <td>
+          <div style="width:90%;height: 100%;">
+            <MiniJsonMonacoView
+              :min-height="150"
+              :item="props.quota.status.hard "
+            />
+          </div>
+        </td>
       </tr>
       <tr>
         <td>
           used
         </td>
-        <td>{{ props.quota.status.used }}</td>
+        <td>
+          <div style="width:90%;height: 100%">
+            <MiniJsonMonacoView
+              :min-height="150"
+              :item="props.quota.status.used "
+            />
+          </div>
+        </td>
       </tr>
     </tbody>
   </NTable>