query logs

package-lock.json

@@ -15,7 +15,7 @@
         "echarts": "^5.2.2",
         "element-plus": "^2.0.2",
         "lodash": "^4.17.21",
-        "monaco-editor": "^0.33.0",
+        "monaco-editor": "^0.27.0",
         "pinia": "^2.0.5",
         "vue": "^3.0.0",
         "vue-grid-layout": "^3.0.0-beta1",
@@ -51,6 +51,7 @@
         "eslint-plugin-vue": "^7.0.0",
         "husky": "^7.0.4",
         "lint-staged": "^12.1.3",
+        "monaco-editor-webpack-plugin": "^4.1.2",
         "node-sass": "^6.0.1",
         "postcss-html": "^1.3.0",
         "postcss-scss": "^4.0.2",
@@ -18236,9 +18237,36 @@
       }
     },
     "node_modules/monaco-editor": {
-      "version": "0.33.0",
+      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.33.0.tgz",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.27.0.tgz",
-      "integrity": "sha512-VcRWPSLIUEgQJQIE0pVT8FcGBIgFoxz7jtqctE+IiCxWugD0DwgyQBcZBhdSrdMC84eumoqMZsGl2GTreOzwqw=="
+      "integrity": "sha512-UhwP78Wb8w0ZSYoKXQNTV/0CHObp6NS3nCt51QfKE6sKyBo5PBsvuDOHoI2ooBakc6uIwByRLHVeT7+yXQe2fQ=="
+    },
+    "node_modules/monaco-editor-webpack-plugin": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-4.1.2.tgz",
+      "integrity": "sha512-snmHecygICKT0UlHhva+Cs2WaLPpxy3111xbvInhjjTr5m0xQTFHlmJ2QQDcB14Vzmm7f07uc1TtbvOpmL50BA==",
+      "dev": true,
+      "dependencies": {
+        "loader-utils": "^2.0.0"
+      },
+      "peerDependencies": {
+        "monaco-editor": "0.25.x || 0.26.x || 0.27.x",
+        "webpack": "^4.5.0 || 5.x"
+      }
+    },
+    "node_modules/monaco-editor-webpack-plugin/node_modules/loader-utils": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+      "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+      "dev": true,
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
     },
     "node_modules/move-concurrently": {
       "version": "1.0.1",
@@ -43278,9 +43306,31 @@
       "dev": true
     },
     "monaco-editor": {
-      "version": "0.33.0",
+      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.33.0.tgz",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.27.0.tgz",
-      "integrity": "sha512-VcRWPSLIUEgQJQIE0pVT8FcGBIgFoxz7jtqctE+IiCxWugD0DwgyQBcZBhdSrdMC84eumoqMZsGl2GTreOzwqw=="
+      "integrity": "sha512-UhwP78Wb8w0ZSYoKXQNTV/0CHObp6NS3nCt51QfKE6sKyBo5PBsvuDOHoI2ooBakc6uIwByRLHVeT7+yXQe2fQ=="
+    },
+    "monaco-editor-webpack-plugin": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-4.1.2.tgz",
+      "integrity": "sha512-snmHecygICKT0UlHhva+Cs2WaLPpxy3111xbvInhjjTr5m0xQTFHlmJ2QQDcB14Vzmm7f07uc1TtbvOpmL50BA==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+          "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        }
+      }
     },
     "move-concurrently": {
       "version": "1.0.1",

package.json

@@ -17,7 +17,7 @@
     "echarts": "^5.2.2",
     "element-plus": "^2.0.2",
     "lodash": "^4.17.21",
-    "monaco-editor": "^0.33.0",
+    "monaco-editor": "^0.27.0",
     "pinia": "^2.0.5",
     "vue": "^3.0.0",
     "vue-grid-layout": "^3.0.0-beta1",
@@ -53,6 +53,7 @@
     "eslint-plugin-vue": "^7.0.0",
     "husky": "^7.0.4",
     "lint-staged": "^12.1.3",
+    "monaco-editor-webpack-plugin": "^4.1.2",
     "node-sass": "^6.0.1",
     "postcss-html": "^1.3.0",
     "postcss-scss": "^4.0.2",

src/graphql/fragments/demand-log.ts

@@ -18,13 +18,17 @@
 export const queryContainers = {
   variable: "$condition: OndemandContainergQueryCondition!",
   query: `
-  containers: listContainers(condition: $condition)`,
+  containers: listContainers(condition: $condition) {
+    errorReason
+    containers
+  }`,
 };
 
 export const queryStreamingLogs = {
   variable: "$condition: OndemandLogQueryCondition",
   query: `
   logs: ondemandPodLogs(condition: $condition) {
+    errorReason
     logs {
       timestamp
       contentType

src/store/modules/demand-log.ts

@@ -35,7 +35,7 @@ interface DemandLogState {
 export const demandLogStore = defineStore({
   id: "demandLog",
   state: (): DemandLogState => ({
-    containers: [{ label: "istio-proxy", value: "istio-proxy" }],
+    containers: [{ label: "", value: "" }],
     instances: [{ value: "", label: "" }],
     conditions: {
       container: "",
@@ -81,7 +81,12 @@ export const demandLogStore = defineStore({
       if (res.data.errors) {
         return res.data;
       }
-      this.containers = [{ label: "istio-proxy", value: "istio-proxy" }];
+      if (res.data.data.containers.errorReason) {
+        return res.data;
+      }
+      this.containers = res.data.data.containers.containers.map((d: string) => {
+        return { label: d, value: d };
+      });
       return res.data;
     },
     async getDemandLogs() {
@@ -94,7 +99,7 @@ export const demandLogStore = defineStore({
         return res.data;
       }
 
-      this.logs = res.data.data.queryLogs.logs;
+      this.logs = res.data.data.logs.logs.map((d: Log) => d.content).join("\n");
       return res.data;
     },
   },

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

@@ -16,13 +16,12 @@ limitations under the License. -->
   <div
     class="log-content"
     ref="logContent"
-    style="width: 100%; height: calc(100% - 140px)"
+    style="width: calc(100% - 60px); height: calc(100% - 170px)"
   ></div>
 </template>
 <script lang="ts" setup>
-import { onMounted, ref, onUnmounted } from "vue";
+import { onMounted, ref, onUnmounted, watch, toRaw } from "vue";
 import { useDemandLogStore } from "@/store/modules/demand-log";
-import { Log } from "@/types/demand-log";
 
 /*global Nullable */
 const demandLogStore = useDemandLogStore();
@@ -30,24 +29,46 @@ const monacoInstance = ref();
 const logContent = ref<Nullable<HTMLDivElement>>(null);
 
 onMounted(async () => {
-  const monaco = await import("monaco-editor/esm/vs/editor/editor.api");
+  const monaco = await import("monaco-editor");
   monacoInstanceGen(monaco);
+  window.addEventListener("resize", () => {
+    editorLayout();
+  });
 });
 function monacoInstanceGen(monaco: any) {
-  const value = demandLogStore.logs.map((d: Log) => d.content).join("\n");
-  monaco.languages.register({ id: "custom" });
   monacoInstance.value = monaco.editor.create(logContent.value, {
-    value: "console.log(123)", // value
+    value: "",
-    language: "javascript",
+    language: "text",
+    wordWrap: true,
+    minimap: { enabled: false },
+  });
+}
+function editorLayout() {
+  if (!logContent.value) {
+    return;
+  }
+  const { width, height } = logContent.value.getBoundingClientRect();
+  toRaw(monacoInstance.value).layout({
+    height: height,
+    width: width,
   });
 }
 onUnmounted(() => {
+  toRaw(monacoInstance.value).dispose();
   monacoInstance.value = null;
+  window.removeEventListener("resize", editorLayout);
 });
+watch(
+  () => demandLogStore.logs,
+  () => {
+    toRaw(monacoInstance.value).setValue(demandLogStore.logs);
+  }
+);
 </script>
 <style lang="scss" scoped>
 .log-content {
   min-width: 600px;
   min-height: 400px;
+  // overflow: auto;
 }
 </style>

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

@@ -124,7 +124,7 @@ limitations under the License. -->
       class="search-btn mt-10"
       size="small"
       type="primary"
-      @click="runInterval"
+      @click="searchLogs"
     >
       <Icon size="sm" iconName="retry" :loading="!!intervalFn" class="reload" />
       {{ intervalFn ? t("pause") : t("start") }}

vue.config.js

@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 
+const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
 const AutoImport = require("unplugin-auto-import/webpack");
 const Components = require("unplugin-vue-components/webpack");
 const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");
@@ -103,7 +104,8 @@ module.exports = {
       Components({
         resolvers: [ElementPlusResolver({ importStyle: "css" })],
         dts: "./src/types/components.d.ts",
-      })
+      }),
+      new MonacoWebpackPlugin()
     );
   },
 };