feat: add period (#235)

src/locales/lang/en.ts

@@ -184,6 +184,7 @@ const msg = {
   generateLink: "Generate Link",
   setDuration: "Lock Query Duration",
   openFunction: "OpenFunction",
+  period: "Period",
   seconds: "Seconds",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",

src/locales/lang/es.ts

@@ -186,6 +186,7 @@ const msg = {
   when4xx: "Ejemplo de solicitud y respuesta http con seguimiento cuando el Código de respuesta está entre 400 y 499",
   when5xx: "Ejemplo de solicitud y respuesta http con seguimiento cuando el Código de respuesta está entre 500 y 599",
   taskTitle: "Reglas de recolección de peticiones y respuestas HTTP",
+  period: "Period",
   second: "s",
   yearSuffix: "Año",
   monthsHead: "Ene_Feb_Mar_Abr_May_Jun_Jul_Ago_Set_Oct_Nov_Dic",

src/locales/lang/zh.ts

@@ -181,6 +181,7 @@ const msg = {
   generateLink: "生成链接",
   setDuration: "锁定查询持续时间",
   openFunction: "OpenFunction",
+  period: "周期",
   seconds: "秒",
   hourTip: "选择小时",
   minuteTip: "选择分钟",

src/views/dashboard/Widget.vue

@@ -78,11 +78,11 @@ limitations under the License. -->
       async function init() {
         dashboardStore.setLayer(route.params.layer);
         dashboardStore.setEntity(route.params.entity);
-        const { auto } = config.value;
+        const { auto, autoPeriod } = config.value;
 
         if (auto) {
           await setDuration();
-          appStoreWithOut.setReloadTimer(setInterval(setDuration, auto));
+          appStoreWithOut.setReloadTimer(setInterval(setDuration, autoPeriod * 1000));
         }
         await setSelector();
         await queryMetrics();

src/views/dashboard/components/WidgetLink.vue

@@ -31,6 +31,12 @@ limitations under the License. -->
       <label>{{ t("auto") }}</label>
       <el-switch class="mr-5" v-model="auto" style="height: 25px" />
       <Selector v-model="freshOpt" :options="RefreshOptions" size="small" />
+      <div class="mt-5">
+        <label>{{ t("period") }}</label>
+        <el-input class="auto-period" size="small" type="number" v-model="period" min="1" />
+        <span class="ml-5">{{ t("second") }}</span>
+        <i class="ml-10">{{ t("timeReload") }}</i>
+      </div>
     </div>
     <el-button size="small" type="primary" class="mt-20" @click="getLink">{{ t("generateLink") }}</el-button>
     <div v-show="widgetLink" class="mt-10">
@@ -63,6 +69,7 @@ limitations under the License. -->
   const dates = ref<Date[]>([]);
   const host = window.location.host;
   const auto = ref<boolean>(true);
+  const period = ref<number>(6);
   const freshOpt = ref<string>(RefreshOptions[0].value);
 
   function changeTimeRange(val: Date[] | any) {
@@ -112,6 +119,7 @@ limitations under the License. -->
     if (auto.value) {
       const f = RefreshOptions.filter((d: { value: string }) => d.value === freshOpt.value)[0] || {};
       opt.auto = Number(f.value) * 60 * 1000;
+      opt.autoPeriod = period.value;
       if (f.step === TimeType.HOUR_TIME) {
         opt.auto = Number(f.value) * 60 * 60 * 1000;
       }
@@ -150,4 +158,8 @@ limitations under the License. -->
     display: inline-block;
     width: 250px;
   }
+
+  .auto-period {
+    width: 50px;
+  }
 </style>