add demand log store

src/store/modules/demand-log.ts

@@ -0,0 +1,97 @@
+/**
+ * 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, Service } 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";
+
+interface DemandLogState {
+  services: Service[];
+  instances: Instance[];
+  conditions: any;
+  selectorStore: any;
+  logs: any[];
+  loadLogs: boolean;
+}
+
+export const demandLogStore = defineStore({
+  id: "demandLog",
+  state: (): DemandLogState => ({
+    services: [{ value: "0", label: "All" }],
+    instances: [{ value: "0", label: "All" }],
+    conditions: {
+      queryDuration: useAppStoreWithOut().durationTime,
+      paging: { pageNum: 1, pageSize: 15 },
+    },
+    selectorStore: useSelectorStore(),
+    logs: [],
+    loadLogs: false,
+  }),
+  actions: {
+    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
+        : id;
+      const res: AxiosResponse = await graphql.query("queryInstances").params({
+        serviceId,
+        duration: useAppStoreWithOut().durationTime,
+      });
+
+      if (res.data.errors) {
+        return res.data;
+      }
+      this.instances = [
+        { value: "0", label: "All" },
+        ...res.data.data.pods,
+      ] || [{ value: " 0", label: "All" }];
+      return res.data;
+    },
+    async getLogs() {
+      this.loadLogs = true;
+      const res: AxiosResponse = await graphql
+        .query("queryServiceLogs")
+        .params({ condition: this.conditions });
+      this.loadLogs = false;
+      if (res.data.errors) {
+        return res.data;
+      }
+
+      this.logs = res.data.data.queryLogs.logs;
+      return res.data;
+    },
+  },
+});
+
+export function useDemandLogStore(): any {
+  return demandLogStore(store);
+}

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

@@ -19,18 +19,19 @@ limitations under the License. -->
       <Selector
         size="small"
         :value="state.service.value"
-        :options="logStore.services"
+        :options="demandLogStore.services"
         placeholder="Select a service"
         @change="changeField('service', $event)"
       />
     </div>
     <div class="mr-5">
       <span class="grey mr-5">{{ t("limit") }}:</span>
-      <Selector
+      <el-input-number
+        v-model="limit"
+        :min="1"
+        :max="100"
         size="small"
-        :value="state.service.value"
+        controls-position="right"
-        :options="logStore.services"
-        placeholder="Select a service"
         @change="changeField('service', $event)"
       />
     </div>
@@ -43,18 +44,8 @@ limitations under the License. -->
       {{ t("search") }}
     </el-button>
   </div>
-  <div class="flex-h row">
+  <div class="flex-h">
-    <div class="mr-5 traceId" v-show="!isBrowser">
+    <div class="mr-5">
-      <span class="grey mr-5">{{ t("traceID") }}:</span>
-      <el-input v-model="traceId" class="inputs-max" size="small" />
-    </div>
-    <ConditionTags :type="'LOG'" @update="updateTags" />
-  </div>
-  <div class="row tips">
-    <b>{{ t("conditionNotice") }}</b>
-  </div>
-  <div class="flex-h" v-show="!isBrowser">
-    <div class="mr-5" v-show="logStore.supportQueryLogsByKeywords">
       <span class="mr-5 grey">{{ t("keywordsOfContent") }}:</span>
       <span class="log-tags">
         <span
@@ -74,7 +65,7 @@ limitations under the License. -->
         @change="addLabels('keywordsOfContent')"
       />
     </div>
-    <div class="mr-5" v-show="logStore.supportQueryLogsByKeywords">
+    <div class="mr-5">
       <span class="grey mr-5"> {{ t("excludingKeywordsOfContent") }}: </span>
       <span class="log-tags">
         <span
@@ -96,7 +87,7 @@ limitations under the License. -->
         @change="addLabels('excludingKeywordsOfContent')"
       />
       <el-tooltip :content="t('keywordsOfContentLogTips')">
-        <span class="log-tips" v-show="!logStore.supportQueryLogsByKeywords">
+        <span class="log-tips">
           <Icon icon="help" class="mr-5" />
         </span>
       </el-tooltip>
@@ -106,12 +97,10 @@ limitations under the License. -->
 <script lang="ts" setup>
 import { ref, reactive, watch } from "vue";
 import { useI18n } from "vue-i18n";
-import { Option } from "@/types/app";
+import { useDemandLogStore } from "@/store/modules/demand-log";
-import { useLogStore } from "@/store/modules/log";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { useSelectorStore } from "@/store/modules/selectors";
-import ConditionTags from "@/views/components/ConditionTags.vue";
 import { ElMessage } from "element-plus";
 import { EntityType } from "../../data";
 
@@ -119,132 +108,77 @@ const { t } = useI18n();
 const appStore = useAppStoreWithOut();
 const selectorStore = useSelectorStore();
 const dashboardStore = useDashboardStore();
-const logStore = useLogStore();
+const demandLogStore = useDemandLogStore();
-const traceId = ref<string>("");
 const keywordsOfContent = ref<string[]>([]);
 const excludingKeywordsOfContent = ref<string[]>([]);
-const tagsList = ref<string[]>([]);
-const tagsMap = ref<Option[]>([]);
 const contentStr = ref<string>("");
 const excludingContentStr = ref<string>("");
-const isBrowser = ref<boolean>(dashboardStore.layerId === "BROWSER");
+const limit = ref<number>(1);
 const state = reactive<any>({
-  instance: { value: "0", label: "All" },
-  endpoint: { value: "0", label: "All" },
   service: { value: "", label: "" },
 });
 
 init();
 async function init() {
-  const resp = await logStore.getLogsByKeywords();
+  fetchSelectors();
-
-  if (resp.errors) {
-    ElMessage.error(resp.errors);
-    return;
-  }
-  await fetchSelectors();
   await searchLogs();
   state.instance = { value: "0", label: "All" };
-  state.endpoint = { value: "0", label: "All" };
 }
-
 function fetchSelectors() {
   if (dashboardStore.entity === EntityType[1].value) {
     getServices();
-    return;
   }
-  if (dashboardStore.entity === EntityType[2].value) {
+  if (dashboardStore.entity !== EntityType[3].value) {
     getInstances();
-    return;
-  }
-  if (dashboardStore.entity === EntityType[3].value) {
-    getEndpoints();
-    return;
-  }
-  if (dashboardStore.entity === EntityType[0].value) {
-    getInstances();
-    getEndpoints();
   }
 }
-
 async function getServices() {
-  const resp = await logStore.getServices(dashboardStore.layerId);
+  const resp = await demandLogStore.getServices(dashboardStore.layerId);
   if (resp.errors) {
     ElMessage.error(resp.errors);
     return;
   }
-  state.service = logStore.services[0];
+  state.service = demandLogStore.services[0];
   getInstances(state.service.id);
-  getEndpoints(state.service.id);
-}
-
-async function getEndpoints(id?: string) {
-  const resp = await logStore.getEndpoints(id);
-  if (resp.errors) {
-    ElMessage.error(resp.errors);
-    return;
-  }
-  state.endpoint = logStore.endpoints[0];
 }
 async function getInstances(id?: string) {
-  const resp = await logStore.getInstances(id);
+  const resp = await demandLogStore.getInstances(id);
   if (resp.errors) {
     ElMessage.error(resp.errors);
     return;
   }
-  state.instance = logStore.instances[0];
+  state.instance = demandLogStore.instances[0];
 }
 function searchLogs() {
-  let endpoint = "",
+  let instance = "";
-    instance = "";
-  if (dashboardStore.entity === EntityType[2].value) {
-    endpoint = selectorStore.currentPod.id;
-  }
   if (dashboardStore.entity === EntityType[3].value) {
     instance = selectorStore.currentPod.id;
   }
-  logStore.setLogCondition({
+  demandLogStore.setLogCondition({
     serviceId: selectorStore.currentService
       ? selectorStore.currentService.id
       : state.service.id,
-    endpointId: endpoint || state.endpoint.id || undefined,
     serviceInstanceId: instance || state.instance.id || undefined,
     queryDuration: appStore.durationTime,
     keywordsOfContent: keywordsOfContent.value,
     excludingKeywordsOfContent: excludingKeywordsOfContent.value,
-    tags: tagsMap.value.length ? tagsMap.value : undefined,
+    paging: { pageNum: 1, pageSize: 15 },
-    paging: { pageNum: 1, pageSize: 15, needTotal: true },
-    relatedTrace: traceId.value ? { traceId: traceId.value } : undefined,
   });
   queryLogs();
 }
 async function queryLogs() {
-  const res = await logStore.getLogs();
+  const res = await demandLogStore.getLogs();
   if (res && res.errors) {
     ElMessage.error(res.errors);
   }
 }
 function changeField(type: string, opt: any) {
   state[type] = opt[0];
-  if (type === "service") {
-    getEndpoints(state.service.id);
-    getInstances(state.service.id);
-  }
-}
-async function searchEndpoints(keyword: string) {
-  const resp = await logStore.getEndpoints(state.service.id, keyword);
-  if (resp.errors) {
-    ElMessage.error(resp.errors);
-  }
-}
-function updateTags(data: { tagsMap: Array<Option>; tagsList: string[] }) {
-  tagsList.value = data.tagsList;
-  tagsMap.value = data.tagsMap;
 }
 function removeContent(index: number) {
   const keywordsOfContentList = keywordsOfContent.value || [];
   keywordsOfContentList.splice(index, 1);
-  logStore.setLogCondition({
+  demandLogStore.setLogCondition({
     keywordsOfContent: keywordsOfContentList,
   });
   contentStr.value = "";
@@ -258,13 +192,13 @@ function addLabels(type: string) {
   }
   if (type === "keywordsOfContent") {
     keywordsOfContent.value.push(contentStr.value);
-    logStore.setLogCondition({
+    demandLogStore.setLogCondition({
       [type]: keywordsOfContent.value,
     });
     contentStr.value = "";
   } else if (type === "excludingKeywordsOfContent") {
     excludingKeywordsOfContent.value.push(excludingContentStr.value);
-    logStore.setLogCondition({
+    demandLogStore.setLogCondition({
       [type]: excludingKeywordsOfContent.value,
     });
     excludingContentStr.value = "";
@@ -272,7 +206,7 @@ function addLabels(type: string) {
 }
 function removeExcludeContent(index: number) {
   excludingKeywordsOfContent.value.splice(index, 1);
-  logStore.setLogCondition({
+  demandLogStore.setLogCondition({
     excludingKeywordsOfContent: excludingKeywordsOfContent.value,
   });
   excludingContentStr.value = "";
@@ -288,16 +222,7 @@ watch(
 watch(
   () => [selectorStore.currentPod],
   () => {
-    if (dashboardStore.entity === EntityType[0].value) {
+    if (dashboardStore.entity === EntityType[3].value) {
-      return;
-    }
-    init();
-  }
-);
-watch(
-  () => appStore.durationTime,
-  () => {
-    if (dashboardStore.entity === EntityType[1].value) {
       init();
     }
   }