[skywalking-booster-ui] branch main updated: fix: independent widget duration (#319)

[qiuxiafan]

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

qiuxiafan 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 310fff4b fix: independent widget duration (#319)
310fff4b is described below

commit 310fff4b2883fab4fb5fd9d6a126a7bc1b1ece07
Author: Fine0830 <fanxue0...@gmail.com>
AuthorDate: Tue Sep 19 17:47:59 2023 +0800

    fix: independent widget duration (#319)
---
 src/views/dashboard/Widget.vue                |  4 +++-
 src/views/dashboard/components/WidgetLink.vue | 15 +++++++--------
 vite.config.ts                                |  2 +-
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/views/dashboard/Widget.vue b/src/views/dashboard/Widget.vue
index 0b8acaf8..6adb996c 100644
--- a/src/views/dashboard/Widget.vue
+++ b/src/views/dashboard/Widget.vue
@@ -87,10 +87,12 @@ limitations under the License. -->
         dashboardStore.setLayer(route.params.layer);
         dashboardStore.setEntity(route.params.entity);
         const { auto, autoPeriod } = config.value;
-
         if (auto) {
           await setDuration();
           appStoreWithOut.setReloadTimer(setInterval(setDuration, autoPeriod * 
1000));
+        } else {
+          const duration = JSON.parse(route.params.duration as string);
+          appStoreWithOut.setDuration(duration);
         }
         await setSelector();
         await queryMetrics();
diff --git a/src/views/dashboard/components/WidgetLink.vue 
b/src/views/dashboard/components/WidgetLink.vue
index 6a6b6c85..3660c504 100644
--- a/src/views/dashboard/components/WidgetLink.vue
+++ b/src/views/dashboard/components/WidgetLink.vue
@@ -20,14 +20,9 @@ limitations under the License. -->
     </div>
     <div v-if="hasDuration">
       <label>{{ t("duration") }}</label>
-      <TimePicker
-        :value="[appStore.durationRow.start, appStore.durationRow.end]"
-        position="right"
-        format="YYYY-MM-DD HH:mm"
-        @input="changeTimeRange"
-      />
+      <TimePicker :value="duration" position="right" format="YYYY-MM-DD HH:mm" 
@input="changeTimeRange" />
     </div>
-    <div v-if="!hasDuration">
+    <div v-else>
       <label>{{ t("auto") }}</label>
       <el-switch class="mr-5" v-model="auto" style="height: 25px" />
       <Selector v-model="freshOpt" :options="RefreshOptions" size="small" />
@@ -72,6 +67,7 @@ limitations under the License. -->
   const auto = ref<boolean>(true);
   const period = ref<number>(6);
   const freshOpt = ref<string>(RefreshOptions[0].value);
+  const duration = 
ref<string>(JSON.parse(JSON.stringify([appStore.durationRow.start, 
appStore.durationRow.end])));
 
   function changeTimeRange(val: Date[] | any) {
     dates.value = val;
@@ -127,7 +123,10 @@ limitations under the License. -->
         tips: encodeURIComponent(widget.tips || ""),
       };
     }
-    if (auto.value) {
+    if (hasDuration.value) {
+      opt.auto = 0;
+      opt.autoPeriod = 0;
+    } else {
       const f = RefreshOptions.filter((d: { value: string }) => d.value === 
freshOpt.value)[0] || {};
       opt.auto = Number(f.value) * 60 * 1000;
       opt.autoPeriod = period.value;
diff --git a/vite.config.ts b/vite.config.ts
index f5b596eb..d27a6462 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -64,7 +64,7 @@ export default ({ mode }: ConfigEnv): UserConfig => {
       preprocessorOptions: {
         //define global scss variable
         scss: {
-          additionalData: `@import "@/styles/light.scss";`,
+          additionalData: `@use "@/styles/light.scss" as *;`,
         },
       },
     },