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

add templates

Browse Source
This commit is contained in:
Qiuxia Fan 2022-03-14 17:02:54 +08:00
parent 46e3680024
commit b0461d0833
5 changed files with 619 additions and 245 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

658
src/constants/templates.ts
View File

@ -14,7 +14,7 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
export const All = { export const AllLayout = {
id: "0", id: "0",
configuration: { configuration: {
name: "Global", name: "Global",
@ -34,68 +34,134 @@ export const All = {
metricTypes: [], metricTypes: [],
children: [ children: [
{ {
x: 0, name: "Overview",
y: 0, children: [
w: 8, {
h: 12, x: 0,
i: "0", y: 0,
metrics: ["all_heatmap"], w: 8,
metricTypes: ["readHeatMap"], h: 12,
type: "Widget", i: "0",
widget: { metrics: ["all_heatmap"],
title: "all_heatmap", metricTypes: ["readHeatMap"],
tips: "Tooltip", type: "Widget",
}, widget: {
graph: { title: "all_heatmap",
type: "HeatMap", tips: "Tooltip",
}, },
standard: { graph: {
unit: "ms", type: "HeatMap",
}, },
standard: {
unit: "ms",
},
},
{
x: 8,
y: 0,
w: 8,
h: 12,
i: "1",
metrics: ["all_percentile"],
metricTypes: ["readLabeledMetricsValues"],
type: "Widget",
widget: {
title: "Global Response Latency",
tips: "Tooltip",
},
graph: {
type: "Line",
},
standard: {
unit: "percentile in ms",
metricLabels: "P50, P75, P90, P95, P99",
labelsIndex: "0, 1, 2, 3, 4",
},
},
],
}, },
{ {
x: 0, name: "Services",
y: 0, children: [
w: 8, {
h: 12, x: 0,
i: "1", y: 0,
metrics: ["all_percentile"], w: 24,
metricTypes: ["readLabeledMetricsValues"], h: 12,
type: "Widget", i: "0",
widget: { metrics: ["service_sla"],
title: "Global Response Latency", metricTypes: ["readMetricsValues"],
tips: "Tooltip", type: "Widget",
}, widget: {},
graph: { graph: {
type: "Line", type: "ServiceList",
}, dashboardName: "123",
standard: { fontSize: 12,
unit: "percentile in ms", },
metricLabels: "P50, P75, P90, P95, P99", standard: {},
labelsIndex: "0, 1, 2, 3, 4", },
}, ],
}, },
{ {
x: 0, name: "Topology",
y: 0, children: [
w: 8, {
h: 12, x: 0,
i: "3", y: 0,
metrics: ["service_cpm"], w: 4,
metricTypes: ["readMetricsValues"], h: 6,
type: "Widget", i: "0",
widget: { metrics: [],
title: "Service List", metricTypes: [],
tips: "Tooltip", type: "Topology",
}, widget: {},
graph: { graph: {
type: "ServiceList", fontColor: "white",
dashboardName: "123", backgroundColor: "green",
fontSize: 12, iconTheme: true,
}, content: "Topology",
standard: { fontSize: 18,
unit: "percentile in ms", showDepth: true,
}, },
standard: {},
},
],
},
{
name: "Trace",
children: [
{
x: 0,
y: 0,
w: 24,
h: 40,
i: "0",
metrics: [],
metricTypes: [],
type: "Trace",
widget: {},
graph: {},
standard: {},
},
],
},
{
name: "Log",
children: [
{
x: 0,
y: 0,
w: 24,
h: 40,
i: "0",
metrics: [],
metricTypes: [],
type: "Log",
widget: {},
graph: {},
standard: {},
},
],
}, },
], ],
}, },
@ -162,6 +228,7 @@ export const ServiceLayout = {
graph: { graph: {
type: "Card", type: "Card",
fontSize: 20, fontSize: 20,
textAlign: "center",
}, },
standard: { standard: {
divide: "10000", divide: "10000",
@ -183,6 +250,7 @@ export const ServiceLayout = {
graph: { graph: {
type: "Card", type: "Card",
fontSize: 20, fontSize: 20,
textAlign: "center",
}, },
standard: { standard: {
unit: "%", unit: "%",
@ -205,6 +273,7 @@ export const ServiceLayout = {
graph: { graph: {
type: "Card", type: "Card",
fontSize: 20, fontSize: 20,
textAlign: "center",
}, },
standard: { standard: {
unit: "CPM / PPM", unit: "CPM / PPM",
@ -359,7 +428,7 @@ export const ServiceLayout = {
{ {
x: 0, x: 0,
y: 0, y: 0,
w: 16, w: 24,
h: 12, h: 12,
i: "0", i: "0",
metrics: ["endpoint_sla"], metrics: ["endpoint_sla"],
@ -381,7 +450,7 @@ export const ServiceLayout = {
{ {
x: 0, x: 0,
y: 0, y: 0,
w: 16, w: 24,
h: 12, h: 12,
i: "0", i: "0",
metrics: ["service_instance_sla"], metrics: ["service_instance_sla"],
@ -431,7 +500,7 @@ export const ServiceLayout = {
x: 0, x: 0,
y: 0, y: 0,
w: 24, w: 24,
h: 36, h: 40,
i: "0", i: "0",
metrics: [], metrics: [],
metricTypes: [], metricTypes: [],
@ -449,7 +518,7 @@ export const ServiceLayout = {
x: 0, x: 0,
y: 0, y: 0,
w: 24, w: 24,
h: 36, h: 40,
i: "0", i: "0",
metrics: [], metrics: [],
metricTypes: [], metricTypes: [],
@ -467,7 +536,7 @@ export const ServiceLayout = {
x: 0, x: 0,
y: 0, y: 0,
w: 24, w: 24,
h: 36, h: 40,
i: "0", i: "0",
metrics: [], metrics: [],
metricTypes: [], metricTypes: [],
@ -483,3 +552,464 @@ export const ServiceLayout = {
], ],
}, },
}; };
export const EndpointLayout = {
id: "2",
configuration: {
name: "Endpoint",
isRoot: true,
children: [
{
x: 0,
y: 0,
w: 24,
h: 45,
i: "0",
type: "Tab",
widget: {},
graph: {},
standard: {},
metrics: [],
metricTypes: [],
children: [
{
name: "Overview",
children: [
{
x: 0,
y: 0,
w: 8,
h: 12,
i: "0",
metrics: ["endpoint_cpm"],
metricTypes: ["sortMetrics"],
type: "Widget",
widget: {},
graph: {
type: "TopList",
dashboardName: "123",
fontSize: 12,
},
standard: {
unit: "CPM / PPM",
},
},
{
x: 8,
y: 0,
w: 8,
h: 12,
i: "1",
metrics: ["endpoint_sla"],
metricTypes: ["sortMetrics"],
type: "Widget",
widget: {
title: "Successful Rate in Current Service",
},
graph: {
type: "TopList",
dashboardName: "123",
fontSize: 12,
},
standard: {
unit: "%",
divide: 100,
},
},
{
x: 16,
y: 0,
w: 8,
h: 12,
i: "2",
metrics: ["endpoint_sla"],
metricTypes: ["readMetricsValues"],
type: "Widget",
widget: {
title: "Successful Rate in Current Service",
},
graph: {
type: "Line",
dashboardName: "123",
fontSize: 12,
},
standard: {
unit: "%",
divide: 100,
},
},
{
x: 0,
y: 12,
w: 8,
h: 12,
i: "3",
metrics: ["endpoint_percentile"],
metricTypes: ["readLabeledMetricsValues"],
type: "Widget",
widget: {
title: "Endpoint Response Time Percentile",
},
graph: {
type: "Line",
},
standard: {
unit: "ms",
metricLabels: "P50, P75, P90, P95, P99",
labelsIndex: "0, 1, 2, 3, 4",
},
},
],
},
{
name: "Topology",
children: [
{
x: 0,
y: 0,
w: 4,
h: 6,
i: "0",
metrics: [],
metricTypes: [],
type: "Topology",
widget: {},
graph: {
fontColor: "white",
backgroundColor: "green",
iconTheme: true,
content: "Topology",
fontSize: 18,
showDepth: true,
},
standard: {},
},
],
},
{
name: "Trace",
children: [
{
x: 0,
y: 0,
w: 24,
h: 40,
i: "0",
metrics: [],
metricTypes: [],
type: "Trace",
widget: {},
graph: {},
standard: {},
},
],
},
{
name: "Log",
children: [
{
x: 0,
y: 0,
w: 24,
h: 40,
i: "0",
metrics: [],
metricTypes: [],
type: "Log",
widget: {},
graph: {},
standard: {},
},
],
},
],
},
],
},
};
export const InstanceLayout = {
id: "3",
configuration: {
name: "Instance",
isRoot: true,
children: [
{
x: 0,
y: 0,
w: 24,
h: 45,
i: "0",
type: "Tab",
widget: {},
graph: {},
standard: {},
metrics: [],
metricTypes: [],
children: [
{
name: "Overview",
children: [
{
x: 0,
y: 0,
w: 8,
h: 12,
i: "0",
metrics: ["service_instance_cpm"],
metricTypes: ["readMetricsValues"],
type: "Widget",
widget: {},
graph: {
type: "Line",
dashboardName: "123",
fontSize: 12,
},
standard: {
unit: "CPM / PPM",
},
},
{
x: 8,
y: 0,
w: 8,
h: 12,
i: "2",
metrics: ["instance_jvm_memory_heap"],
metricTypes: ["readMetricsValues"],
type: "Widget",
widget: {},
graph: {
type: "Line",
dashboardName: "123",
fontSize: 12,
},
standard: {
unit: "%",
divide: 100,
},
},
{
x: 16,
y: 0,
w: 8,
h: 12,
i: "3",
metrics: [
"instance_jvm_class_loaded_class_count",
"instance_jvm_class_total_unloaded_class_count",
],
metricTypes: ["readMetricsValues", "readMetricsValues"],
type: "Widget",
widget: {
title: "JVM Class Count (Java Service)",
},
graph: {
type: "Line",
},
standard: {},
},
],
},
{
name: "Topology",
children: [
{
x: 0,
y: 0,
w: 4,
h: 6,
i: "0",
metrics: [],
metricTypes: [],
type: "Topology",
widget: {},
graph: {
fontColor: "white",
backgroundColor: "green",
iconTheme: true,
content: "Topology",
fontSize: 18,
showDepth: true,
},
standard: {},
},
],
},
{
name: "Trace",
children: [
{
x: 0,
y: 0,
w: 24,
h: 40,
i: "0",
metrics: [],
metricTypes: [],
type: "Trace",
widget: {},
graph: {},
standard: {},
},
],
},
{
name: "Log",
children: [
{
x: 0,
y: 0,
w: 24,
h: 40,
i: "0",
metrics: [],
metricTypes: [],
type: "Log",
widget: {},
graph: {},
standard: {},
},
],
},
],
},
],
},
};
export const ServiceRelationLayout = {
id: "4",
configuration: {
name: "Service Relation Layout",
isRoot: true,
children: [
{
x: 0,
y: 0,
w: 24,
h: 45,
i: "0",
type: "Tab",
widget: {},
graph: {},
standard: {},
metrics: [],
metricTypes: [],
children: [
{
name: "Overview",
children: [
{
x: 0,
y: 0,
w: 8,
h: 12,
i: "0",
metrics: ["service_relation_server_resp_time"],
metricTypes: ["readMetricsValues"],
type: "Widget",
widget: {
title: "service_relation_server_resp_time",
tips: "Tooltip",
},
graph: {
type: "Line",
},
standard: {
unit: "min",
},
children: [],
},
],
},
{
name: "Topology",
children: [
{
x: 0,
y: 0,
w: 4,
h: 6,
i: "0",
metrics: [],
metricTypes: [],
type: "Topology",
widget: {},
graph: {
fontColor: "white",
backgroundColor: "green",
iconTheme: true,
content: "Topology",
fontSize: 18,
showDepth: true,
},
standard: {},
},
],
},
],
},
],
},
};
export const InstanceRelationLayout = {
id: "5",
configuration: {
name: "Service Instance Relation Layout",
isRoot: true,
children: [
{
x: 0,
y: 0,
w: 8,
h: 12,
i: "0",
metrics: ["service_instance_relation_server_cpm"],
metricTypes: ["readMetricsValues"],
type: "Widget",
widget: {
title: "service_instance_relation_server_cpm",
tips: "Tooltip",
},
graph: {
type: "Line",
},
standard: {
unit: "min",
},
children: [],
},
],
},
};
export const EndpointRelationLayout = {
id: "5",
configuration: {
name: "Endpoint Relation Layout",
isRoot: true,
children: [
{
x: 0,
y: 0,
w: 8,
h: 12,
i: "0",
metrics: ["endpoint_relation_cpm"],
metricTypes: ["readMetricsValues"],
type: "Widget",
widget: {
title: "endpoint_relation_cpm",
tips: "Tooltip",
},
graph: {
type: "Line",
},
standard: {
unit: "min",
},
children: [],
},
],
},
};

158
src/store/data.ts
View File

@ -29,161 +29,3 @@ export const NewControl = {
metrics: [""], metrics: [""],
metricTypes: [""], metricTypes: [""],
}; };
export const ConfigData: any = {
x: 0,
y: 0,
w: 8,
h: 12,
i: "0",
metrics: ["service_resp_time"],
metricTypes: ["readMetricsValues"],
type: "Widget",
widget: {
title: "service_resp_time",
tips: "Tooltip",
},
graph: {
type: "Line",
showXAxis: true,
showYAxis: true,
},
standard: {
sortOrder: "DES",
unit: "min",
},
children: [],
};
export const ConfigData1: any = {
x: 0,
y: 0,
w: 8,
h: 12,
i: "0",
metrics: ["service_instance_resp_time"],
metricTypes: ["readMetricsValues"],
type: "Widget",
widget: {
title: "service_instance_resp_time",
tips: "Tooltip",
},
graph: {
type: "Line",
showXAxis: true,
showYAxis: true,
},
standard: {
sortOrder: "DES",
unit: "min",
},
children: [],
};
export const ConfigData2: any = {
x: 0,
y: 0,
w: 8,
h: 12,
i: "0",
metrics: ["endpoint_avg"],
metricTypes: ["readMetricsValues"],
type: "Widget",
widget: {
title: "endpoint_avg",
tips: "Tooltip",
},
graph: {
type: "Line",
showXAxis: true,
showYAxis: true,
},
standard: {
sortOrder: "DES",
unit: "min",
},
children: [],
};
export const ConfigData3: any = [
{
x: 0,
y: 0,
w: 8,
h: 12,
i: "0",
metrics: ["all_heatmap"],
metricTypes: ["readHeatMap"],
type: "Widget",
widget: {
title: "all_heatmap",
tips: "Tooltip",
},
graph: {
type: "HeatMap",
},
standard: {
unit: "min",
},
children: [],
},
];
export const ConfigData4: any = {
x: 0,
y: 0,
w: 8,
h: 12,
i: "0",
metrics: ["service_relation_server_resp_time"],
metricTypes: ["readMetricsValues"],
type: "Widget",
widget: {
title: "service_relation_server_resp_time",
tips: "Tooltip",
},
graph: {
type: "Line",
},
standard: {
unit: "min",
},
children: [],
};
export const ConfigData5: any = {
x: 0,
y: 0,
w: 8,
h: 12,
i: "0",
metrics: ["endpoint_relation_cpm"],
metricTypes: ["readMetricsValues"],
type: "Widget",
widget: {
title: "endpoint_relation_cpm",
tips: "Tooltip",
},
graph: {
type: "Line",
},
standard: {
unit: "min",
},
children: [],
};
export const ConfigData6: any = {
x: 0,
y: 0,
w: 8,
h: 12,
i: "0",
metrics: ["service_instance_relation_server_cpm"],
metricTypes: ["readMetricsValues"],
type: "Widget",
widget: {
title: "service_instance_relation_server_cpm",
tips: "Tooltip",
},
graph: {
type: "Line",
},
standard: {
unit: "min",
},
children: [],
};

28
src/store/modules/dashboard.ts
View File

@ -20,14 +20,14 @@ import { LayoutConfig } from "@/types/dashboard";
import graphql from "@/graphql"; import graphql from "@/graphql";
import query from "@/graphql/fetch"; import query from "@/graphql/fetch";
import { import {
ConfigData1, ServiceLayout,
ConfigData2, AllLayout,
ConfigData3, EndpointLayout,
ConfigData4, InstanceLayout,
ConfigData5, ServiceRelationLayout,
ConfigData6, InstanceRelationLayout,
} from "../data"; EndpointRelationLayout,
import { ServiceLayout } from "@/constants/templates"; } from "@/constants/templates";
import { useAppStoreWithOut } from "@/store/modules/app"; import { useAppStoreWithOut } from "@/store/modules/app";
import { useSelectorStore } from "@/store/modules/selectors"; import { useSelectorStore } from "@/store/modules/selectors";
import { NewControl } from "../data"; import { NewControl } from "../data";
@ -231,25 +231,25 @@ export const dashboardStore = defineStore({
this.entity = type; this.entity = type;
// todo // todo
if (type === "ServiceInstance") { if (type === "ServiceInstance") {
this.layout = [ConfigData1]; this.layout = InstanceLayout.configuration.children;
} }
if (type === "Endpoint") { if (type === "Endpoint") {
this.layout = [ConfigData2]; this.layout = EndpointLayout.configuration.children;
} }
if (type == "All") { if (type == "All") {
this.layout = ConfigData3; this.layout = AllLayout.configuration.children;
} }
if (type == "Service") { if (type == "Service") {
this.layout = ServiceLayout.configuration.children; this.layout = ServiceLayout.configuration.children;
} }
if (type == "ServiceRelation") { if (type == "ServiceRelation") {
this.layout = [ConfigData4]; this.layout = ServiceRelationLayout.configuration.children;
} }
if (type == "ServiceInstanceRelation") { if (type == "ServiceInstanceRelation") {
this.layout = [ConfigData6]; this.layout = InstanceRelationLayout.configuration.children;
} }
if (type == "EndpointRelation") { if (type == "EndpointRelation") {
this.layout = [ConfigData5]; this.layout = EndpointRelationLayout.configuration.children;
} }
}, },
setTopology(show: boolean) { setTopology(show: boolean) {

17
src/views/dashboard/graphs/ServiceList.vue
View File

@ -18,13 +18,13 @@ limitations under the License. -->
<el-input <el-input
v-model="searchText" v-model="searchText"
placeholder="Please input service name" placeholder="Please input service name"
class="input-with-search"
size="small" size="small"
@change="searchList" @change="searchList"
class="inputs"
> >
<template #append> <template #append>
<el-button size="small" @click="searchList"> <el-button size="small" @click="searchList">
<Icon size="lg" iconName="search" /> <Icon size="sm" iconName="search" />
</el-button> </el-button>
</template> </template>
</el-input> </el-input>
@ -67,6 +67,7 @@ limitations under the License. -->
<el-pagination <el-pagination
class="pagination" class="pagination"
background background
small
layout="prev, pager, next" layout="prev, pager, next"
:page-size="pageSize" :page-size="pageSize"
:total="selectorStore.services.length" :total="selectorStore.services.length"
@ -133,7 +134,7 @@ async function queryServiceMetrics(currentServices: Service[]) {
if (metrics.length && metrics[0]) { if (metrics.length && metrics[0]) {
const params = await useQueryPodsMetrics( const params = await useQueryPodsMetrics(
currentServices, currentServices,
dashboardStore.selectedGrid, props.config,
EntityType[0].value EntityType[0].value
); );
const json = await dashboardStore.fetchMetricValue(params); const json = await dashboardStore.fetchMetricValue(params);
@ -142,11 +143,7 @@ async function queryServiceMetrics(currentServices: Service[]) {
ElMessage.error(json.errors); ElMessage.error(json.errors);
return; return;
} }
services.value = usePodsSource( services.value = usePodsSource(currentServices, json, props.config);
currentServices,
json,
dashboardStore.selectedGrid
);
return; return;
} }
services.value = currentServices; services.value = currentServices;
@ -175,4 +172,8 @@ watch(
.chart { .chart {
height: 39px; height: 39px;
} }
.inputs {
width: 300px;
}
</style> </style>

3
src/views/dashboard/related/profile/Header.vue
View File

@ -83,7 +83,8 @@ searchTasks();
// } // }
async function searchTasks() { async function searchTasks() {
profileStore.setConditions({ profileStore.setConditions({
serviceId: selectorStore.currentService.id, serviceId:
(selectorStore.currentService && selectorStore.currentService.id) || "",
endpointName: endpointName.value, endpointName: endpointName.value,
}); });
const res = await profileStore.getTaskList(); const res = await profileStore.getTaskList();