add monaco editor

package-lock.json

@@ -15,6 +15,7 @@
         "echarts": "^5.2.2",
         "element-plus": "^2.0.2",
         "lodash": "^4.17.21",
+        "monaco-editor": "^0.33.0",
         "pinia": "^2.0.5",
         "vue": "^3.0.0",
         "vue-grid-layout": "^3.0.0-beta1",
@@ -18234,6 +18235,11 @@
         "node": "*"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.33.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.33.0.tgz",
+      "integrity": "sha512-VcRWPSLIUEgQJQIE0pVT8FcGBIgFoxz7jtqctE+IiCxWugD0DwgyQBcZBhdSrdMC84eumoqMZsGl2GTreOzwqw=="
+    },
     "node_modules/move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -43271,6 +43277,11 @@
       "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==",
       "dev": true
     },
+    "monaco-editor": {
+      "version": "0.33.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.33.0.tgz",
+      "integrity": "sha512-VcRWPSLIUEgQJQIE0pVT8FcGBIgFoxz7jtqctE+IiCxWugD0DwgyQBcZBhdSrdMC84eumoqMZsGl2GTreOzwqw=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",

package.json

@@ -17,6 +17,7 @@
     "echarts": "^5.2.2",
     "element-plus": "^2.0.2",
     "lodash": "^4.17.21",
+    "monaco-editor": "^0.33.0",
     "pinia": "^2.0.5",
     "vue": "^3.0.0",
     "vue-grid-layout": "^3.0.0-beta1",

src/store/modules/demand-log.ts

@@ -35,21 +35,21 @@ interface DemandLogState {
 export const demandLogStore = defineStore({
   id: "demandLog",
   state: (): DemandLogState => ({
-    containers: [{ value: "0", label: "" }],
-    instances: [{ value: "0", label: "" }],
+    containers: [{ label: "Detail", value: "Detail" }],
+    instances: [{ value: "", label: "" }],
     conditions: {
       container: "",
       serviceId: "",
       serviceInstanceId: "",
       queryDuration: useAppStoreWithOut().durationTime,
-      paging: { pageNum: 1, pageSize: 15 },
+      paging: { pageNum: 1, pageSize: -1 },
     },
     selectorStore: useSelectorStore(),
     logs: [],
     loadLogs: false,
   }),
   actions: {
-    setLogCondition(data: any) {
+    setLogCondition(data: Conditions) {
       this.conditions = { ...this.conditions, ...data };
     },
     async getInstances(id: string) {
@@ -86,9 +86,10 @@ export const demandLogStore = defineStore({
       if (res.data.errors) {
         return res.data;
       }
-      this.containers = res.data.data.containers.containers.map((d: string) => {
+      this.containers =
+        res.data.data.containers.containers.map((d: string) => {
           return { label: d, value: d };
-      }) || [{ label: "Detail", value: "Detail" }];
+        }) || [];
       return res.data;
     },
     async getDemandLogs() {

src/types/monaco-editor.ts

@@ -0,0 +1,17 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+declare module "monaco-editor/esm/vs/editor/editor.main.js";

src/views/dashboard/controls/DemandLog.vue

@@ -32,7 +32,7 @@ limitations under the License. -->
     <div class="header">
       <Header />
     </div>
-    <div class="content">
+    <div class="log">
       <Content />
     </div>
   </div>
@@ -93,7 +93,7 @@ function removeWidget() {
   }
 }
 
-.content {
+.log {
   width: 100%;
 }
 </style>

src/views/dashboard/related/demand-log/Content.vue

@@ -13,5 +13,37 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div>logs</div>
+  <div class="log-content" ref="logContent"></div>
 </template>
+<script lang="ts" setup>
+import { onMounted, ref, onUnmounted } from "vue";
+
+/*global Nullable */
+const monacoInstance = ref();
+const logContent = ref<Nullable<HTMLDivElement>>(null);
+const logs = ref<string>("");
+
+onMounted(() => {
+  import("monaco-editor/esm/vs/editor/editor.api").then((monaco) => {
+    monacoInstanceGen(monaco);
+  });
+});
+function monacoInstanceGen(monaco: any) {
+  monaco.languages.register({ id: "custom" });
+  monacoInstance.value = monaco.editor.create(logContent.value, {
+    value: logs.value,
+    language: "javascript",
+  });
+}
+onUnmounted(() => {
+  monacoInstance.value = null;
+});
+</script>
+<style lang="scss" scoped>
+.log-content {
+  min-height: 300px;
+  width: 100%;
+  min-width: 600px;
+  height: calc(100% - 140px);
+}
+</style>

src/views/dashboard/related/demand-log/Header.vue

@@ -166,7 +166,11 @@ async function init() {
 async function fetchSelectors() {
   if (dashboardStore.entity !== EntityType[3].value) {
     await getInstances();
-    await demandLogStore.getContainers(state.instance.id);
+    const resp = await demandLogStore.getContainers(state.instance.id);
+    if (resp.errors) {
+      ElMessage.error(resp.errors);
+      return;
+    }
   }
   state.container = demandLogStore.containers[0];
 }
@@ -184,14 +188,13 @@ function searchLogs() {
     instance = selectorStore.currentPod.id;
   }
   demandLogStore.setLogCondition({
-    serviceId: selectorStore.currentService
-      ? selectorStore.currentService.id
-      : state.service.id,
-    serviceInstanceId: instance || state.instance.id || undefined,
+    serviceId:
+      (selectorStore.currentService && selectorStore.currentService.id) || "",
+    serviceInstanceId: instance || state.instance.id || "",
     queryDuration: appStore.durationTime,
     keywordsOfContent: keywordsOfContent.value,
     excludingKeywordsOfContent: excludingKeywordsOfContent.value,
-    paging: { pageNum: 1, pageSize: 15 },
+    paging: { pageNum: 1, pageSize: -1 },
   });
   queryLogs();
 }

vue.config.js

@@ -64,6 +64,11 @@ module.exports = {
             test: /[\\/]node_modules[\\/]echarts|zrender[\\/]/,
             priority: 30,
           },
+          monacoEditor: {
+            name: "monaco-editor",
+            test: /[\\/]node_modules[\\/]monaco-editor[\\/]/,
+            priority: 40,
+          },
           elementPlus: {
             name: "element-plus",
             test: /[\\/]node_modules[\\/]element-plus|@element-plus[\\/]/,