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

fix endpoint and instance list

Browse Source
This commit is contained in:
Qiuxia Fan 2022-03-14 14:23:00 +08:00
parent a7f05d35ad
commit 46e3680024
7 changed files with 149 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

179
src/constants/templates.ts
View File

@ -21,62 +21,83 @@ export const All = {
isRoot: true,
children: [
{
w: 8,
h: 12,
x: 0,
y: 0,
w: 24,
h: 45,
i: "0",
metrics: ["all_heatmap"],
metricTypes: ["readHeatMap"],
type: "Widget",
widget: {
title: "all_heatmap",
tips: "Tooltip",
},
graph: {
type: "HeatMap",
},
standard: {
unit: "ms",
},
},
{
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",
},
},
{
w: 8,
h: 12,
i: "3",
metrics: ["service_cpm"],
metricTypes: ["readMetricsValues"],
type: "Widget",
widget: {
title: "Service List",
tips: "Tooltip",
},
graph: {
type: "ServiceList",
dashboardName: "123",
fontSize: 12,
},
standard: {
unit: "percentile in ms",
},
type: "Tab",
widget: {},
graph: {},
standard: {},
metrics: [],
metricTypes: [],
children: [
{
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: "ms",
},
},
{
x: 0,
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,
y: 0,
w: 8,
h: 12,
i: "3",
metrics: ["service_cpm"],
metricTypes: ["readMetricsValues"],
type: "Widget",
widget: {
title: "Service List",
tips: "Tooltip",
},
graph: {
type: "ServiceList",
dashboardName: "123",
fontSize: 12,
},
standard: {
unit: "percentile in ms",
},
},
],
},
],
},
@ -92,7 +113,7 @@ export const ServiceLayout = {
x: 0,
y: 0,
w: 24,
h: 36,
h: 45,
i: "0",
type: "Tab",
widget: {},
@ -332,6 +353,52 @@ export const ServiceLayout = {
},
],
},
{
name: "Endpoints",
children: [
{
x: 0,
y: 0,
w: 16,
h: 12,
i: "0",
metrics: ["endpoint_sla"],
metricTypes: ["readMetricsValues"],
type: "Widget",
widget: {},
graph: {
type: "EndpointList",
dashboardName: "123",
fontSize: 12,
},
standard: {},
},
],
},
{
name: "Service Instances",
children: [
{
x: 0,
y: 0,
w: 16,
h: 12,
i: "0",
metrics: ["service_instance_sla"],
metricTypes: ["readMetricsValues"],
type: "Widget",
widget: {},
graph: {
type: "InstanceList",
dashboardName: "123",
fontSize: 12,
},
standard: {
unit: "ms",
},
},
],
},
{
name: "Topology",
children: [

1
src/hooks/useProcessor.ts
View File

@ -226,7 +226,6 @@ export function useQueryPodsMetrics(
};
const variables: string[] = [`$duration: Duration!`];
const { currentService } = selectorStore;
const fragmentList = pods.map(
(
d: (Instance | Endpoint | Service) & { normal: boolean },

1
src/views/dashboard/configuration/Widget.vue
View File

@ -120,6 +120,7 @@ export default defineComponent({
}
function applyConfig() {
console.log(dashboardStore.selectedGrid);
dashboardStore.setConfigs(dashboardStore.selectedGrid);
dashboardStore.setConfigPanel(false);
}

2
src/views/dashboard/controls/Tab.vue
View File

@ -257,7 +257,7 @@ export default defineComponent({
}
.tab-name {
max-width: 80px;
max-width: 130px;
height: 20px;
line-height: 20px;
outline: none;

8
src/views/dashboard/graphs/Card.vue
View File

@ -16,6 +16,7 @@ limitations under the License. -->
<template>
<div
class="chart-card"
:class="{ center: config.textAlign === 'center' }"
:style="{ fontSize: `${config.fontSize}px`, textAlign: config.textAlign }"
>
{{
@ -52,12 +53,15 @@ const singleVal = computed(() => props.data[key.value]);
</script>
<style lang="scss" scoped>
.chart-card {
box-sizing: border-box;
color: #333;
height: 100%;
}
.center {
box-sizing: border-box;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
height: 100%;
}
</style>

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

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

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

@ -18,13 +18,13 @@ limitations under the License. -->
<el-input
v-model="searchText"
placeholder="Please input instance name"
class="input-with-search"
size="small"
@change="searchList"
class="inputs"
>
<template #append>
<el-button size="small" @click="searchList">
<Icon size="lg" iconName="search" />
<Icon size="sm" iconName="search" />
</el-button>
</template>
</el-input>
@ -66,6 +66,7 @@ limitations under the License. -->
<el-pagination
class="pagination"
background
small
layout="prev, pager, next"
:page-size="pageSize"
:total="searchInstances.length"
@ -138,7 +139,7 @@ async function queryInstanceMetrics(currentInstances: Instance[]) {
if (metrics.length && metrics[0]) {
const params = await useQueryPodsMetrics(
currentInstances,
dashboardStore.selectedGrid,
props.config,
EntityType[3].value
);
const json = await dashboardStore.fetchMetricValue(params);
@ -147,11 +148,7 @@ async function queryInstanceMetrics(currentInstances: Instance[]) {
ElMessage.error(json.errors);
return;
}
instances.value = usePodsSource(
currentInstances,
json,
dashboardStore.selectedGrid
);
instances.value = usePodsSource(currentInstances, json, props.config);
return;
}
instances.value = currentInstances;
@ -182,4 +179,8 @@ watch(
.chart {
height: 40px;
}
.inputs {
width: 300px;
}
</style>