add monaco editor

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) => {
-        return { label: d, value: d };
-      }) || [{ label: "Detail", value: "Detail" }];
+      this.containers =
+        res.data.data.containers.containers.map((d: string) => {
+          return { label: d, value: d };
+        }) || [];
       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();
 }