[skywalking-booster-ui] branch main updated: fix: optimize widgets (#111)

[wusheng]

This is an automated email from the ASF dual-hosted git repository.

wusheng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git


The following commit(s) were added to refs/heads/main by this push:
     new 2be0a84  fix: optimize widgets (#111)
2be0a84 is described below

commit 2be0a84d4894801b8b32e338b8dd09d71611b23a
Author: Fine0830 <fine0...@outlook.com>
AuthorDate: Thu Jun 16 15:19:17 2022 +0800

    fix: optimize widgets (#111)
---
 src/store/modules/log.ts                             |  6 ++++++
 .../dashboard/related/components/LogTable/Index.vue  | 20 ++++++++++++--------
 src/views/dashboard/related/log/Header.vue           |  5 ++++-
 3 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/store/modules/log.ts b/src/store/modules/log.ts
index ce1674d..241297d 100644
--- a/src/store/modules/log.ts
+++ b/src/store/modules/log.ts
@@ -53,6 +53,12 @@ export const logStore = defineStore({
     setLogCondition(data: any) {
       this.conditions = { ...this.conditions, ...data };
     },
+    resetCondition() {
+      this.conditions = {
+        queryDuration: useAppStoreWithOut().durationTime,
+        paging: { pageNum: 1, pageSize: 15 },
+      };
+    },
     async getServices(layer: string) {
       const res: AxiosResponse = await graphql.query("queryServices").params({
         layer,
diff --git a/src/views/dashboard/related/components/LogTable/Index.vue 
b/src/views/dashboard/related/components/LogTable/Index.vue
index 1e1f257..f1658ee 100644
--- a/src/views/dashboard/related/components/LogTable/Index.vue
+++ b/src/views/dashboard/related/components/LogTable/Index.vue
@@ -17,7 +17,9 @@ limitations under the License. -->
   <div class="log">
     <div
       class="log-header"
-      :class="[type === 'browser' ? 'browser-header' : 'service-header']"
+      :class="
+        type === 'browser' ? ['browser-header', 'flex-h'] : 'service-header'
+      "
     >
       <template v-for="(item, index) in columns" :key="`col${index}`">
         <div
@@ -118,7 +120,7 @@ function setCurrentLog(log: any) {
 
 .log-header div {
   display: inline-block;
-  padding: 0 4px;
+  padding: 0 5px;
   border: 1px solid transparent;
   border-right: 1px dotted silver;
   line-height: 30px;
@@ -128,13 +130,15 @@ function setCurrentLog(log: any) {
   white-space: nowrap;
 }
 
-.browser-header div {
-  min-width: 140px;
-  width: 10%;
-}
+.browser-header {
+  div {
+    min-width: 140px;
+    width: 10%;
+  }
 
-div.max-item {
-  width: 20%;
+  .max-item {
+    width: 20%;
+  }
 }
 
 .service-header div {
diff --git a/src/views/dashboard/related/log/Header.vue 
b/src/views/dashboard/related/log/Header.vue
index 1cc8045..0efc382 100644
--- a/src/views/dashboard/related/log/Header.vue
+++ b/src/views/dashboard/related/log/Header.vue
@@ -130,7 +130,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, reactive, watch } from "vue";
+import { ref, reactive, watch, onUnmounted } from "vue";
 import { useI18n } from "vue-i18n";
 import { Option } from "@/types/app";
 import { useLogStore } from "@/store/modules/log";
@@ -323,6 +323,9 @@ function removeExcludeContent(index: number) {
   });
   excludingContentStr.value = "";
 }
+onUnmounted(() => {
+  logStore.resetCondition();
+});
 watch(
   () => selectorStore.currentService,
   () => {