add monaco editor

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();
 }