Merge branch 'main' of github.com:apache/skywalking-booster-ui into bugfix/traceID

src/layout/components/AppMain.vue

@@ -25,5 +25,6 @@ limitations under the License. -->
   .app-main {
     height: calc(100% - 40px);
     background: #f7f9fa;
+    overflow: auto;
   }
 </style>

src/locales/lang/en.ts

@@ -182,7 +182,7 @@ const msg = {
   iframeWidgetTip: "Add a link to a widget",
   iframeSrc: "Iframe Link",
   generateLink: "Generate Link",
-  setDuration: "Set Duration",
+  setDuration: "Lock Query Duration",
   openFunction: "OpenFunction",
   seconds: "Seconds",
   hourTip: "Select Hour",
@@ -202,7 +202,7 @@ const msg = {
   topology: "Topology",
   trace: "Trace",
   alarm: "Alerting",
-  auto: "Auto",
+  auto: "Auto Fresh",
   reload: "Reload",
   version: "Version",
   copy: "Copy",

src/locales/lang/es.ts

@@ -165,7 +165,7 @@ const msg = {
   iframeWidgetTip: "Añadir enlaces a los gadgets",
   iframeSrc: "Enlace Iframe",
   generateLink: "Generar enlaces",
-  setDuration: "Establecer la duración",
+  setDuration: "Duración de la consulta de bloqueo",
   openFunction: "OpenFunction",
   seconds: "Segundos",
   hourTip: "Seleccione Hora",
@@ -200,7 +200,7 @@ const msg = {
   topology: "Topología",
   trace: "Traza",
   alarm: "Recordatorio en curso",
-  auto: "Auto",
+  auto: "Auto Fresh",
   reload: "Recargar",
   version: "Versión",
   copy: "Copiar",

src/locales/lang/zh.ts

@@ -179,7 +179,7 @@ const msg = {
   iframeWidgetTip: "添加widget的链接",
   iframeSrc: "Iframe链接",
   generateLink: "生成链接",
-  setDuration: "设置时间区间",
+  setDuration: "锁定查询持续时间",
   openFunction: "OpenFunction",
   seconds: "秒",
   hourTip: "选择小时",
@@ -199,7 +199,7 @@ const msg = {
   trace: "追踪",
   alarm: "告警",
   event: "事件",
-  auto: "自动",
+  auto: "自动更新",
   reload: "刷新",
   editmode: "编辑模式",
   version: "版本",

src/views/dashboard/Edit.vue

@@ -32,6 +32,7 @@ limitations under the License. -->
     </el-dialog>
     <el-dialog
       v-model="dashboardStore.showLinkConfig"
+      width="800px"
       :destroy-on-close="true"
       @closed="dashboardStore.setWidgetLink(false)"
     >

src/views/dashboard/Widget.vue

@@ -54,6 +54,7 @@ limitations under the License. -->
   import { useQueryProcessor, useSourceProcessor, useGetMetricEntity } from "@/hooks/useMetricsProcessor";
   import graphs from "./graphs";
   import { EntityType } from "./data";
+  import timeFormat from "@/utils/timeFormat";
 
   export default defineComponent({
     name: "WidgetPage",
@@ -77,9 +78,20 @@ limitations under the License. -->
       async function init() {
         dashboardStore.setLayer(route.params.layer);
         dashboardStore.setEntity(route.params.entity);
+        const { auto } = config.value;
+
+        if (auto) {
+          await setDuration();
+          appStoreWithOut.setReloadTimer(setInterval(setDuration, auto));
+        }
         await setSelector();
         await queryMetrics();
       }
+      async function setDuration() {
+        const dates: Date[] = [new Date(new Date().getTime() - config.value.auto), new Date()];
+
+        appStoreWithOut.setDuration(timeFormat(dates));
+      }
       async function setSelector() {
         const { serviceId, podId, processId, destServiceId, destPodId, destProcessId, entity } = route.params;
         if (serviceId) {

src/views/dashboard/components/WidgetLink.vue

@@ -15,18 +15,23 @@ limitations under the License. -->
 <template>
   <div class="link-content">
     <div>
-      <label class="mr-5">{{ t("setDuration") }}</label>
+      <label>{{ t("setDuration") }}</label>
       <el-switch v-model="hasDuration" />
     </div>
     <div v-if="hasDuration">
-      <label class="mr-20">{{ t("duration") }}</label>
+      <label>{{ t("duration") }}</label>
       <TimePicker
         :value="[appStore.durationRow.start, appStore.durationRow.end]"
-        position="bottom"
+        position="right"
         format="YYYY-MM-DD HH:mm"
         @input="changeTimeRange"
       />
     </div>
+    <div v-if="!hasDuration">
+      <label>{{ t("auto") }}</label>
+      <el-switch class="mr-5" v-model="auto" style="height: 25px" />
+      <Selector v-model="freshOpt" :options="RefreshOptions" size="small" />
+    </div>
     <el-button size="small" type="primary" class="mt-20" @click="getLink">{{ t("generateLink") }}</el-button>
     <div v-show="widgetLink" class="mt-10">
       <span @click="viewPage" class="link">
@@ -46,15 +51,19 @@ limitations under the License. -->
   import { useSelectorStore } from "@/store/modules/selectors";
   import router from "@/router";
   import copy from "@/utils/copy";
+  import { RefreshOptions } from "@/views/dashboard/data";
+  import { TimeType } from "@/constants/data";
 
   const { t } = useI18n();
   const appStore = useAppStoreWithOut();
   const dashboardStore = useDashboardStore();
   const selectorStore = useSelectorStore();
-  const hasDuration = ref<boolean>(true);
+  const hasDuration = ref<boolean>(false);
   const widgetLink = ref<string>("");
   const dates = ref<Date[]>([]);
   const host = window.location.host;
+  const auto = ref<boolean>(true);
+  const freshOpt = ref<string>(RefreshOptions[0].value);
 
   function changeTimeRange(val: Date[] | any) {
     dates.value = val;
@@ -75,28 +84,42 @@ limitations under the License. -->
       step: appStore.durationRow.step,
       utc: appStore.utc,
     });
-    const w = {
-      title: encodeURIComponent(dashboardStore.selectedGrid.widget.title || ""),
-      tips: encodeURIComponent(dashboardStore.selectedGrid.widget.tips || ""),
-    };
-    const metricConfig = (dashboardStore.selectedGrid.metricConfig || []).map((d: any) => {
+    const { widget, graph, metrics, metricTypes, metricConfig } = dashboardStore.selectedGrid;
+    const c = (metricConfig || []).map((d: any) => {
+      const t: any = {};
       if (d.label) {
-        d.label = encodeURIComponent(d.label);
+        t.label = encodeURIComponent(d.label);
       }
       if (d.unit) {
-        d.unit = encodeURIComponent(d.unit);
+        t.unit = encodeURIComponent(d.unit);
       }
-      return d;
+      return { ...d, ...t };
     });
-    const config = JSON.stringify({
+    const opt: any = {
       type: dashboardStore.selectedGrid.type,
-      widget: w,
-      graph: dashboardStore.selectedGrid.graph,
-      metrics: dashboardStore.selectedGrid.metrics,
-      metricTypes: dashboardStore.selectedGrid.metricTypes,
-      metricConfig: metricConfig,
+      graph: graph,
+      metrics: metrics,
+      metricTypes: metricTypes,
+      metricConfig: c,
       height: dashboardStore.selectedGrid.h * 20 + 60,
-    });
+    };
+    if (widget) {
+      opt.widget = {
+        title: encodeURIComponent(widget.title || ""),
+        tips: encodeURIComponent(widget.tips || ""),
+      };
+    }
+    if (auto.value) {
+      const f = RefreshOptions.filter((d: { value: string }) => d.value === freshOpt.value)[0] || {};
+      opt.auto = Number(f.value) * 60 * 1000;
+      if (f.step === TimeType.HOUR_TIME) {
+        opt.auto = Number(f.value) * 60 * 60 * 1000;
+      }
+      if (f.step === TimeType.DAY_TIME) {
+        opt.auto = Number(f.value) * 60 * 60 * 60 * 1000;
+      }
+    }
+    const config = JSON.stringify(opt);
     const path = `/page/${dashboardStore.layerId}/${
       dashboardStore.entity
     }/${serviceId}/${podId}/${processId}/${destServiceId}/${destPodId}/${destProcessId}/${encodeURIComponent(config)}`;
@@ -120,6 +143,11 @@ limitations under the License. -->
     height: 300px;
     font-size: 12px;
     overflow: auto;
-    padding-bottom: 10px;
+    padding-bottom: 50px;
+  }
+
+  label {
+    display: inline-block;
+    width: 250px;
   }
 </style>

src/views/dashboard/data.ts

@@ -318,3 +318,8 @@ export const RefIdTypes = [
   { label: "Trace ID", value: "traceId" },
   { label: "None", value: "none" },
 ];
+export const RefreshOptions = [
+  { label: "Last 30 minutes", value: "30", step: "MINUTE" },
+  { label: "Last 8 hours", value: "8", step: "HOUR" },
+  { label: "Last 7 days", value: "7", step: "DAY" },
+];

src/views/dashboard/related/profile/Header.vue

@@ -104,7 +104,6 @@ limitations under the License. -->
     () => selectorStore.currentService,
     () => {
       searchTasks();
-      console.log("service");
     },
   );
   watch(

src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue

@@ -220,7 +220,6 @@ limitations under the License. -->
     visGraph.value.on("select", (data: { items: number[] }) => {
       const index = data.items[0];
       currentEvent.value = events[index - 1 || 0] || {};
-      console.log(currentEvent.value);
       if (data.items.length) {
         showEventDetail.value = true;
         return;