feat: set auto fresh

src/assets/icons/retry.svg

@@ -0,0 +1,16 @@
+<!-- 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. -->
+
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>icn/retry</title><path d="M4.074 6.957c-.578 2.136.7 4.331 2.856 4.904a4.05 4.05 0 0 0 2.479-.124 1.013 1.013 0 0 1 1.303.579.998.998 0 0 1-.585 1.291 6.086 6.086 0 0 1-3.72.187c-3.232-.858-5.15-4.151-4.284-7.355l-.749-.199a.498.498 0 0 1-.122-.917L3.47 4.056a.507.507 0 0 1 .69.183l1.28 2.198a.497.497 0 0 1 .05.38.505.505 0 0 1-.618.353l-.798-.212zm7.852 2.086c.578-2.136-.7-4.331-2.856-4.904a4.05 4.05 0 0 0-2.479.124 1.013 1.013 0 0 1-1.303-.579.998.998 0 0 1 .585-1.291 6.086 6.086 0 0 1 3.72-.187c3.232.858 5.15 4.151 4.284 7.355l.749.199a.498.498 0 0 1 .122.917l-2.218 1.268a.507.507 0 0 1-.69-.183l-1.28-2.198a.497.497 0 0 1-.05-.38.505.505 0 0 1 .618-.353l.798.212z" id="a"/></svg>

src/layout/components/NavBar.vue

@@ -27,9 +27,9 @@ limitations under the License. -->
         UTC{{ utcHour >= 0 ? "+" : ""
         }}{{ `${appStore.utcHour}:${appStore.utcMin}` }}
       </span>
-      <!-- <span @click="handleReload" title="refresh">
-        <Icon icon="retry" :loading="auto" class="middle" />
-      </span> -->
+      <span title="refresh" class="ghost ml-5 cp" @click="handleReload">
+        <Icon iconName="retry" :loading="appStore.autoRefresh" class="middle" />
+      </span>
     </div>
   </div>
 </template>
@@ -66,6 +66,12 @@ const time = computed(() => [
   appStore.durationRow.start,
   appStore.durationRow.end,
 ]);
+const handleReload = () => {
+  const gap =
+    appStore.duration.end.getTime() - appStore.duration.start.getTime();
+  const time: Date[] = [new Date(new Date().getTime() - gap), new Date()];
+  appStore.setDuration(timeFormat(time));
+};
 function changeTimeRange(val: Date[]) {
   timeRange.value =
     val[1].getTime() - val[0].getTime() > 60 * 24 * 60 * 60 * 1000 ? 1 : 0;

src/store/modules/app.ts

@@ -28,6 +28,7 @@ interface AppState {
   utcMin: number;
   eventStack: (() => unknown)[];
   timer: Nullable<any>;
+  autoRefresh: boolean;
 }
 
 export const appStore = defineStore({
@@ -39,6 +40,7 @@ export const appStore = defineStore({
     utcMin: 0,
     eventStack: [],
     timer: null,
+    autoRefresh: false,
   }),
   getters: {
     duration(): Duration {
@@ -117,6 +119,9 @@ export const appStore = defineStore({
     setEventStack(funcs: (() => void)[]): void {
       this.eventStack = funcs;
     },
+    setAutoRefresh(auto: boolean) {
+      this.autoRefresh = auto;
+    },
     runEventStack() {
       if (this.timer) {
         clearTimeout(this.timer);

src/styles/lib.scss

@@ -126,3 +126,14 @@
 .mr-20 {
   margin-right: 20px;
 }
+@keyframes loading {
+  0% {
+    transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(1turn);
+    transform: rotate(1turn);
+  }
+}

src/views/Settings.vue

@@ -55,7 +55,7 @@ limitations under the License. -->
     </div>
     <div class="flex-h item">
       <span class="label">{{ t("auto") }}</span>
-      <el-switch :change="handleAuto" style="height: 25px" />
+      <el-switch v-model="auto" @change="handleAuto" style="height: 25px" />
       <div class="auto-time ml-5">
         <span class="auto-select">
           <input
@@ -96,11 +96,11 @@ const handleReload = () => {
   const time: Date[] = [new Date(new Date().getTime() - gap), new Date()];
   appStore.setDuration(timeFormat(time));
 };
-const handleAuto = (status: boolean) => {
+const handleAuto = () => {
   if (autoTime.value < 1) {
     return;
   }
-  auto.value = status;
+  appStore.setAutoRefresh(auto.value);
   if (auto.value) {
     handleReload();
     state.timer = setInterval(handleReload, autoTime.value * 1000);
@@ -164,15 +164,16 @@ const setUTCMin = () => {
   outline: none;
   padding-bottom: 0;
 }
+
 .utc-min {
   display: inline-block;
   padding-top: 2px;
 }
+
 .auto-select {
   border-radius: 3px;
   background-color: #fff;
   padding: 1px;
-  border-radius: 3px;
 
   input {
     width: 38px;
@@ -180,14 +181,17 @@ const setUTCMin = () => {
     outline: 0;
   }
 }
+
 .settings {
   color: #222;
   font-family: inherit;
   font-size: 14px;
   padding: 20px;
+
   .item {
     margin-top: 10px;
   }
+
   input {
     outline: 0;
     width: 50px;
@@ -196,6 +200,7 @@ const setUTCMin = () => {
     text-align: center;
     height: 25px;
   }
+
   .label {
     width: 100px;
     display: inline-block;