You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by wu...@apache.org on 2023/02/07 08:14:45 UTC
[skywalking-booster-ui] branch main updated: feat: add auto fresh to widgets independent mode (#224)
This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git
The following commit(s) were added to refs/heads/main by this push:
new 4486684 feat: add auto fresh to widgets independent mode (#224)
4486684 is described below
commit 448668418340478190df404c5805caea020d4326
Author: Fine0830 <fa...@gmail.com>
AuthorDate: Tue Feb 7 16:14:38 2023 +0800
feat: add auto fresh to widgets independent mode (#224)
---
src/layout/components/AppMain.vue | 1 +
src/locales/lang/en.ts | 4 +-
src/locales/lang/es.ts | 4 +-
src/locales/lang/zh.ts | 4 +-
src/views/dashboard/Edit.vue | 1 +
src/views/dashboard/Widget.vue | 12 ++++
src/views/dashboard/components/WidgetLink.vue | 68 +++++++++++++++-------
src/views/dashboard/data.ts | 5 ++
src/views/dashboard/related/profile/Header.vue | 1 -
.../trace/components/D3Graph/SpanDetail.vue | 1 -
10 files changed, 73 insertions(+), 28 deletions(-)
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index b52e6be..cce7d11 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -25,5 +25,6 @@ limitations under the License. -->
.app-main {
height: calc(100% - 40px);
background: #f7f9fa;
+ overflow: auto;
}
</style>
diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index ae262ac..f39229f 100644
--- a/src/locales/lang/en.ts
+++ b/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",
diff --git a/src/locales/lang/es.ts b/src/locales/lang/es.ts
index 16ce8d4..df7e54c 100644
--- a/src/locales/lang/es.ts
+++ b/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",
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index ab93799..d43cdeb 100644
--- a/src/locales/lang/zh.ts
+++ b/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: "版本",
diff --git a/src/views/dashboard/Edit.vue b/src/views/dashboard/Edit.vue
index 7b78e9e..88cf5c8 100644
--- a/src/views/dashboard/Edit.vue
+++ b/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)"
>
diff --git a/src/views/dashboard/Widget.vue b/src/views/dashboard/Widget.vue
index bfdbff2..0858e1f 100644
--- a/src/views/dashboard/Widget.vue
+++ b/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) {
diff --git a/src/views/dashboard/components/WidgetLink.vue b/src/views/dashboard/components/WidgetLink.vue
index 4e5c343..06ec361 100644
--- a/src/views/dashboard/components/WidgetLink.vue
+++ b/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>
diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts
index 56acd19..3dcbe2e 100644
--- a/src/views/dashboard/data.ts
+++ b/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" },
+];
diff --git a/src/views/dashboard/related/profile/Header.vue b/src/views/dashboard/related/profile/Header.vue
index 003f5f0..53c7297 100644
--- a/src/views/dashboard/related/profile/Header.vue
+++ b/src/views/dashboard/related/profile/Header.vue
@@ -104,7 +104,6 @@ limitations under the License. -->
() => selectorStore.currentService,
() => {
searchTasks();
- console.log("service");
},
);
watch(
diff --git a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
index 391bfa2..0f7ae37 100644
--- a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
+++ b/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;