feat: visualize a on-demand log widget (#99)

package-lock.json

@@ -15,6 +15,7 @@
         "echarts": "^5.2.2",
         "element-plus": "^2.0.2",
         "lodash": "^4.17.21",
+        "monaco-editor": "^0.27.0",
         "pinia": "^2.0.5",
         "vue": "^3.0.0",
         "vue-grid-layout": "^3.0.0-beta1",
@@ -50,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",
@@ -18234,6 +18236,38 @@
         "node": "*"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.27.0.tgz",
+      "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",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -43271,6 +43305,33 @@
       "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==",
       "dev": true
     },
+    "monaco-editor": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.27.0.tgz",
+      "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",
       "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.27.0",
     "pinia": "^2.0.5",
     "vue": "^3.0.0",
     "vue-grid-layout": "^3.0.0-beta1",
@@ -52,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/assets/icons/demand.svg

@@ -0,0 +1,16 @@
+<!-- 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. -->
+
+<svg t="1654161407133" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1721" width="16" height="16"><path d="M804.224 86.144c0-19.264-15.616-34.944-34.944-34.944l-734.336 0c-19.264 0-34.944 15.68-34.944 34.944l0 82.048 804.224 0 0-82.048zM738.88 602.432c0 47.072-38.176 85.248-85.248 85.248s-85.248-38.176-85.248-85.248c0-47.072 38.176-85.248 85.248-85.248s85.248 38.176 85.248 85.248zM804.992 264.64l0-62.976-804.224 0 0 665.408c0 18.56 14.656 33.472 32.96 34.56l402.24 0c61.12 44.544 136.192 71.168 217.664 71.168 204.544 0 370.368-165.824 370.368-370.368 0-150.592-89.984-279.936-219.008-337.792zM412.096 298.24l30.528 0c-10.624 7.36-20.8 15.36-30.528 23.744l0-23.744zM63.04 298.24l153.024 0 0 153.024-153.024 0 0-153.024zM216.064 805.056l-153.024 0 0-153.024 153.024 0 0 153.024zM219.136 631.232l-153.024 0 0-153.024 153.024 0 0 153.024zM237.568 805.056l0-153.024 49.408 0c7.488 55.936 27.264 107.904 56.832 153.024l-106.24 0zM284.672 631.232l-44.032 0 0-153.024 64.384 0c-13.824 38.848-21.824 80.576-21.824 124.224 0 9.728 0.768 19.264 1.472 28.8zM390.592 341.76c-31.168 31.424-56.512 68.544-74.88 109.44l-78.144 0 0-152.96 153.024 0 0 43.52zM899.136 638.4l-63.36 12.864c-4.288 16.064-10.688 31.296-18.816 45.376l35.712 53.888-50.944 50.944-53.888-35.712c-14.08 8.128-29.312 14.528-45.376 18.816l-12.864 63.36-72 0-12.864-63.36c-16.064-4.288-31.296-10.688-45.376-18.816l-53.888 35.712-50.944-50.944 35.712-53.888c-8.128-14.08-14.528-29.312-18.816-45.376l-63.36-12.864 0-72 63.36-12.864c4.352-16.064 10.688-31.296 18.816-45.312l-35.712-53.952 50.944-50.944 53.888 35.776c14.08-8.128 29.312-14.464 45.376-18.816l12.864-63.36 72 0 12.864 63.36c16.064 4.288 31.296 10.688 45.376 18.816l53.888-35.712 50.944 50.944-35.712 53.824c8.128 14.08 14.528 29.312 18.816 45.376l63.36 12.864 0 72z" p-id="1722" fill="#707070"></path></svg>

src/graphql/fragments/demand-log.ts

@@ -0,0 +1,38 @@
+/**
+ * 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.
+ */
+
+export const queryContainers = {
+  variable: "$condition: OndemandContainergQueryCondition!",
+  query: `
+  containers: listContainers(condition: $condition) {
+    errorReason
+    containers
+  }`,
+};
+
+export const queryStreamingLogs = {
+  variable: "$condition: OndemandLogQueryCondition",
+  query: `
+  logs: ondemandPodLogs(condition: $condition) {
+    errorReason
+    logs {
+      timestamp
+      contentType
+      content
+    }
+  }`,
+};

src/graphql/index.ts

@@ -26,6 +26,7 @@ import * as profile from "./query/profile";
 import * as alarm from "./query/alarm";
 import * as event from "./query/event";
 import * as ebpf from "./query/ebpf";
+import * as demandLog from "./query/demand-log";
 
 const query: { [key: string]: string } = {
   ...app,
@@ -38,6 +39,7 @@ const query: { [key: string]: string } = {
   ...alarm,
   ...event,
   ...ebpf,
+  ...demandLog,
 };
 class Graphql {
   private queryData = "";

src/graphql/query/demand-log.ts

@@ -0,0 +1,22 @@
+/**
+ * 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.
+ */
+
+import { queryContainers, queryStreamingLogs } from "../fragments/demand-log";
+
+export const fetchContainers = `query listContainers(${queryContainers.variable}) {${queryContainers.query}}`;
+
+export const fetchDemandPodLogs = `query ondemandPodLogs(${queryStreamingLogs.variable}) {${queryStreamingLogs.query}}`;

src/hooks/useEcharts.ts

@@ -79,7 +79,11 @@ export function useECharts(
     if (!el || !unref(el)) {
       return;
     }
+    const { width, height } = el.getBoundingClientRect();
 
+    if (!width || !height) {
+      return;
+    }
     chartInstance = echarts.init(el, t);
     const { removeEvent } = useEventListener({
       el: window,

src/locales/lang/en.ts

@@ -136,7 +136,13 @@ const msg = {
   targetType: "Target Type",
   ebpfTip: "Don't have a process for profiling",
   processSelect: "Click to select processes",
+  container: "Container",
+  limit: "Limit",
   page: "Page",
+  interval: "Refresh Interval",
+  pause: "Pause",
+  begin: "Start",
+  seconds: "Seconds",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
   secondTip: "Select Second",

src/locales/lang/es.ts

@@ -74,8 +74,10 @@ const msg = {
   editGraph: "Editar Opciones",
   dashboardName: "Selecciona Nombre del Panel",
   linkDashboard: "Nombre del panel relacionado con llamadas de la topología",
-  linkServerMetrics: "Métricas de servidor relacionadas con llamadas de la topología",
+  linkServerMetrics:
-  linkClientMetrics: "Métricas de cliente relacionadas con llamadas de la topología",
+    "Métricas de servidor relacionadas con llamadas de la topología",
+  linkClientMetrics:
+    "Métricas de cliente relacionadas con llamadas de la topología",
   nodeDashboard: "Nombre del panel relacionado con nodos de la topología",
   nodeMetrics: "Mêtricas relacionas con nodos de la topología",
   instanceDashboard: "Nombre del panel relacionado con instancias de servicio",
@@ -137,6 +139,10 @@ const msg = {
   ebpfTip: "Le falta el proceso para perfilar",
   processSelect: "Click para seleccionar proceso",
   page: "Página",
+  interval: "Intervalo de actualización",
+  pause: "Pausa",
+  begin: "Inicio",
+  seconds: "Segundos",
   hourTip: "Seleccione Hora",
   minuteTip: "Seleccione Minuto",
   secondTip: "Seleccione Segundo",
@@ -303,7 +309,8 @@ const msg = {
   destEndpoint: "Endpoint Destinación",
   eventSource: "Fuente Envento",
   modalTitle: "Inspección",
-  selectRedirectPage: "Quiere inspeccionar las Trazas or Registros de datos del servicio %s?",
+  selectRedirectPage:
+    "Quiere inspeccionar las Trazas or Registros de datos del servicio %s?",
   logAnalysis: "Lenguaje de Análisis de Registro de Datos",
   logDataBody: "Contenido del Registro de Datos",
   addType: "Por favor introduzca un tipo",
@@ -324,8 +331,10 @@ const msg = {
   addTraceID: "Por favor introduzca el ID de la traza",
   addTags: "Por favor introduzaca una etiqueta",
   addKeywordsOfContent: "Por favor introduzca una clave de contenido",
-  addExcludingKeywordsOfContent: "Por favor introduzca una clave excluyente de contenido",
+  addExcludingKeywordsOfContent:
-  noticeTag: "Por favor presione Intro después de introducir una etiqueta(clave=valor).",
+    "Por favor introduzca una clave excluyente de contenido",
+  noticeTag:
+    "Por favor presione Intro después de introducir una etiqueta(clave=valor).",
   conditionNotice:
     "Aviso: Por favor presione Intro después de introducir una clave de contenido, excluir clave de contenido(clave=valor).",
   language: "Lenguaje",

src/locales/lang/zh.ts

@@ -134,7 +134,13 @@ const msg = {
   targetType: "目标类型",
   processSelect: "点击选择进程",
   ebpfTip: "没有进程可以分析",
+  container: "容器",
+  limit: "范围",
   page: "页面",
+  interval: "刷新间隔时间",
+  pause: "暂停",
+  begin: "开始",
+  seconds: "秒",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",

src/store/modules/dashboard.ts

@@ -114,7 +114,8 @@ export const dashboardStore = defineStore({
         type === "Trace" ||
         type === "Profile" ||
         type === "Log" ||
-        type === "Ebpf"
+        type === "Ebpf" ||
+        type === "DemandLog"
       ) {
         newItem.h = 36;
       }
@@ -170,7 +171,13 @@ export const dashboardStore = defineStore({
           showDepth: true,
         };
       }
-      if (type === "Trace" || type === "Profile" || type === "Log") {
+      if (
+        type === "Trace" ||
+        type === "Profile" ||
+        type === "Log" ||
+        type === "DemandLog" ||
+        type === "Ebpf"
+      ) {
         newItem.h = 32;
       }
       if (type === "Text") {

src/store/modules/demand-log.ts

@@ -0,0 +1,124 @@
+import { ElMessage } from "element-plus";
+/**
+ * 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.
+ */
+import { defineStore } from "pinia";
+import { Instance } from "@/types/selector";
+import { store } from "@/store";
+import graphql from "@/graphql";
+import { AxiosResponse } from "axios";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import { useSelectorStore } from "@/store/modules/selectors";
+import { Conditions, Log } from "@/types/demand-log";
+
+interface DemandLogState {
+  containers: Instance[];
+  instances: Instance[];
+  conditions: Conditions;
+  selectorStore: any;
+  logs: Log[];
+  loadLogs: boolean;
+  message: string;
+}
+
+export const demandLogStore = defineStore({
+  id: "demandLog",
+  state: (): DemandLogState => ({
+    containers: [{ label: "", value: "" }],
+    instances: [{ value: "", label: "" }],
+    conditions: {
+      container: "",
+      serviceInstanceId: "",
+      duration: useAppStoreWithOut().durationTime,
+    },
+    selectorStore: useSelectorStore(),
+    logs: [],
+    loadLogs: false,
+    message: "",
+  }),
+  actions: {
+    setLogCondition(data: Conditions) {
+      this.conditions = { ...this.conditions, ...data };
+    },
+    setLogs(logs: Log[], message?: string) {
+      this.logs = logs;
+      this.message = message || "";
+    },
+    async getInstances(id: string) {
+      const serviceId = this.selectorStore.currentService
+        ? this.selectorStore.currentService.id
+        : id;
+      const res: AxiosResponse = await graphql.query("queryInstances").params({
+        serviceId,
+        duration: useAppStoreWithOut().durationTime,
+      });
+
+      if (res.data.errors) {
+        return res.data;
+      }
+      this.instances = res.data.data.pods || [];
+      return res.data;
+    },
+    async getContainers(serviceInstanceId: string) {
+      if (!serviceInstanceId) {
+        return new Promise((resolve) =>
+          resolve({ errors: "No service instance" })
+        );
+      }
+      const condition = {
+        serviceInstanceId,
+      };
+      const res: AxiosResponse = await graphql
+        .query("fetchContainers")
+        .params({ condition });
+
+      if (res.data.errors) {
+        return res.data;
+      }
+      if (res.data.data.containers.errorReason) {
+        this.containers = [{ label: "", value: "" }];
+        return res.data;
+      }
+      this.containers = res.data.data.containers.containers.map((d: string) => {
+        return { label: d, value: d };
+      });
+      return res.data;
+    },
+    async getDemandLogs() {
+      this.loadLogs = true;
+      const res: AxiosResponse = await graphql
+        .query("fetchDemandPodLogs")
+        .params({ condition: this.conditions });
+      this.loadLogs = false;
+      if (res.data.errors) {
+        return res.data;
+      }
+      if (res.data.data.logs.errorReason) {
+        this.setLogs("", res.data.data.logs.errorReason);
+        return res.data;
+      }
+      const logs = res.data.data.logs.logs
+        .map((d: Log) => d.content)
+        .join("\n");
+      this.setLogs(logs);
+      return res.data;
+    },
+  },
+});
+
+export function useDemandLogStore(): any {
+  return demandLogStore(store);
+}

src/types/app.d.ts

@@ -28,3 +28,7 @@ export interface DurationTime {
   end: string;
   step: string;
 }
+export type Paging = {
+  pageNum: number;
+  pageSize: number;
+};

src/types/demand-log.ts

@@ -0,0 +1,31 @@
+/**
+ * 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.
+ */
+import { DurationTime } from "./app";
+
+export interface Conditions {
+  container: string;
+  serviceInstanceId: string;
+  duration: DurationTime;
+  keywordsOfContent?: string[];
+  excludingKeywordsOfContent?: string;
+}
+
+export interface Log {
+  content: string;
+  timestamp: number;
+  contentType: string;
+}

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";

src/views/dashboard/controls/DemandLog.vue

@@ -0,0 +1,93 @@
+<!-- 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. -->
+<template>
+  <div class="log-wrapper flex-v">
+    <el-popover
+      placement="bottom"
+      trigger="click"
+      :width="100"
+      v-if="dashboardStore.editMode"
+    >
+      <template #reference>
+        <span class="delete cp">
+          <Icon iconName="ellipsis_v" size="middle" class="operation" />
+        </span>
+      </template>
+      <div class="tools" @click="removeWidget">
+        <span>{{ t("delete") }}</span>
+      </div>
+    </el-popover>
+    <div class="header">
+      <Header />
+    </div>
+    <Content />
+  </div>
+</template>
+<script lang="ts" setup>
+import { useI18n } from "vue-i18n";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import Header from "../related/demand-log/Header.vue";
+import Content from "../related/demand-log/Content.vue";
+
+/*global defineProps */
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+  activeIndex: { type: String, default: "" },
+});
+const { t } = useI18n();
+const dashboardStore = useDashboardStore();
+
+function removeWidget() {
+  dashboardStore.removeControls(props.data);
+}
+</script>
+<style lang="scss" scoped>
+.log-wrapper {
+  width: 100%;
+  height: 100%;
+  font-size: 12px;
+  position: relative;
+  overflow: auto;
+}
+
+.delete {
+  position: absolute;
+  top: 5px;
+  right: 3px;
+}
+
+.header {
+  padding: 10px;
+  font-size: 12px;
+  border-bottom: 1px solid #dcdfe6;
+  min-width: 1024px;
+}
+
+.tools {
+  padding: 5px 0;
+  color: #999;
+  cursor: pointer;
+  position: relative;
+  text-align: center;
+
+  &:hover {
+    color: #409eff;
+    background-color: #eee;
+  }
+}
+</style>

src/views/dashboard/controls/Tab.vue

@@ -110,6 +110,7 @@ import Log from "./Log.vue";
 import Text from "./Text.vue";
 import Ebpf from "./Ebpf.vue";
 import { dragIgnoreFrom } from "../data";
+import DemandLog from "./DemandLog.vue";
 
 const props = {
   data: {
@@ -120,7 +121,7 @@ const props = {
 };
 export default defineComponent({
   name: "Tab",
-  components: { Topology, Widget, Trace, Profile, Log, Text, Ebpf },
+  components: { Topology, Widget, Trace, Profile, Log, Text, Ebpf, DemandLog },
   props,
   setup(props) {
     const { t } = useI18n();
@@ -250,21 +251,23 @@ export default defineComponent({
 
   span {
     display: inline-block;
-    padding: 0 10px;
-    margin: 0 10px;
     height: 40px;
     line-height: 40px;
     cursor: pointer;
+    text-align: center;
   }
 
   .tab-name {
-    max-width: 130px;
+    max-width: 110px;
     height: 20px;
     line-height: 20px;
     outline: none;
     color: #333;
     font-style: normal;
     margin-right: 5px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
   }
 
   .tab-icons {

src/views/dashboard/controls/index.ts

@@ -22,5 +22,16 @@ import Profile from "./Profile.vue";
 import Log from "./Log.vue";
 import Text from "./Text.vue";
 import Ebpf from "./Ebpf.vue";
+import DemandLog from "./DemandLog.vue";
 
-export default { Tab, Widget, Trace, Topology, Profile, Log, Text, Ebpf };
+export default {
+  Tab,
+  Widget,
+  Trace,
+  Topology,
+  Profile,
+  Log,
+  Text,
+  Ebpf,
+  DemandLog,
+};

src/views/dashboard/data.ts

@@ -186,6 +186,7 @@ export const ServiceTools = [
   { name: "timeline", content: "Trace Profiling", id: "addProfile" },
   { name: "insert_chart", content: "eBPF Profiling", id: "addEbpf" },
   { name: "assignment", content: "Log", id: "addLog" },
+  { name: "demand", content: "Add On Demand Log", id: "addDemandLog" },
 ];
 export const InstanceTools = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },
@@ -193,6 +194,7 @@ export const InstanceTools = [
   { name: "library_books", content: "Add Text", id: "addText" },
   { name: "merge", content: "Add Trace", id: "addTrace" },
   { name: "assignment", content: "Add Log", id: "addLog" },
+  { name: "demand", content: "Add On Demand Log", id: "addDemandLog" },
 ];
 export const EndpointTools = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },

src/views/dashboard/panel/Tool.vue

@@ -455,6 +455,9 @@ function setTabControls(id: string) {
     case "addText":
       dashboardStore.addTabControls("Text");
       break;
+    case "addDemandLog":
+      dashboardStore.addTabControls("DemandLog");
+      break;
     default:
       ElMessage.info("Don't support this control");
       break;
@@ -487,6 +490,9 @@ function setControls(id: string) {
     case "addText":
       dashboardStore.addControl("Text");
       break;
+    case "addDemandLog":
+      dashboardStore.addControl("DemandLog");
+      break;
     default:
       dashboardStore.addControl("Widget");
   }

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

@@ -0,0 +1,78 @@
+<!-- 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. -->
+<template>
+  <div
+    v-loading="demandLogStore.loadLogs"
+    class="log-content"
+    ref="logContent"
+    style="width: calc(100% - 10px); height: calc(100% - 140px)"
+  >
+    <span v-if="demandLogStore.message">{{ demandLogStore.message }}</span>
+  </div>
+</template>
+<script lang="ts" setup>
+import { onMounted, ref, onUnmounted, watch, toRaw } from "vue";
+import { useDemandLogStore } from "@/store/modules/demand-log";
+
+/*global Nullable */
+const demandLogStore = useDemandLogStore();
+const monacoInstance = ref();
+const logContent = ref<Nullable<HTMLDivElement>>(null);
+
+onMounted(async () => {
+  const monaco = await import("monaco-editor");
+  monacoInstanceGen(monaco);
+  window.addEventListener("resize", () => {
+    editorLayout();
+  });
+});
+function monacoInstanceGen(monaco: any) {
+  monacoInstance.value = monaco.editor.create(logContent.value, {
+    value: "",
+    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(() => {
+  if (!toRaw(monacoInstance.value)) {
+    return;
+  }
+  toRaw(monacoInstance.value).dispose();
+  monacoInstance.value = null;
+});
+watch(
+  () => demandLogStore.logs,
+  () => {
+    toRaw(monacoInstance.value).setValue(demandLogStore.logs);
+  }
+);
+</script>
+<style lang="scss" scoped>
+.log-content {
+  min-width: 600px;
+  min-height: 400px;
+}
+</style>

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

@@ -0,0 +1,412 @@
+<!-- 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. -->
+<template>
+  <div class="flex-h row">
+    <div class="mr-5 mb-5" v-if="dashboardStore.entity !== EntityType[3].value">
+      <span class="grey mr-5"> {{ t("instance") }}: </span>
+      <Selector
+        size="small"
+        :value="state.instance.value"
+        :options="demandLogStore.instances"
+        placeholder="Select a instance"
+        @change="changeField('instance', $event)"
+        class="selectors"
+      />
+    </div>
+    <div class="mr-5 mb-5" v-if="state.container">
+      <span class="grey mr-5">{{ t("container") }}:</span>
+      <Selector
+        size="small"
+        :value="state.container.value"
+        :options="demandLogStore.containers"
+        placeholder="Select a container"
+        @change="changeField('container', $event)"
+        class="selectors"
+      />
+    </div>
+    <!-- <div class="mr-5">
+      <span class="grey mr-5">{{ t("limit") }}:</span>
+      <el-input-number
+        v-model="limit"
+        :min="1"
+        :max="1000"
+        size="small"
+        controls-position="right"
+        @change="changeField('limit', $event)"
+      />
+    </div> -->
+    <div class="mr-5">
+      <span class="grey mr-5">{{ t("duration") }}:</span>
+      <Selector
+        size="small"
+        :value="state.duration.value"
+        :options="TimeRanges"
+        placeholder="Select a time range"
+        @change="changeField('duration', $event)"
+        class="duration-range"
+      />
+    </div>
+    <div class="mr-5">
+      <span class="grey mr-5">{{ t("interval") }}:</span>
+      <Selector
+        size="small"
+        :value="state.interval.value"
+        :options="IntervalOpts"
+        @change="changeField('interval', $event)"
+      />
+    </div>
+  </div>
+  <div class="flex-h row">
+    <div class="mr-5">
+      <span class="mr-5 grey">{{ t("keywordsOfContent") }}:</span>
+      <span class="log-tags">
+        <span
+          class="selected"
+          v-for="(item, index) in keywordsOfContent"
+          :key="`keywordsOfContent${index}`"
+        >
+          <span>{{ item }}</span>
+          <span class="remove-icon" @click="removeContent(index)">×</span>
+        </span>
+      </span>
+      <el-input
+        size="small"
+        class="inputs-max"
+        :placeholder="t('addKeywordsOfContent')"
+        v-model="contentStr"
+        @change="addLabels('keywordsOfContent')"
+      />
+    </div>
+    <div class="mr-5">
+      <span class="grey mr-5"> {{ t("excludingKeywordsOfContent") }}: </span>
+      <span class="log-tags">
+        <span
+          class="selected"
+          v-for="(item, index) in excludingKeywordsOfContent"
+          :key="`excludingKeywordsOfContent${index}`"
+        >
+          <span>{{ item }}</span>
+          <span class="remove-icon" @click="removeExcludeContent(index)">
+            ×
+          </span>
+        </span>
+      </span>
+      <el-input
+        class="inputs-max"
+        size="small"
+        :placeholder="t('addExcludingKeywordsOfContent')"
+        v-model="excludingContentStr"
+        @change="addLabels('excludingKeywordsOfContent')"
+      />
+      <el-tooltip :content="t('keywordsOfContentLogTips')">
+        <span class="log-tips">
+          <Icon size="middle" iconName="help" class="ml-5 help" />
+        </span>
+      </el-tooltip>
+    </div>
+  </div>
+  <div class="flex-h row btn-row">
+    <el-button
+      class="search-btn mt-10"
+      size="small"
+      type="primary"
+      @click="runInterval"
+    >
+      <Icon
+        size="middle"
+        iconName="retry"
+        :loading="!!intervalFn"
+        class="mr-5"
+      />
+      {{ intervalFn ? t("pause") : t("start") }}
+    </el-button>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, reactive, watch, computed, onMounted, onUnmounted } from "vue";
+import { useI18n } from "vue-i18n";
+import { useDemandLogStore } from "@/store/modules/demand-log";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import { useSelectorStore } from "@/store/modules/selectors";
+import { ElMessage } from "element-plus";
+import { EntityType } from "../../data";
+import { TimeRanges, IntervalOpts } from "./data";
+import getLocalTime from "@/utils/localtime";
+import dateFormatStep from "@/utils/dateFormat";
+
+const { t } = useI18n();
+const appStore = useAppStoreWithOut();
+const selectorStore = useSelectorStore();
+const dashboardStore = useDashboardStore();
+const demandLogStore = useDemandLogStore();
+const keywordsOfContent = ref<string[]>([]);
+const excludingKeywordsOfContent = ref<string[]>([]);
+const contentStr = ref<string>("");
+const excludingContentStr = ref<string>("");
+// const limit = ref<number>(20);
+const state = reactive<any>({
+  instance: { value: "", label: "" },
+  container: { value: "", label: "" },
+  duration: { label: "From 30 minutes ago", value: 1800 },
+  interval: { label: "30 seconds", value: 30 },
+});
+/*global Nullable */
+const intervalFn = ref<Nullable<any>>(null);
+const rangeTime = computed(() => {
+  const times = {
+    start: getLocalTime(
+      appStore.utc,
+      new Date(new Date().getTime() - state.duration.value * 1000)
+    ),
+    end: getLocalTime(appStore.utc, new Date()),
+    step: "SECOND",
+  };
+  return {
+    start: dateFormatStep(times.start, times.step, false),
+    end: dateFormatStep(times.end, times.step, false),
+    step: times.step,
+  };
+});
+
+onMounted(() => {
+  fetchSelectors();
+});
+
+async function fetchSelectors() {
+  if (dashboardStore.entity !== EntityType[3].value) {
+    await getInstances();
+  }
+  getContainers();
+  if (intervalFn.value) {
+    clearTimer();
+  }
+}
+async function getContainers() {
+  const resp = await demandLogStore.getContainers(
+    state.instance.id || selectorStore.currentPod.id || ""
+  );
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+    return;
+  }
+  if (demandLogStore.containers.length) {
+    state.container = demandLogStore.containers[0];
+  }
+}
+async function getInstances() {
+  const resp = await demandLogStore.getInstances();
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+    return;
+  }
+  state.instance = demandLogStore.instances[0];
+}
+function runInterval() {
+  if (intervalFn.value) {
+    clearTimer();
+    return;
+  }
+  searchLogs();
+  if (state.interval.value === 0) {
+    return;
+  }
+  intervalFn.value = setInterval(searchLogs, state.interval.value * 1000);
+  setTimeout(() => {
+    clearTimer();
+  }, state.duration.value * 1000);
+}
+function searchLogs() {
+  let instance = state.instance.id;
+  if (dashboardStore.entity === EntityType[3].value) {
+    instance = selectorStore.currentPod.id;
+  }
+  demandLogStore.setLogCondition({
+    serviceInstanceId: instance || state.instance.id || "",
+    container: state.container.value,
+    duration: rangeTime.value,
+    keywordsOfContent: keywordsOfContent.value.length
+      ? keywordsOfContent.value
+      : undefined,
+    excludingKeywordsOfContent: excludingKeywordsOfContent.value.length
+      ? excludingKeywordsOfContent.value
+      : undefined,
+  });
+  queryLogs();
+}
+async function queryLogs() {
+  const res = await demandLogStore.getDemandLogs();
+  if (res && res.errors) {
+    ElMessage.error(res.errors);
+  }
+}
+function changeField(type: string, opt: any) {
+  clearTimer();
+  // if (["limit"].includes(type)) {
+  //   state[type] = opt;
+  //   return;
+  // }
+  state[type] = opt[0];
+  if (type === "instance") {
+    getContainers();
+  }
+}
+function removeContent(index: number) {
+  const keywordsOfContentList = keywordsOfContent.value || [];
+  keywordsOfContentList.splice(index, 1);
+  demandLogStore.setLogCondition({
+    keywordsOfContent: keywordsOfContentList,
+  });
+  contentStr.value = "";
+  clearTimer();
+}
+function addLabels(type: string) {
+  if (type === "keywordsOfContent" && !contentStr.value) {
+    return;
+  }
+  if (type === "excludingKeywordsOfContent" && !excludingContentStr.value) {
+    return;
+  }
+  if (type === "keywordsOfContent") {
+    keywordsOfContent.value.push(contentStr.value);
+    demandLogStore.setLogCondition({
+      [type]: keywordsOfContent.value,
+    });
+    contentStr.value = "";
+  } else if (type === "excludingKeywordsOfContent") {
+    excludingKeywordsOfContent.value.push(excludingContentStr.value);
+    demandLogStore.setLogCondition({
+      [type]: excludingKeywordsOfContent.value,
+    });
+    excludingContentStr.value = "";
+  }
+  clearTimer();
+}
+function removeExcludeContent(index: number) {
+  excludingKeywordsOfContent.value.splice(index, 1);
+  demandLogStore.setLogCondition({
+    excludingKeywordsOfContent: excludingKeywordsOfContent.value,
+  });
+  excludingContentStr.value = "";
+  clearTimer();
+}
+function clearTimer() {
+  if (!intervalFn.value) {
+    return;
+  }
+  clearInterval(intervalFn.value);
+  intervalFn.value = null;
+}
+onUnmounted(() => {
+  clearTimer();
+});
+watch(
+  () => selectorStore.currentService,
+  () => {
+    if (dashboardStore.entity === EntityType[0].value) {
+      fetchSelectors();
+      demandLogStore.setLogs("");
+    }
+  }
+);
+watch(
+  () => [selectorStore.currentPod],
+  () => {
+    if (dashboardStore.entity === EntityType[3].value) {
+      fetchSelectors();
+      demandLogStore.setLogs("");
+    }
+  }
+);
+</script>
+<style lang="scss" scoped>
+.inputs {
+  width: 120px;
+}
+
+.row {
+  margin-bottom: 5px;
+  position: relative;
+  flex-wrap: wrap;
+}
+
+.inputs-max {
+  width: 270px;
+}
+
+.traceId {
+  margin-top: 2px;
+}
+
+.search-btn {
+  cursor: pointer;
+  width: 120px;
+}
+
+.tips {
+  color: #888;
+}
+
+.log-tag {
+  width: 30%;
+  border-style: unset;
+  outline: 0;
+  border: 1px solid #ccc;
+  height: 30px;
+  padding: 0 5px;
+}
+
+.log-tags {
+  padding: 1px 5px 0 0;
+  border-radius: 3px;
+  height: 24px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.selected {
+  display: inline-block;
+  padding: 0 3px;
+  border-radius: 3px;
+  overflow: hidden;
+  color: #3d444f;
+  border: 1px dashed #aaa;
+  font-size: 12px;
+  margin: 0 2px;
+}
+
+.remove-icon {
+  display: inline-block;
+  margin-left: 3px;
+  cursor: pointer;
+}
+
+.selectors {
+  width: 250px;
+}
+
+.duration-range {
+  width: 210px;
+}
+
+.btn-row {
+  justify-content: flex-end;
+}
+
+.help {
+  color: #999;
+  cursor: pointer;
+}
+</style>

src/views/dashboard/related/demand-log/data.ts

@@ -0,0 +1,37 @@
+/**
+ * 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.
+ */
+
+export const TimeRanges = [
+  { label: "From 5 seconds ago -- Now", value: 5 },
+  { label: "From 10 seconds ago -- Now", value: 10 },
+  { label: "From 15 seconds ago -- Now", value: 15 },
+  { label: "From 30 seconds ago -- Now", value: 30 },
+  { label: "From 45 seconds ago -- Now", value: 45 },
+  { label: "From 1 minute ago -- Now", value: 60 },
+  { label: "From 5 minutes ago -- Now", value: 300 },
+  { label: "From 15 minutes ago -- Now", value: 900 },
+  { label: "From 30 minutes ago -- Now", value: 1800 },
+];
+export const IntervalOpts = [
+  { label: "None", value: 0 },
+  { label: "5 seconds", value: 5 },
+  { label: "10 seconds", value: 10 },
+  { label: "15 seconds", value: 15 },
+  { label: "30 seconds", value: 30 },
+  { label: "45 seconds", value: 45 },
+  { label: "1 minute", value: 60 },
+];

src/views/dashboard/related/ebpf/components/EBPFSchedules.vue

@@ -253,7 +253,7 @@ watch(
 }
 
 .inputs {
-  width: 350px;
+  width: 400px;
 }
 
 .input-with-search {

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");
@@ -64,6 +65,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[\\/]/,
@@ -98,7 +104,8 @@ module.exports = {
       Components({
         resolvers: [ElementPlusResolver({ importStyle: "css" })],
         dts: "./src/types/components.d.ts",
-      })
+      }),
+      new MonacoWebpackPlugin()
     );
   },
 };