reset duration

src/layout/components/NavBar.vue

@@ -49,7 +49,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, watch, computed } from "vue";
+import { ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
 import timeFormat from "@/utils/timeFormat";
@@ -62,12 +62,14 @@ const appStore = useAppStoreWithOut();
 const route = useRoute();
 const pageName = ref<string>("");
 const timeRange = ref<number>(0);
+const time = ref<Date[]>([appStore.duration.start, appStore.duration.end]);
 
+resetDuration();
 getVersion();
 const setConfig = (value: string) => {
   pageName.value = value || "";
 };
-const time = computed(() => [appStore.duration.start, appStore.duration.end]);
+
 const handleReload = () => {
   const gap =
     appStore.duration.end.getTime() - appStore.duration.start.getTime();
@@ -98,6 +100,20 @@ async function getVersion() {
     ElMessage.error(res.errors);
   }
 }
+function resetDuration() {
+  const { duration }: any = route.params;
+  if (duration) {
+    const d = JSON.parse(duration);
+
+    appStore.updateDurationRow({
+      start: getLocalTime(d.utc, d.start),
+      end: getLocalTime(d.utc, d.end),
+      step: d.step,
+    });
+    appStore.updateUTC(d.utc);
+    time.value = [getLocalTime(d.utc, d.start), getLocalTime(d.utc, d.end)];
+  }
+}
 </script>
 <style lang="scss" scoped>
 .nav-bar {

src/router/dashboard.ts

@@ -234,6 +234,14 @@ export const routesDashboard: Array<RouteRecordRaw> = [
               ),
             name: "ViewProcessRelationActiveTabIndex",
           },
+          {
+            path: "/dashboard/:layerId/:entity/:serviceId/:podId/:processId/:destServiceId/:destPodId/:destProcessId/:name/duration/:duration",
+            component: () =>
+              import(
+                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
+              ),
+            name: "ViewProcessRelationDuration",
+          },
         ],
       },
     ],

src/store/modules/app.ts

@@ -119,12 +119,18 @@ export const appStore = defineStore({
       }
       this.runEventStack();
     },
+    updateDurationRow(data: Duration) {
+      this.durationRow = data;
+    },
     setUTC(utcHour: number, utcMin: number): void {
       this.runEventStack();
       this.utcMin = utcMin;
       this.utcHour = utcHour;
       this.utc = `${utcHour}:${utcMin}`;
     },
+    updateUTC(data: string) {
+      this.utc = data;
+    },
     setIsMobile(mode: boolean) {
       this.isMobile = mode;
     },
@@ -155,10 +161,9 @@ export const appStore = defineStore({
         .params({});
       if (res.data.errors) {
         this.utc = -(new Date().getTimezoneOffset() / 60) + ":0";
-        return res.data;
+      } else {
+        this.utc = res.data.data.getTimeInfo.timezone / 100 + ":0";
       }
-      this.utc = res.data.data.getTimeInfo.timezone / 100 + ":0";
-
       const utcArr = this.utc.split(":");
       this.utcHour = isNaN(Number(utcArr[0])) ? 0 : Number(utcArr[0]);
       this.utcMin = isNaN(Number(utcArr[1])) ? 0 : Number(utcArr[1]);

src/views/dashboard/related/network-profiling/components/ProcessTopology.vue

@@ -27,7 +27,7 @@ limitations under the License. -->
     </template>
     <Settings @update="updateSettings" />
   </el-popover>
-  <TimeLine />
+  <TimeLine @get="getDates" />
 </template>
 <script lang="ts" setup>
 import type { PropType } from "vue";
@@ -51,6 +51,8 @@ import { EntityType } from "@/views/dashboard/data";
 import getDashboard from "@/hooks/useDashboardsSession";
 import { Layout } from "./Graph/layout";
 import TimeLine from "./TimeLine.vue";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import getLocalTime from "@/utils/localtime";
 
 /*global Nullable, defineProps */
 const props = defineProps({
@@ -60,6 +62,7 @@ const props = defineProps({
   },
 });
 const { t } = useI18n();
+const appStore = useAppStoreWithOut();
 const dashboardStore = useDashboardStore();
 const selectorStore = useSelectorStore();
 const networkProfilingStore = useNetworkProfilingStore();
@@ -77,6 +80,7 @@ const oldVal = ref<{ width: number; height: number }>({ width: 0, height: 0 });
 const config = ref<any>({});
 const diff = ref<number[]>([220, 200]);
 const radius = 210;
+const dates = ref<Nullable<{ start: number; end: number }>>(null);
 
 onMounted(() => {
   init();
@@ -362,12 +366,33 @@ function handleLinkClick(event: any, d: Call) {
     );
     return;
   }
-  const path = `/dashboard/${dashboard.layer}/${EntityType[7].value}/${d.source.serviceId}/${d.source.serviceInstanceId}/${d.source.id}/${d.target.serviceId}/${d.target.serviceInstanceId}/${d.target.id}/${dashboard.name}`;
+  let times: any = {};
+  if (dates.value) {
+    times = dates.value;
+  } else {
+    const { taskStartTime, fixedTriggerDuration } =
+      networkProfilingStore.selectedNetworkTask;
+    const startTime =
+      fixedTriggerDuration > 1800
+        ? taskStartTime + fixedTriggerDuration * 1000 - 30 * 60 * 1000
+        : taskStartTime;
+    times = {
+      start: startTime,
+      end: taskStartTime + fixedTriggerDuration * 1000,
+    };
+  }
+  const param = JSON.stringify({
+    ...times,
+    step: appStore.duration.step,
+    utc: appStore.utc,
+  });
+  const path = `/dashboard/${dashboard.layer}/${EntityType[7].value}/${d.source.serviceId}/${d.source.serviceInstanceId}/${d.source.id}/${d.target.serviceId}/${d.target.serviceInstanceId}/${d.target.id}/${dashboard.name}/duration/${param}`;
   const routeUrl = router.resolve({ path });
+
   window.open(routeUrl.href, "_blank");
 }
 
-function updateSettings(param: any) {
+function updateSettings(param: unknown) {
   config.value = param;
 }
 
@@ -375,6 +400,10 @@ function setConfig() {
   dashboardStore.selectWidget(props.config);
 }
 
+function getDates(times: any) {
+  this.dates.value = times;
+}
+
 function resize() {
   const observer = new ResizeObserver((entries) => {
     const entry = entries[0];

src/views/dashboard/related/network-profiling/components/TimeLine.vue

@@ -47,7 +47,8 @@ import dateFormatStep from "@/utils/dateFormat";
 import getLocalTime from "@/utils/localtime";
 import { useAppStoreWithOut } from "@/store/modules/app";
 
-/*global Nullable */
+/*global Nullable, defineEmits */
+const emits = defineEmits(["get"]);
 const { t } = useI18n();
 const selectorStore = useSelectorStore();
 const appStore = useAppStoreWithOut();
@@ -127,6 +128,10 @@ function visTimeline() {
 }
 async function updateTopology() {
   isUpdate.value = true;
+  emits("get", {
+    start: task.value[0].start.getTime(),
+    end: task.value[0].end.getTime(),
+  });
   const serviceInstanceId =
     (selectorStore.currentPod && selectorStore.currentPod.id) || "";