update duration

src/layout/components/NavBar.vue

@@ -62,7 +62,10 @@ 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]);
+const time = ref<Date[]>([
+  appStore.durationRow.start,
+  appStore.durationRow.end,
+]);
 
 resetDuration();
 getVersion();
@@ -106,12 +109,12 @@ function resetDuration() {
     const d = JSON.parse(duration);
 
     appStore.updateDurationRow({
-      start: getLocalTime(d.utc, d.start),
+      start: new Date(d.start),
-      end: getLocalTime(d.utc, d.end),
+      end: new Date(d.end),
       step: d.step,
     });
     appStore.updateUTC(d.utc);
-    time.value = [getLocalTime(d.utc, d.start), getLocalTime(d.utc, d.end)];
+    time.value = [new Date(d.start), new Date(d.end)];
   }
 }
 </script>

src/utils/dateFormat.ts

@@ -15,7 +15,6 @@
  * limitations under the License.
  */
 import dayjs from "dayjs";
-import getLocalTime from "@/utils/localtime";
 export default function dateFormatStep(
   date: Date,
   step: string,
@@ -102,8 +101,5 @@ export const dateFormatTime = (date: Date, step: string): string => {
   return "";
 };
 
-export const dateFormat = (
+export const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
-  date: number,
+  dayjs(new Date(date)).format(pattern);
-  utc: string,
-  pattern = "YYYY-MM-DD HH:mm:ss"
-) => dayjs(getLocalTime(utc, new Date(date))).format(pattern);

src/views/alarm/Content.vue

@@ -145,16 +145,14 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import { ref } from "vue";
-import dayjs from "dayjs";
 import { useI18n } from "vue-i18n";
 import { Alarm, Event } from "@/types/alarm";
 import { useAlarmStore } from "@/store/modules/alarm";
 import { EventsDetailHeaders, AlarmDetailCol, EventsDetailKeys } from "./data";
+import { dateFormat } from "@/utils/dateFormat";
 
 const { t } = useI18n();
 const alarmStore = useAlarmStore();
-const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
-  dayjs(date).format(pattern);
 const isShowDetails = ref<boolean>(false);
 const showEventDetails = ref<boolean>(false);
 const currentDetail = ref<Alarm | any>({});

src/views/dashboard/related/ebpf/components/EBPFSchedules.vue

@@ -103,13 +103,13 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import { ref, watch } from "vue";
-import dayjs from "dayjs";
 import { useI18n } from "vue-i18n";
 import { Option } from "@/types/app";
 import { TableHeader, AggregateTypes } from "./data";
 import { useEbpfStore } from "@/store/modules/ebpf";
 import { EBPFProfilingSchedule, Process } from "@/types/ebpf";
 import { ElMessage, ElTable } from "element-plus";
+import { dateFormat } from "@/utils/dateFormat";
 
 const { t } = useI18n();
 const ebpfStore = useEbpfStore();
@@ -123,8 +123,6 @@ const selectedLabels = ref<string[]>(["0"]);
 const searchText = ref<string>("");
 const aggregateType = ref<string>(AggregateTypes[0].value);
 const duration = ref<string[]>([]);
-const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
-  dayjs(date).format(pattern);
 const attributes = (attr: { name: string; value: string }[]) => {
   return attr
     .map((d: { name: string; value: string }) => `${d.name}=${d.value}`)

src/views/dashboard/related/ebpf/components/TaskList.vue

@@ -72,17 +72,15 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import { ref } from "vue";
-import dayjs from "dayjs";
 import { useI18n } from "vue-i18n";
 import { useEbpfStore } from "@/store/modules/ebpf";
 import { EBPFTaskList } from "@/types/ebpf";
 import { ElMessage } from "element-plus";
 import TaskDetails from "../../components/TaskDetails.vue";
+import { dateFormat } from "@/utils/dateFormat";
 
 const { t } = useI18n();
 const ebpfStore = useEbpfStore();
-const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
-  dayjs(date).format(pattern);
 const viewDetail = ref<boolean>(false);
 
 async function changeTask(item: EBPFTaskList) {

src/views/dashboard/related/log/LogTable/LogBrowser.vue

@@ -27,9 +27,7 @@ limitations under the License. -->
         ['message', 'stack'].includes(item.label) ? 'max-item' : '',
       ]"
     >
-      <span v-if="item.label === 'time'">{{
+      <span v-if="item.label === 'time'">{{ dateFormat(data.time) }}</span>
-        dateFormat(data.time, appStore.utc)
-      }}</span>
       <span v-else-if="item.label === 'errorUrl'">{{ data.pagePath }}</span>
       <el-tooltip v-else :content="data[item.label] || '-'">
         <span>
@@ -43,13 +41,11 @@ limitations under the License. -->
 import { ref } from "vue";
 import { BrowserLogConstants } from "./data";
 import { dateFormat } from "@/utils/dateFormat";
-import { useAppStoreWithOut } from "@/store/modules/app";
 
 /*global defineProps, defineEmits, NodeListOf  */
 const props = defineProps({
   data: { type: Object as any, default: () => ({}) },
 });
-const appStore = useAppStoreWithOut();
 const columns = BrowserLogConstants;
 const emit = defineEmits(["select"]);
 const logItem = ref<any>(null);

src/views/dashboard/related/log/LogTable/LogDetail.vue

@@ -24,7 +24,7 @@ limitations under the License. -->
         v-if="['timestamp', 'time'].includes(item.label)"
         class="g-sm-8 mb-10"
       >
-        {{ dateFormat(currentLog[item.label], appStore.utc) }}
+        {{ dateFormat(currentLog[item.label]) }}
       </span>
       <textarea
         class="content mb-10"
@@ -45,7 +45,6 @@ import type { PropType } from "vue";
 import { useI18n } from "vue-i18n";
 import { Option } from "@/types/app";
 import { dateFormat } from "@/utils/dateFormat";
-import { useAppStoreWithOut } from "@/store/modules/app";
 
 /*global defineProps */
 const props = defineProps({
@@ -53,7 +52,6 @@ const props = defineProps({
   columns: { type: Array as PropType<Option[]>, default: () => [] },
 });
 const { t } = useI18n();
-const appStore = useAppStoreWithOut();
 const logTags = computed(() => {
   if (!props.currentLog.tags) {
     return [];

src/views/dashboard/related/log/LogTable/LogService.vue

@@ -22,7 +22,7 @@ limitations under the License. -->
       @click="selectLog(item.label, data[item.label])"
     >
       <span v-if="item.label === 'timestamp'">
-        {{ dateFormat(data.timestamp, appStore.utc) }}
+        {{ dateFormat(data.timestamp) }}
       </span>
       <span v-else-if="item.label === 'tags'">
         {{ tags }}
@@ -44,7 +44,6 @@ import getDashboard from "@/hooks/useDashboardsSession";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { LayoutConfig } from "@/types/dashboard";
 import { dateFormat } from "@/utils/dateFormat";
-import { useAppStoreWithOut } from "@/store/modules/app";
 
 /*global defineProps, defineEmits, Recordable */
 const props = defineProps({
@@ -52,7 +51,6 @@ const props = defineProps({
   noLink: { type: Boolean, default: true },
 });
 const dashboardStore = useDashboardStore();
-const appStore = useAppStoreWithOut();
 const options: Recordable<LayoutConfig> = inject("options") || {};
 const emit = defineEmits(["select"]);
 const columns = ServiceLogConstants;

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

@@ -52,7 +52,6 @@ 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({
@@ -401,7 +400,7 @@ function setConfig() {
 }
 
 function getDates(times: any) {
-  this.dates.value = times;
+  dates.value = times;
 }
 
 function resize() {

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

@@ -71,14 +71,11 @@ limitations under the License. -->
               </div>
               <div class="grey ell sm">
                 <span class="mr-10 sm">
-                  {{ dateFormat(i.taskStartTime, appStore.utc) }}
+                  {{ dateFormat(i.taskStartTime) }}
                 </span>
                 <span class="mr-10 sm">
                   {{
-                    dateFormat(
+                    dateFormat(i.taskStartTime + i.fixedTriggerDuration * 1000)
-                      i.taskStartTime + i.fixedTriggerDuration * 1000,
-                      appStore.utc
-                    )
                   }}
                 </span>
               </div>

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

@@ -87,11 +87,8 @@ function visTimeline() {
     {
       id: 1,
       content: "",
-      start: getLocalTime(appStore.utc, new Date(startTime)),
+      start: new Date(startTime),
-      end: getLocalTime(
+      end: new Date(taskStartTime + fixedTriggerDuration * 1000),
-        appStore.utc,
-        new Date(taskStartTime + fixedTriggerDuration * 1000)
-      ),
       data: networkProfilingStore.selectedNetworkTask,
       className: targetType,
     },
@@ -101,14 +98,14 @@ function visTimeline() {
     task.value = properties.data;
   });
   const itemsAlwaysDraggable =
-    fixedTriggerDuration > 1800
+    fixedTriggerDuration > 500
       ? {
           item: true,
           range: true,
         }
       : undefined;
   const editable =
-    fixedTriggerDuration > 1800
+    fixedTriggerDuration > 500
       ? {
           updateTime: true,
         }
@@ -138,8 +135,16 @@ async function updateTopology() {
   const resp = await networkProfilingStore.getProcessTopology({
     serviceInstanceId,
     duration: {
-      start: dateFormatStep(task.value[0].start, appStore.duration.step, true),
+      start: dateFormatStep(
-      end: dateFormatStep(task.value[0].end, appStore.duration.step, true),
+        getLocalTime(appStore.utc, new Date(task.value[0].start)),
+        appStore.duration.step,
+        true
+      ),
+      end: dateFormatStep(
+        getLocalTime(appStore.utc, new Date(task.value[0].end)),
+        appStore.duration.step,
+        true
+      ),
       step: appStore.duration.step,
     },
   });

src/views/dashboard/related/profile/components/SegmentList.vue

@@ -43,7 +43,7 @@ limitations under the License. -->
             </div>
             <div class="grey ell sm">
               <span class="tag mr-10 sm"> {{ i.duration }} ms </span>
-              {{ dateFormat(parseInt(i.start), appStore.utc) }}
+              {{ dateFormat(parseInt(i.start)) }}
             </div>
           </td>
         </tr>
@@ -58,11 +58,9 @@ import { useProfileStore } from "@/store/modules/profile";
 import { Trace } from "@/types/trace";
 import { ElMessage } from "element-plus";
 import { dateFormat } from "@/utils/dateFormat";
-import { useAppStoreWithOut } from "@/store/modules/app";
 
 const { t } = useI18n();
 const profileStore = useProfileStore();
-const appStore = useAppStoreWithOut();
 const selectedKey = ref<string>("");
 
 async function selectTrace(item: Trace) {

src/views/dashboard/related/profile/components/TaskList.vue

@@ -40,16 +40,11 @@ limitations under the License. -->
                 </a>
               </div>
               <div class="grey ell sm">
-                <span class="mr-10 sm">{{
-                  dateFormat(i.startTime, appStore.utc)
-                }}</span>
                 <span class="mr-10 sm">
-                  {{
+                  {{ dateFormat(i.startTime) }}
-                    dateFormat(
+                </span>
-                      i.startTime + i.duration * 60 * 1000,
+                <span class="mr-10 sm">
-                      appStore.utc
+                  {{ dateFormat(i.startTime + i.duration * 60 * 1000) }}
-                    )
-                  }}
                 </span>
               </div>
             </td>
@@ -78,7 +73,7 @@ limitations under the License. -->
         <div class="mb-10 clear item">
           <span class="g-sm-4 grey">{{ t("monitorTime") }}:</span>
           <span class="g-sm-8 wba">
-            {{ dateFormat(selectedTask.startTime, appStore.utc) }}
+            {{ dateFormat(selectedTask.startTime) }}
           </span>
         </div>
         <div class="mb-10 clear item">
@@ -120,7 +115,7 @@ limitations under the License. -->
             <span class="mr-10 grey">{{ t("operationType") }}:</span>
             <span class="mr-20">{{ d.operationType }}</span>
             <span class="mr-10 grey">{{ t("time") }}:</span>
-            <span>{{ dateFormat(d.operationTime, appStore.utc) }}</span>
+            <span>{{ dateFormat(d.operationTime) }}</span>
           </div>
         </div>
       </div>
@@ -135,12 +130,10 @@ import { useProfileStore } from "@/store/modules/profile";
 import { TaskLog, TaskListItem } from "@/types/profile";
 import { ElMessage } from "element-plus";
 import { dateFormat } from "@/utils/dateFormat";
-import { useAppStoreWithOut } from "@/store/modules/app";
 
 const { t } = useI18n();
 const profileStore = useProfileStore();
 const selectorStore = useSelectorStore();
-const appStore = useAppStoreWithOut();
 const viewDetail = ref<boolean>(false);
 const service = ref<string>("");
 const selectedTask = ref<TaskListItem | Record<string, never>>({});

src/views/dashboard/related/trace/Detail.vue

@@ -57,9 +57,7 @@ limitations under the License. -->
         <div>
           <div class="tag mr-5">{{ t("start") }}</div>
           <span class="mr-15 sm">
-            {{
+            {{ dateFormat(parseInt(traceStore.currentTrace.start)) }}
-              dateFormat(parseInt(traceStore.currentTrace.start), appStore.utc)
-            }}
           </span>
           <div class="tag mr-5">{{ t("duration") }}</div>
           <span class="mr-15 sm"

src/views/dashboard/related/trace/TraceList.vue

@@ -59,7 +59,7 @@ limitations under the License. -->
             </div>
             <div class="grey ell sm">
               <span class="tag mr-10 sm">{{ i.duration }} ms</span
-              >{{ dateFormat(parseInt(i.start, 10), appStore.utc) }}
+              >{{ dateFormat(parseInt(i.start, 10)) }}
             </div>
           </td>
         </tr>
@@ -78,7 +78,6 @@ import { QueryOrders } from "../../data";
 import { Option } from "@/types/app";
 import { Trace } from "@/types/trace";
 import { dateFormat } from "@/utils/dateFormat";
-import { useAppStoreWithOut } from "@/store/modules/app";
 
 const { t } = useI18n();
 const traceStore = useTraceStore();
@@ -90,7 +89,6 @@ const total = computed(() =>
     ? pageSize.value * traceStore.conditions.paging.pageNum + 1
     : pageSize.value * traceStore.conditions.paging.pageNum
 );
-const appStore = useAppStoreWithOut();
 
 function searchTrace() {
   loading.value = true;

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

@@ -62,7 +62,7 @@ limitations under the License. -->
     <div v-for="(i, index) in currentSpan.logs" :key="index">
       <div class="mb-10 sm">
         <span class="mr-10">{{ t("time") }}:</span
-        ><span class="grey">{{ dateFormat(i.time, appStore.utc) }}</span>
+        ><span class="grey">{{ dateFormat(i.time) }}</span>
       </div>
       <div class="mb-15 clear" v-for="(_i, _index) in i.data" :key="_index">
         <div class="mb-10">
@@ -90,7 +90,6 @@ import copy from "@/utils/copy";
 import getDashboard from "@/hooks/useDashboardsSession";
 import { LayoutConfig } from "@/types/dashboard";
 import { dateFormat } from "@/utils/dateFormat";
-import { useAppStoreWithOut } from "@/store/modules/app";
 
 /*global defineProps, Recordable */
 const options: Recordable<LayoutConfig> = inject("options") || {};
@@ -98,7 +97,6 @@ const props = defineProps({
   currentSpan: { type: Object as PropType<any>, default: () => ({}) },
 });
 const { t } = useI18n();
-const appStore = useAppStoreWithOut();
 async function getTaceLogs() {
   const { associationWidget } = getDashboard();
   associationWidget(

src/views/dashboard/related/trace/components/Table/TableItem.vue

@@ -77,7 +77,7 @@ limitations under the License. -->
         </el-tooltip>
       </div>
       <div class="start-time">
-        {{ dateFormat(data.startTime, appStore.utc) }}
+        {{ dateFormat(data.startTime) }}
       </div>
       <div class="exec-ms">
         {{