update header

src/locales/lang/en.ts

@@ -139,6 +139,7 @@ const msg = {
   container: "Container",
   limit: "Limit",
   page: "Page",
+  interval: "Refresh Interval",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
   secondTip: "Select Second",

src/locales/lang/es.ts

@@ -139,6 +139,7 @@ const msg = {
   ebpfTip: "Le falta el proceso para perfilar",
   processSelect: "Click para seleccionar proceso",
   page: "Página",
+  interval: "Intervalo de actualización",
   hourTip: "Seleccione Hora",
   minuteTip: "Seleccione Minuto",
   secondTip: "Seleccione Segundo",

src/locales/lang/zh.ts

@@ -137,6 +137,7 @@ const msg = {
   container: "容器",
   limit: "范围",
   page: "页面",
+  interval: "刷新间隔时间",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",

src/store/modules/demand-log.ts

@@ -21,22 +21,26 @@ import graphql from "@/graphql";
 import { AxiosResponse } from "axios";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { useSelectorStore } from "@/store/modules/selectors";
+import { Conditions, DemandLog } from "@/types/demand-log";
 
 interface DemandLogState {
   containers: Instance[];
   instances: Instance[];
-  conditions: any;
+  conditions: Conditions;
   selectorStore: any;
-  logs: any[];
+  logs: DemandLog[];
   loadLogs: boolean;
 }
 
 export const demandLogStore = defineStore({
   id: "demandLog",
   state: (): DemandLogState => ({
-    containers: [{ value: "0", label: "All" }],
-    instances: [{ value: "0", label: "All" }],
+    containers: [{ value: "0", label: "" }],
+    instances: [{ value: "0", label: "" }],
     conditions: {
+      container: "",
+      serviceId: "",
+      serviceInstanceId: "",
       queryDuration: useAppStoreWithOut().durationTime,
       paging: { pageNum: 1, pageSize: 15 },
     },
@@ -48,16 +52,6 @@ export const demandLogStore = defineStore({
     setLogCondition(data: any) {
       this.conditions = { ...this.conditions, ...data };
     },
-    async getServices(layer: string) {
-      const res: AxiosResponse = await graphql.query("queryServices").params({
-        layer,
-      });
-      if (res.data.errors) {
-        return res.data;
-      }
-      this.services = res.data.data.services;
-      return res.data;
-    },
     async getInstances(id: string) {
       const serviceId = this.selectorStore.currentService
         ? this.selectorStore.currentService.id
@@ -70,16 +64,37 @@ export const demandLogStore = defineStore({
       if (res.data.errors) {
         return res.data;
       }
-      this.instances = [
-        { value: "0", label: "All" },
-        ...res.data.data.pods,
-      ] || [{ value: " 0", label: "All" }];
+      this.instances = res.data.data.pods || [];
       return res.data;
     },
-    async getLogs() {
+    async getContainers(instanceId?: string) {
+      const serviceId =
+        this.selectorStore.currentService &&
+        this.selectorStore.currentService.id;
+      const serviceInstanceId =
+        instanceId ||
+        (this.selectorStore.currentInstance &&
+          this.selectorStore.currentInstance.id);
+      const condition = {
+        serviceId,
+        serviceInstanceId,
+      };
+      const res: AxiosResponse = await graphql.query("fetchContainers").params({
+        condition,
+      });
+
+      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" }];
+      return res.data;
+    },
+    async getDemandLogs() {
       this.loadLogs = true;
       const res: AxiosResponse = await graphql
-        .query("queryServiceLogs")
+        .query("fetchStreamingLogs")
         .params({ condition: this.conditions });
       this.loadLogs = false;
       if (res.data.errors) {

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,33 @@
+/**
+ * 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, Paging } from "./app";
+
+export interface Conditions {
+  container: string;
+  serviceId: string;
+  serviceInstanceId: string;
+  queryDuration: DurationTime;
+  paging: Paging;
+  keywordsOfContent?: string[];
+  excludingKeywordsOfContent?: string;
+}
+
+export interface DemandLog {
+  content: string;
+  timestamp: number;
+  contentType: string;
+}

src/views/dashboard/controls/DemandLog.vue

@@ -32,12 +32,16 @@ limitations under the License. -->
     <div class="header">
       <Header />
     </div>
+    <div class="content">
+      <Content />
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
-import Header from "../related/demand/Header.vue";
+import Header from "../related/demand-log/Header.vue";
+import Content from "../related/demand-log/Content.vue";
 
 /*global defineProps */
 const props = defineProps({
@@ -89,7 +93,7 @@ function removeWidget() {
   }
 }
 
-.log {
+.content {
   width: 100%;
 }
 </style>

src/views/dashboard/controls/Tab.vue

@@ -251,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/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" },

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

@@ -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. -->
+<template>
+  <div>logs</div>
+</template>

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

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="flex-h row">
-    <div class="mr-5" v-if="dashboardStore.entity !== EntityType[3].value">
+    <div class="mr-5 mb-5" v-if="dashboardStore.entity !== EntityType[3].value">
       <span class="grey mr-5"> {{ t("instance") }}: </span>
       <Selector
         size="small"
@@ -22,9 +22,10 @@ limitations under the License. -->
         :options="demandLogStore.instances"
         placeholder="Select a instance"
         @change="changeField('instance', $event)"
+        class="selectors"
       />
     </div>
-    <div class="mr-5">
+    <div class="mr-5 mb-5">
       <span class="grey mr-5">{{ t("container") }}:</span>
       <Selector
         size="small"
@@ -32,6 +33,7 @@ limitations under the License. -->
         :options="demandLogStore.containers"
         placeholder="Select a container"
         @change="changeField('container', $event)"
+        class="selectors"
       />
     </div>
     <div class="mr-5">
@@ -47,12 +49,13 @@ limitations under the License. -->
     </div>
     <div class="mr-5">
       <span class="grey mr-5">{{ t("duration") }}:</span>
-      <!-- <TimePicker
-        :value="duration"
-        position="bottom"
-        format="YYYY-MM-DD HH:mm:ss"
-        @input="changeDuration"
-      /> -->
+      <Selector
+        size="small"
+        :value="state.duration.value"
+        :options="TimeRanges"
+        placeholder="Select a time range"
+        @change="changeField('duration', $event)"
+      />
     </div>
     <div class="mr-5">
       <span class="grey mr-5">{{ t("interval") }}:</span>
@@ -66,16 +69,8 @@ limitations under the License. -->
       />
       Seconds
     </div>
-    <el-button
-      class="search-btn"
-      size="small"
-      type="primary"
-      @click="searchLogs"
-    >
-      {{ t("search") }}
-    </el-button>
   </div>
-  <div class="flex-h">
+  <div class="flex-h row">
     <div class="mr-5">
       <span class="mr-5 grey">{{ t("keywordsOfContent") }}:</span>
       <span class="log-tags">
@@ -124,6 +119,16 @@ limitations under the License. -->
       </el-tooltip>
     </div>
   </div>
+  <div class="flex-h row btn-row">
+    <el-button
+      class="search-btn mt-10"
+      size="small"
+      type="primary"
+      @click="searchLogs"
+    >
+      {{ t("search") }}
+    </el-button>
+  </div>
 </template>
 <script lang="ts" setup>
 import { ref, reactive, watch } from "vue";
@@ -134,6 +139,7 @@ import { useAppStoreWithOut } from "@/store/modules/app";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { ElMessage } from "element-plus";
 import { EntityType } from "../../data";
+import { TimeRanges } from "./data";
 
 const { t } = useI18n();
 const appStore = useAppStoreWithOut();
@@ -148,34 +154,24 @@ const limit = ref<number>(1);
 const intervalTime = ref<number>(1);
 const state = reactive<any>({
   instance: { value: "", label: "" },
-  container: { value: "", label: "" },
+  container: { value: "", label: "None" },
+  duration: { label: "Last 30 min", value: 1800 },
 });
 
 init();
 async function init() {
   fetchSelectors();
   await searchLogs();
-  state.instance = { value: "0", label: "All" };
 }
-function fetchSelectors() {
-  if (dashboardStore.entity === EntityType[1].value) {
-    getServices();
-  }
+async function fetchSelectors() {
   if (dashboardStore.entity !== EntityType[3].value) {
-    getInstances();
+    await getInstances();
+    await demandLogStore.getContainers(state.instance.id);
   }
+  state.container = demandLogStore.containers[0];
 }
-async function getServices() {
-  const resp = await demandLogStore.getServices(dashboardStore.layerId);
-  if (resp.errors) {
-    ElMessage.error(resp.errors);
-    return;
-  }
-  state.service = demandLogStore.services[0];
-  getInstances(state.service.id);
-}
-async function getInstances(id?: string) {
-  const resp = await demandLogStore.getInstances(id);
+async function getInstances() {
+  const resp = await demandLogStore.getInstances();
   if (resp.errors) {
     ElMessage.error(resp.errors);
     return;
@@ -200,12 +196,16 @@ function searchLogs() {
   queryLogs();
 }
 async function queryLogs() {
-  const res = await demandLogStore.getLogs();
+  const res = await demandLogStore.getDemandLogs();
   if (res && res.errors) {
     ElMessage.error(res.errors);
   }
 }
 function changeField(type: string, opt: any) {
+  if (["limit", "interval"].includes(type)) {
+    state[type] = opt;
+    return;
+  }
   state[type] = opt[0];
 }
 function removeContent(index: number) {
@@ -269,6 +269,7 @@ watch(
 .row {
   margin-bottom: 5px;
   position: relative;
+  flex-wrap: wrap;
 }
 
 .inputs-max {
@@ -280,11 +281,8 @@ watch(
 }
 
 .search-btn {
-  position: absolute;
-  top: 0;
-  right: 10px;
   cursor: pointer;
-  width: 120px;
+  width: 220px;
 }
 
 .tips {
@@ -324,4 +322,12 @@ watch(
   margin-left: 3px;
   cursor: pointer;
 }
+
+.selectors {
+  width: 250px;
+}
+
+.btn-row {
+  justify-content: flex-end;
+}
 </style>

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

@@ -0,0 +1,28 @@
+/**
+ * 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: "Last 5 seconds", value: 5 },
+  { label: "Last 10 seconds", value: 10 },
+  { label: "Last 15 seconds", value: 15 },
+  { label: "Last 30 seconds", value: 30 },
+  { label: "Last 45 seconds", value: 45 },
+  { label: "Last 1 min", value: 60 },
+  { label: "Last 5 min", value: 300 },
+  { label: "Last 15 min", value: 900 },
+  { label: "Last 30 min", value: 1800 },
+];

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

@@ -67,7 +67,6 @@ function drawGraph() {
   );
   root.value = param[0];
   root.dumpCount = param[1];
-  console.log(root);
   stackTree.value = root;
   const w = (graph.value && graph.value.getBoundingClientRect().width) || 10;
   flameChart.value = flamegraph()