github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-07-18 18:45:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

update duration

Browse Source
This commit is contained in:
Fine 2022-08-22 18:13:51 +08:00
parent f59b0c536a
commit 059bd9fedb
17 changed files with 43 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/layout/components/NavBar.vue
View File

@ -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),
end: getLocalTime(d.utc, d.end),
start: new Date(d.start),
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>

8
src/utils/dateFormat.ts
View File

@ -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 = (
date: number,
utc: string,
pattern = "YYYY-MM-DD HH:mm:ss"
) => dayjs(getLocalTime(utc, new Date(date))).format(pattern);
export const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
dayjs(new Date(date)).format(pattern);

4
src/views/alarm/Content.vue
View File

@ -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>({});

4
src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
View File

@ -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}`)

4
src/views/dashboard/related/ebpf/components/TaskList.vue
View File

@ -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) {

6
src/views/dashboard/related/log/LogTable/LogBrowser.vue
View File

@ -27,9 +27,7 @@ limitations under the License. -->
['message', 'stack'].includes(item.label) ? 'max-item' : '',
]"
>
<span v-if="item.label === 'time'">{{
dateFormat(data.time, appStore.utc)
}}</span>
<span v-if="item.label === 'time'">{{ dateFormat(data.time) }}</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);

4
src/views/dashboard/related/log/LogTable/LogDetail.vue
View File

@ -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 [];

4
src/views/dashboard/related/log/LogTable/LogService.vue
View File

@ -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;

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

@ -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() {

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

@ -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(
i.taskStartTime + i.fixedTriggerDuration * 1000,
appStore.utc
)
dateFormat(i.taskStartTime + i.fixedTriggerDuration * 1000)
}}
</span>
</div>

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

@ -87,11 +87,8 @@ function visTimeline() {
{
id: 1,
content: "",
start: getLocalTime(appStore.utc, new Date(startTime)),
end: getLocalTime(
appStore.utc,
new Date(taskStartTime + fixedTriggerDuration * 1000)
),
start: new Date(startTime),
end: 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),
end: dateFormatStep(task.value[0].end, appStore.duration.step, true),
start: dateFormatStep(
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,
},
});

4
src/views/dashboard/related/profile/components/SegmentList.vue
View File

@ -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) {

19
src/views/dashboard/related/profile/components/TaskList.vue
View File

@ -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 + i.duration * 60 * 1000,
appStore.utc
)
}}
{{ dateFormat(i.startTime) }}
</span>
<span class="mr-10 sm">
{{ 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>>({});

4
src/views/dashboard/related/trace/Detail.vue
View File

@ -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), appStore.utc)
}}
{{ dateFormat(parseInt(traceStore.currentTrace.start)) }}
</span>
<div class="tag mr-5">{{ t("duration") }}</div>
<span class="mr-15 sm"

4
src/views/dashboard/related/trace/TraceList.vue
View File

@ -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;

4
src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
View File

@ -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(

2
src/views/dashboard/related/trace/components/Table/TableItem.vue
View File

@ -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">
{{