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

add labels value in toplist

Browse Source
This commit is contained in:
Fine 2022-10-28 20:16:33 +08:00
parent b4fa0202f9
commit 372557ff40
2 changed files with 50 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -45,7 +45,12 @@ limitations under the License. -->
<ColumnGraph
:intervalTime="intervalTime"
:colMetrics="colMetrics"
:config="config"
:config="{
...config,
metrics: colMetrics,
metricConfig,
metricTypes,
}"
v-if="colMetrics.length"
/>
</el-table>
@ -53,7 +58,7 @@ limitations under the License. -->
</div>
</template>
<script setup lang="ts">
import { ref, watch, computed } from "vue";
import { ref, watch } from "vue";
import { useSelectorStore } from "@/store/modules/selectors";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";
@ -99,9 +104,9 @@ const dashboardStore = useDashboardStore();
const chartLoading = ref<boolean>(false);
const endpoints = ref<Endpoint[]>([]);
const searchText = ref<string>("");
const colMetrics = computed(() =>
(props.config.metrics || []).filter((d: string) => d)
);
const colMetrics = ref<string[]>([]);
const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []);
const metricTypes = ref<string[]>(props.config.metricTypes || []);
if (props.needQuery) {
queryEndpoints();
@ -125,8 +130,8 @@ async function queryEndpointMetrics(currentPods: Endpoint[]) {
return;
}
const metrics = props.config.metrics || [];
const metricTypes = props.config.metricTypes || [];
if (metrics.length && metrics[0] && metricTypes.length && metricTypes[0]) {
const types = props.config.metricTypes || [];
if (metrics.length && metrics[0] && types.length && types[0]) {
const params = await useQueryPodsMetrics(
currentPods,
props.config,
@ -138,12 +143,18 @@ async function queryEndpointMetrics(currentPods: Endpoint[]) {
ElMessage.error(json.errors);
return;
}
const metricConfig = props.config.metricConfig || [];
endpoints.value = usePodsSource(currentPods, json, {
const { data, names, metricConfigArr, metricTypesArr } = usePodsSource(
currentPods,
json,
{
...props.config,
metricConfig: metricConfig,
}).data;
metricConfig: metricConfig.value,
}
);
endpoints.value = data;
colMetrics.value = names;
metricTypes.value = metricTypesArr;
metricConfig.value = metricConfigArr;
return;
}
endpoints.value = currentPods;
@ -186,6 +197,7 @@ watch(
if (JSON.stringify(data) === JSON.stringify(old)) {
return;
}
metricConfig.value = data;
queryEndpointMetrics(endpoints.value);
}
);

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

@ -42,10 +42,15 @@ limitations under the License. -->
</template>
</el-table-column>
<ColumnGraph
v-if="colMetrics.length"
:intervalTime="intervalTime"
:colMetrics="colMetrics"
:config="config"
:config="{
...config,
metrics: colMetrics,
metricConfig,
metricTypes,
}"
v-if="colMetrics.length"
/>
<el-table-column label="Attributes">
<template #default="scope">
@ -82,7 +87,7 @@ limitations under the License. -->
</div>
</template>
<script setup lang="ts">
import { ref, watch, computed } from "vue";
import { ref, watch } from "vue";
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";
import type { PropType } from "vue";
@ -126,9 +131,9 @@ const chartLoading = ref<boolean>(false);
const instances = ref<Instance[]>([]); // current instances
const pageSize = 10;
const searchText = ref<string>("");
const colMetrics = computed(() =>
(props.config.metrics || []).filter((d: string) => d)
);
const colMetrics = ref<string[]>([]);
const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []);
const metricTypes = ref<string[]>(props.config.metricTypes || []);
if (props.needQuery) {
queryInstance();
}
@ -154,9 +159,9 @@ async function queryInstanceMetrics(currentInstances: Instance[]) {
return;
}
const metrics = props.config.metrics || [];
const metricTypes = props.config.metricTypes || [];
const types = props.config.metricTypes || [];
if (metrics.length && metrics[0] && metricTypes.length && metricTypes[0]) {
if (metrics.length && metrics[0] && types.length && types[0]) {
const params = await useQueryPodsMetrics(
currentInstances,
props.config,
@ -168,11 +173,18 @@ async function queryInstanceMetrics(currentInstances: Instance[]) {
ElMessage.error(json.errors);
return;
}
const metricConfig = props.config.metricConfig || [];
instances.value = usePodsSource(currentInstances, json, {
const { data, names, metricConfigArr, metricTypesArr } = usePodsSource(
currentInstances,
json,
{
...props.config,
metricConfig,
}).data;
metricConfig: metricConfig.value,
}
);
instances.value = data;
colMetrics.value = names;
metricTypes.value = metricTypesArr;
metricConfig.value = metricConfigArr;
return;
}
instances.value = currentInstances;