use public date format

src/utils/dateFormat.ts

@@ -14,6 +14,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import dayjs from "dayjs";
+import getLocalTime from "@/utils/localtime";
 export default function dateFormatStep(
   date: Date,
   step: string,
@@ -99,3 +101,9 @@ export const dateFormatTime = (date: Date, step: string): string => {
   }
   return "";
 };
+
+export const dateFormat = (
+  date: number,
+  utc: string,
+  pattern = "YYYY-MM-DD HH:mm:ss"
+) => dayjs(getLocalTime(utc, new Date(date))).format(pattern);

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

@@ -27,7 +27,9 @@ limitations under the License. -->
         ['message', 'stack'].includes(item.label) ? 'max-item' : '',
       ]"
     >
-      <span v-if="item.label === 'time'">{{ dateFormat(data.time) }}</span>
+      <span v-if="item.label === 'time'">{{
+        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>
@@ -39,20 +41,19 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import { ref } from "vue";
-import dayjs from "dayjs";
 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);
 
-const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
-  dayjs(date).format(pattern);
-
 function showSelectSpan() {
   const items: NodeListOf<any> = document.querySelectorAll(".log-item");
 

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]) }}
+        {{ dateFormat(currentLog[item.label], appStore.utc) }}
       </span>
       <textarea
         class="content mb-10"
@@ -43,8 +43,9 @@ limitations under the License. -->
 import { computed } from "vue";
 import type { PropType } from "vue";
 import { useI18n } from "vue-i18n";
-import dayjs from "dayjs";
 import { Option } from "@/types/app";
+import { dateFormat } from "@/utils/dateFormat";
+import { useAppStoreWithOut } from "@/store/modules/app";
 
 /*global defineProps */
 const props = defineProps({
@@ -52,6 +53,7 @@ const props = defineProps({
   columns: { type: Array as PropType<Option[]>, default: () => [] },
 });
 const { t } = useI18n();
+const appStore = useAppStoreWithOut();
 const logTags = computed(() => {
   if (!props.currentLog.tags) {
     return [];
@@ -60,8 +62,6 @@ const logTags = computed(() => {
     return `${d.key} = ${d.value}`;
   });
 });
-const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
-  dayjs(date).format(pattern);
 </script>
 <style lang="scss" scoped>
 .content {

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) }}
+        {{ dateFormat(data.timestamp, appStore.utc) }}
       </span>
       <span v-else-if="item.label === 'tags'">
         {{ tags }}
@@ -39,11 +39,12 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import { computed, inject } from "vue";
-import dayjs from "dayjs";
 import { ServiceLogConstants } from "./data";
 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({
@@ -51,6 +52,7 @@ 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;
@@ -64,8 +66,6 @@ const tags = computed(() => {
     )
   );
 });
-const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
-  dayjs(date).format(pattern);
 
 function selectLog(label: string, value: string) {
   if (label === "traceId") {

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

@@ -461,14 +461,14 @@ function visTimeline() {
     task.value = properties.data;
   });
   const itemsAlwaysDraggable =
-    fixedTriggerDuration < 1800
+    fixedTriggerDuration > 1800
       ? {
           item: true,
           range: true,
         }
       : undefined;
   const editable =
-    fixedTriggerDuration < 1800
+    fixedTriggerDuration > 1800
       ? {
           updateTime: true,
         }

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

@@ -70,10 +70,15 @@ limitations under the License. -->
                 </a>
               </div>
               <div class="grey ell sm">
-                <span class="mr-10 sm">{{ dateFormat(i.taskStartTime) }}</span>
+                <span class="mr-10 sm">
+                  {{ dateFormat(i.taskStartTime, appStore.utc) }}
+                </span>
                 <span class="mr-10 sm">
                   {{
-                    dateFormat(i.taskStartTime + i.fixedTriggerDuration * 1000)
+                    dateFormat(
+                      i.taskStartTime + i.fixedTriggerDuration * 1000,
+                      appStore.utc
+                    )
                   }}
                 </span>
               </div>
@@ -94,14 +99,13 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import { ref } from "vue";
-import dayjs from "dayjs";
 import { useI18n } from "vue-i18n";
 import { useNetworkProfilingStore } from "@/store/modules/network-profiling";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { EBPFTaskList } from "@/types/ebpf";
 import { ElMessage } from "element-plus";
 import TaskDetails from "../../components/TaskDetails.vue";
-import dateFormatStep from "@/utils/dateFormat";
+import dateFormatStep, { dateFormat } from "@/utils/dateFormat";
 import getLocalTime from "@/utils/localtime";
 import { useAppStoreWithOut } from "@/store/modules/app";
 
@@ -109,8 +113,6 @@ const { t } = useI18n();
 const selectorStore = useSelectorStore();
 const networkProfilingStore = useNetworkProfilingStore();
 const appStore = useAppStoreWithOut();
-const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
-  dayjs(date).format(pattern);
 const viewDetail = ref<boolean>(false);
 const enableTasks = ref<boolean>(false);
 

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)) }}
+              {{ dateFormat(parseInt(i.start), appStore.utc) }}
             </div>
           </td>
         </tr>
@@ -53,16 +53,16 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import { ref } from "vue";
-import dayjs from "dayjs";
 import { useI18n } from "vue-i18n";
 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 dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
+const appStore = useAppStoreWithOut();
-  dayjs(date).format(pattern);
 const selectedKey = ref<string>("");
 
 async function selectTrace(item: Trace) {

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

@@ -40,9 +40,16 @@ limitations under the License. -->
                 </a>
               </div>
               <div class="grey ell sm">
-                <span class="mr-10 sm">{{ dateFormat(i.startTime) }}</span>
+                <span class="mr-10 sm">{{
+                  dateFormat(i.startTime, appStore.utc)
+                }}</span>
                 <span class="mr-10 sm">
-                  {{ dateFormat(i.startTime + i.duration * 60 * 1000) }}
+                  {{
+                    dateFormat(
+                      i.startTime + i.duration * 60 * 1000,
+                      appStore.utc
+                    )
+                  }}
                 </span>
               </div>
             </td>
@@ -71,7 +78,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) }}
+            {{ dateFormat(selectedTask.startTime, appStore.utc) }}
           </span>
         </div>
         <div class="mb-10 clear item">
@@ -113,7 +120,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) }}</span>
+            <span>{{ dateFormat(d.operationTime, appStore.utc) }}</span>
           </div>
         </div>
       </div>
@@ -122,18 +129,18 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import { ref } from "vue";
-import dayjs from "dayjs";
 import { useI18n } from "vue-i18n";
 import { useSelectorStore } from "@/store/modules/selectors";
 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 dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
+const appStore = useAppStoreWithOut();
-  dayjs(date).format(pattern);
 const viewDetail = ref<boolean>(false);
 const service = ref<string>("");
 const selectedTask = ref<TaskListItem | Record<string, never>>({});

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

@@ -57,7 +57,9 @@ 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"
@@ -120,7 +122,6 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts">
-import dayjs from "dayjs";
 import { ref, defineComponent, inject } from "vue";
 import { useI18n } from "vue-i18n";
 import { useTraceStore } from "@/store/modules/trace";
@@ -130,6 +131,8 @@ import graphs from "./components/index";
 import { ElMessage } from "element-plus";
 import getDashboard from "@/hooks/useDashboardsSession";
 import { LayoutConfig } from "@/types/dashboard";
+import { dateFormat } from "@/utils/dateFormat";
+import { useAppStoreWithOut } from "@/store/modules/app";
 
 export default defineComponent({
   name: "TraceDetail",
@@ -137,6 +140,7 @@ export default defineComponent({
     ...graphs,
   },
   setup() {
+    const appStore = useAppStoreWithOut();
     /*global Recordable */
     const options: Recordable<LayoutConfig> = inject("options") || {};
     const { t } = useI18n();
@@ -144,8 +148,6 @@ export default defineComponent({
     const loading = ref<boolean>(false);
     const traceId = ref<string>("");
     const displayMode = ref<string>("List");
-    const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
-      dayjs(date).format(pattern);
 
     function handleClick() {
       copy(traceId.value || traceStore.currentTrace.traceIds[0].value);
@@ -180,6 +182,7 @@ export default defineComponent({
       handleClick,
       t,
       searchTraceLogs,
+      appStore,
       loading,
       traceId,
     };

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)) }}
+              >{{ dateFormat(parseInt(i.start, 10), appStore.utc) }}
             </div>
           </td>
         </tr>
@@ -70,7 +70,6 @@ limitations under the License. -->
 </template>
 
 <script lang="ts" setup>
-import dayjs from "dayjs";
 import { ref, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useTraceStore } from "@/store/modules/trace";
@@ -78,6 +77,8 @@ import { ElMessage } from "element-plus";
 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();
@@ -89,8 +90,7 @@ const total = computed(() =>
     ? pageSize.value * traceStore.conditions.paging.pageNum + 1
     : pageSize.value * traceStore.conditions.paging.pageNum
 );
-const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
+const appStore = useAppStoreWithOut();
-  dayjs(date).format(pattern);
 
 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) }}</span>
+        ><span class="grey">{{ dateFormat(i.time, appStore.utc) }}</span>
       </div>
       <div class="mb-15 clear" v-for="(_i, _index) in i.data" :key="_index">
         <div class="mb-10">
@@ -86,10 +86,11 @@ limitations under the License. -->
 import { inject } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PropType } from "vue";
-import dayjs from "dayjs";
 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") || {};
@@ -97,8 +98,7 @@ const props = defineProps({
   currentSpan: { type: Object as PropType<any>, default: () => ({}) },
 });
 const { t } = useI18n();
-const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
+const appStore = useAppStoreWithOut();
-  dayjs(date).format(pattern);
 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) }}
+        {{ dateFormat(data.startTime, appStore.utc) }}
       </div>
       <div class="exec-ms">
         {{
@@ -138,11 +138,12 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts">
-import dayjs from "dayjs";
 import { useI18n } from "vue-i18n";
 import { ref, computed, defineComponent } from "vue";
 import type { PropType } from "vue";
 import SpanDetail from "../D3Graph/SpanDetail.vue";
+import { dateFormat } from "@/utils/dateFormat";
+import { useAppStoreWithOut } from "@/store/modules/app";
 
 const props = {
   data: { type: Object as PropType<any>, default: () => ({}) },
@@ -156,11 +157,10 @@ export default defineComponent({
   emits: ["select"],
   components: { SpanDetail },
   setup(props, { emit }) {
+    const appStore = useAppStoreWithOut();
     const displayChildren = ref<boolean>(true);
     const showDetail = ref<boolean>(false);
     const { t } = useI18n();
-    const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
-      dayjs(date).format(pattern);
     const selfTime = computed(() => (props.data.dur ? props.data.dur : 0));
     const execTime = computed(() =>
       props.data.endTime - props.data.startTime
@@ -239,6 +239,7 @@ export default defineComponent({
       selectedItem,
       viewSpan,
       t,
+      appStore,
     };
   },
 });