github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-13 16:27:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: params

Browse Source
This commit is contained in:
Fine 2023-02-03 11:01:57 +08:00
parent c2cd632d69
commit 190d66268b
3 changed files with 23 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/router/dashboard.ts
View File

@ -185,7 +185,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
}, },
children: [ children: [
{ {
path: "/page/:entity/:serviceId/:podId/:processId/:destServiceId/:destPodId/:destProcessId/:config/:duration?", path: "/page/:layer/:entity/:serviceId/:podId/:processId/:destServiceId/:destPodId/:destProcessId/:config/:duration?",
component: () => import("@/views/dashboard/Widget.vue"), component: () => import("@/views/dashboard/Widget.vue"),
name: "ViewWidget", name: "ViewWidget",
}, },

12
src/views/dashboard/Widget.vue
View File

@ -24,7 +24,7 @@ limitations under the License. -->
</el-tooltip> </el-tooltip>
</div> </div>
</div> </div>
<div class="widget-chart"> <div class="widget-chart" :class="config.graph.type.includes('List') ? 'list' : 'chart'">
<component <component
:is="graph.type" :is="graph.type"
:intervalTime="appStoreWithOut.intervalTime" :intervalTime="appStoreWithOut.intervalTime"
@ -75,6 +75,7 @@ limitations under the License. -->
init(); init();
async function init() { async function init() {
dashboardStore.setLayer(route.params.layer);
dashboardStore.setEntity(route.params.entity); dashboardStore.setEntity(route.params.entity);
await setSelector(); await setSelector();
await queryMetrics(); await queryMetrics();
@ -165,10 +166,17 @@ limitations under the License. -->
box-shadow: 0px 1px 4px 0px #00000029; box-shadow: 0px 1px 4px 0px #00000029;
border-radius: 3px; border-radius: 3px;
padding: 5px; padding: 5px;
height: 400px;
width: 100%; width: 100%;
} }
.list {
min-height: 400px;
}
.chart {
height: 450px;
}
.no-data { .no-data {
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;

17
src/views/dashboard/components/WidgetLink.vue
View File

@ -28,12 +28,12 @@ limitations under the License. -->
/> />
</div> </div>
<el-button size="small" type="primary" class="mt-20" @click="getLink">{{ t("generateLink") }}</el-button> <el-button size="small" type="primary" class="mt-20" @click="getLink">{{ t("generateLink") }}</el-button>
<div v-show="widgetLink" class="link mt-10"> <div v-show="widgetLink" class="mt-10">
<span @click="viewPage"> <span @click="viewPage" class="link">
{{ host + widgetLink }} {{ host + widgetLink }}
</span> </span>
<span> <span>
<Icon class="cp ml-5" iconName="copy" @click="copyLink" /> <Icon class="cp ml-10" iconName="copy" @click="copyLink" />
</span> </span>
</div> </div>
</div> </div>
@ -79,15 +79,22 @@ limitations under the License. -->
title: encodeURIComponent(dashboardStore.selectedGrid.widget.title), title: encodeURIComponent(dashboardStore.selectedGrid.widget.title),
tips: encodeURIComponent(dashboardStore.selectedGrid.widget.tips), tips: encodeURIComponent(dashboardStore.selectedGrid.widget.tips),
}; };
const metricConfig = (dashboardStore.selectedGrid.metricConfig || []).map((d: any) => {
return {
...d,
label: encodeURIComponent(d.label),
unit: encodeURIComponent(d.unit),
};
});
const config = JSON.stringify({ const config = JSON.stringify({
type: dashboardStore.selectedGrid.type, type: dashboardStore.selectedGrid.type,
widget: w, widget: w,
graph: dashboardStore.selectedGrid.graph, graph: dashboardStore.selectedGrid.graph,
metrics: dashboardStore.selectedGrid.metrics, metrics: dashboardStore.selectedGrid.metrics,
metricTypes: dashboardStore.selectedGrid.metricTypes, metricTypes: dashboardStore.selectedGrid.metricTypes,
metricConfig: dashboardStore.selectedGrid.metricConfig, metricConfig: metricConfig,
}); });
const path = `/page/${dashboardStore.entity}/${serviceId}/${podId}/${processId}/${destServiceId}/${destPodId}/${destProcessId}/${config}`; const path = `/page/${dashboardStore.layerId}/${dashboardStore.entity}/${serviceId}/${podId}/${processId}/${destServiceId}/${destPodId}/${destProcessId}/${config}`;
widgetLink.value = hasDuration.value ? `${path}/${duration}` : path; widgetLink.value = hasDuration.value ? `${path}/${duration}` : path;
} }
function viewPage() { function viewPage() {