From c9b1d43448986e2dd26d60a241845ef5c9d06f1e Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Thu, 2 Jun 2022 17:19:38 +0800
Subject: [PATCH] update on-demand logs

---
 src/assets/icons/demand.svg                   |  3 +-
 src/store/modules/demand-log.ts               | 18 ++++++-
 .../dashboard/related/demand-log/Content.vue  |  8 +--
 .../dashboard/related/demand-log/Header.vue   | 53 ++++++++++++-------
 4 files changed, 56 insertions(+), 26 deletions(-)

diff --git a/src/assets/icons/demand.svg b/src/assets/icons/demand.svg
index e9fc97fa..4b1b60db 100644
--- a/src/assets/icons/demand.svg
+++ b/src/assets/icons/demand.svg
@@ -12,4 +12,5 @@ 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. -->
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="48px" height="48.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#515151" d="M994.504704 650.283008c-2.920448-2.402304-6.203392-3.612672-9.752576-3.612672-8.183808 0-15.327232 6.424576-15.39072 6.469632l-222.119936 204.71808-90.068992-71.8848c-5.277696-4.743168-10.61888-7.145472-15.86176-7.145472-4.067328 0-8.056832 1.396736-11.872256 4.179968-12.955648 9.549824-2.85696 25.647104-2.512896 26.228736l99.508224 134.234112c5.85728 6.832128 11.88864 10.30144 17.983488 10.30144 10.162176 0 17.416192-9.771008 17.590272-9.988096l230.445056-269.959168c9.043968-12.642304 5.554176-20.727808 2.052096-23.54176zM834.873344 300.804096c0-14.307328-11.636736-25.946112-25.946112-25.946112H345.165824c-14.307328 0-25.946112 11.636736-25.946112 25.946112s11.636736 25.946112 25.946112 25.946112h463.761408c14.309376 0 25.946112-11.638784 25.946112-25.946112zM345.165824 666.806272c-14.307328 0-25.946112 11.636736-25.946112 25.946112s11.636736 25.946112 25.946112 25.946112h274.434048c14.292992 0 25.929728-11.636736 25.929728-25.946112s-11.636736-25.946112-25.929728-25.946112H345.165824z"  /><path fill="#515151" d="M630.665216 957.85984l-1.097728-0.565248 0.03072-2.322432H113.221632c-14.3872 0-19.003392-4.601856-19.003392-18.987008V92.325888c0-14.3872 4.616192-18.987008 19.003392-18.987008h788.219904c14.370816 0 18.987008 4.601856 18.987008 18.987008v439.812096h0.077824l0.077824 1.931264c0.581632 13.899776 11.966464 24.784896 25.946112 24.784896 13.821952 0 25.22112-10.883072 25.946112-24.799232l0.141312-1.130496v-485.376c0-14.323712-11.636736-25.960448-25.929728-25.960448H68.11648c-14.292992 0-25.929728 11.636736-25.929728 25.960448v933.367808c0 14.307328 11.636736 25.946112 25.929728 25.946112h560.77312l0.014336-2.025472 1.14688-0.548864c9.078784-4.366336 14.71488-13.318144 14.71488-23.369728 0.002048-9.740288-5.402624-18.581504-14.10048-23.058432z"  /><path fill="#515151" d="M782.833664 496.621568c0-14.307328-11.636736-25.946112-25.960448-25.946112H345.157632c-14.292992 0-25.931776 11.638784-25.931776 25.946112 0 14.307328 11.636736 25.946112 25.931776 25.946112h411.715584c14.323712 0 25.960448-11.638784 25.960448-25.946112zM203.145216 471.508992a38.371328 38.371328 0 0 0-11.167744 26.966016c0 10.051584 4.067328 19.884032 11.167744 26.966016a38.42048 38.42048 0 0 0 26.980352 11.18208c10.0352 0 19.8656-4.081664 26.966016-11.18208 7.100416-7.100416 11.167744-16.930816 11.167744-26.966016s-4.067328-19.8656-11.167744-26.966016c-7.100416-7.100416-16.930816-11.18208-26.966016-11.18208a38.44096 38.44096 0 0 0-26.980352 11.18208zM224.708608 262.664192c-10.051584 0-19.884032 4.067328-26.966016 11.167744-7.100416 7.100416-11.18208 16.930816-11.18208 26.966016s4.081664 19.884032 11.18208 26.980352c7.084032 7.100416 16.914432 11.167744 26.966016 11.167744 10.0352 0 19.8656-4.067328 26.980352-11.167744 7.100416-7.100416 11.167744-16.945152 11.167744-26.980352s-4.067328-19.8656-11.167744-26.966016a38.449152 38.449152 0 0 0-26.980352-11.167744zM230.121472 731.971584c10.051584 0 19.8656-4.067328 26.966016-11.167744 7.114752-7.114752 11.18208-16.945152 11.18208-26.966016 0-10.051584-4.067328-19.8656-11.18208-26.980352a38.371328 38.371328 0 0 0-26.966016-11.167744c-10.051584 0-19.884032 4.067328-26.966016 11.167744a38.361088 38.361088 0 0 0-11.18208 26.980352c0 10.0352 4.067328 19.8656 11.18208 26.966016 7.081984 7.100416 16.912384 11.167744 26.966016 11.167744z"  /></svg>
\ No newline at end of file
+
+<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>
\ No newline at end of file
diff --git a/src/store/modules/demand-log.ts b/src/store/modules/demand-log.ts
index 9b067896..0eaf7d1e 100644
--- a/src/store/modules/demand-log.ts
+++ b/src/store/modules/demand-log.ts
@@ -1,3 +1,4 @@
+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
@@ -30,6 +31,7 @@ interface DemandLogState {
   selectorStore: any;
   logs: Log[];
   loadLogs: boolean;
+  message: string;
 }
 
 export const demandLogStore = defineStore({
@@ -45,11 +47,16 @@ export const demandLogStore = defineStore({
     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
@@ -82,6 +89,7 @@ export const demandLogStore = defineStore({
         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) => {
@@ -98,8 +106,14 @@ export const demandLogStore = defineStore({
       if (res.data.errors) {
         return res.data;
       }
-
-      this.logs = res.data.data.logs.logs.map((d: Log) => d.content).join("\n");
+      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;
     },
   },
diff --git a/src/views/dashboard/related/demand-log/Content.vue b/src/views/dashboard/related/demand-log/Content.vue
index a053ae7c..b8a32d85 100644
--- a/src/views/dashboard/related/demand-log/Content.vue
+++ b/src/views/dashboard/related/demand-log/Content.vue
@@ -14,10 +14,13 @@ 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% - 60px); height: calc(100% - 170px)"
-  ></div>
+    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";
@@ -69,6 +72,5 @@ watch(
 .log-content {
   min-width: 600px;
   min-height: 400px;
-  // overflow: auto;
 }
 </style>
diff --git a/src/views/dashboard/related/demand-log/Header.vue b/src/views/dashboard/related/demand-log/Header.vue
index 70264831..632953bb 100644
--- a/src/views/dashboard/related/demand-log/Header.vue
+++ b/src/views/dashboard/related/demand-log/Header.vue
@@ -36,7 +36,7 @@ limitations under the License. -->
         class="selectors"
       />
     </div>
-    <div class="mr-5">
+    <!-- <div class="mr-5">
       <span class="grey mr-5">{{ t("limit") }}:</span>
       <el-input-number
         v-model="limit"
@@ -46,7 +46,7 @@ limitations under the License. -->
         controls-position="right"
         @change="changeField('limit', $event)"
       />
-    </div>
+    </div> -->
     <div class="mr-5">
       <span class="grey mr-5">{{ t("duration") }}:</span>
       <Selector
@@ -61,7 +61,7 @@ limitations under the License. -->
       <span class="grey mr-5">{{ t("interval") }}:</span>
       <el-input-number
         v-model="intervalTime"
-        :min="1"
+        :min="5"
         :max="120"
         size="small"
         controls-position="right"
@@ -114,7 +114,7 @@ limitations under the License. -->
       />
       <el-tooltip :content="t('keywordsOfContentLogTips')">
         <span class="log-tips">
-          <Icon icon="help" class="mr-5" />
+          <Icon size="middle" iconName="help" class="ml-5 help" />
         </span>
       </el-tooltip>
     </div>
@@ -124,15 +124,15 @@ limitations under the License. -->
       class="search-btn mt-10"
       size="small"
       type="primary"
-      @click="searchLogs"
+      @click="runInterval"
     >
-      <Icon size="sm" iconName="retry" :loading="!!intervalFn" class="reload" />
+      <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 } from "vue";
+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";
@@ -153,8 +153,8 @@ const keywordsOfContent = ref<string[]>([]);
 const excludingKeywordsOfContent = ref<string[]>([]);
 const contentStr = ref<string>("");
 const excludingContentStr = ref<string>("");
-const limit = ref<number>(1);
-const intervalTime = ref<number>(1);
+// const limit = ref<number>(20);
+const intervalTime = ref<number>(30);
 const state = reactive<any>({
   instance: { value: "", label: "" },
   container: { value: "", label: "" },
@@ -188,7 +188,7 @@ async function fetchSelectors() {
   }
   getContainers();
   if (intervalFn.value) {
-    clearInterval(intervalFn.value);
+    clearTimer();
   }
 }
 async function getContainers() {
@@ -213,14 +213,14 @@ async function getInstances() {
 }
 function runInterval() {
   if (intervalFn.value) {
-    clearInterval(intervalFn.value);
+    clearTimer();
     return;
   }
   searchLogs();
   intervalFn.value = setInterval(searchLogs, intervalTime.value * 1000);
   setTimeout(() => {
-    clearInterval(intervalFn.value);
-  }, state.duration * 1000);
+    clearTimer();
+  }, state.duration.value * 1000);
 }
 function searchLogs() {
   let instance = state.instance.id;
@@ -247,7 +247,7 @@ async function queryLogs() {
   }
 }
 function changeField(type: string, opt: any) {
-  clearInterval(intervalFn.value);
+  clearTimer();
   if (["limit", "interval"].includes(type)) {
     state[type] = opt;
     return;
@@ -264,7 +264,7 @@ function removeContent(index: number) {
     keywordsOfContent: keywordsOfContentList,
   });
   contentStr.value = "";
-  clearInterval(intervalFn.value);
+  clearTimer();
 }
 function addLabels(type: string) {
   if (type === "keywordsOfContent" && !contentStr.value) {
@@ -286,7 +286,7 @@ function addLabels(type: string) {
     });
     excludingContentStr.value = "";
   }
-  clearInterval(intervalFn.value);
+  clearTimer();
 }
 function removeExcludeContent(index: number) {
   excludingKeywordsOfContent.value.splice(index, 1);
@@ -294,12 +294,23 @@ function removeExcludeContent(index: number) {
     excludingKeywordsOfContent: excludingKeywordsOfContent.value,
   });
   excludingContentStr.value = "";
-  clearInterval(intervalFn.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) {
+      demandLogStore.setLogs("");
       fetchSelectors();
     }
   }
@@ -308,6 +319,7 @@ watch(
   () => [selectorStore.currentPod],
   () => {
     if (dashboardStore.entity === EntityType[3].value) {
+      demandLogStore.setLogs("");
       fetchSelectors();
     }
   }
@@ -334,7 +346,7 @@ watch(
 
 .search-btn {
   cursor: pointer;
-  width: 220px;
+  width: 120px;
 }
 
 .tips {
@@ -383,7 +395,8 @@ watch(
   justify-content: flex-end;
 }
 
-.reload {
-  margin-right: 3px;
+.help {
+  color: #999;
+  cursor: pointer;
 }
 </style>