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 labeled values on toplist

Browse Source
This commit is contained in:
Fine 2022-10-28 19:11:17 +08:00
parent c0ff372aaa
commit 225018db2b
3 changed files with 26 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/hooks/useProcessor.ts
View File

@ -331,6 +331,7 @@ export function usePodsSource(
} }
const names: string[] = []; const names: string[] = [];
const metricConfigArr: MetricConfigOpt[] = []; const metricConfigArr: MetricConfigOpt[] = [];
const metricTypesArr: string[] = [];
const data = pods.map((d: Instance | any, idx: number) => { const data = pods.map((d: Instance | any, idx: number) => {
config.metrics.map((name: string, index: number) => { config.metrics.map((name: string, index: number) => {
const c: any = (config.metricConfig && config.metricConfig[index]) || {}; const c: any = (config.metricConfig && config.metricConfig[index]) || {};
@ -340,6 +341,7 @@ export function usePodsSource(
if (idx === 0) { if (idx === 0) {
names.push(name); names.push(name);
metricConfigArr.push(c); metricConfigArr.push(c);
metricTypesArr.push(config.metricTypes[index]);
} }
} }
if (config.metricTypes[index] === MetricQueryTypes.ReadMetricsValues) { if (config.metricTypes[index] === MetricQueryTypes.ReadMetricsValues) {
@ -359,6 +361,7 @@ export function usePodsSource(
if (idx === 0) { if (idx === 0) {
names.push(name); names.push(name);
metricConfigArr.push(c); metricConfigArr.push(c);
metricTypesArr.push(config.metricTypes[index]);
} }
} }
if ( if (
@ -403,6 +406,7 @@ export function usePodsSource(
if (idx === 0) { if (idx === 0) {
names.push(labels[indexNum]); names.push(labels[indexNum]);
metricConfigArr.push(c); metricConfigArr.push(c);
metricTypesArr.push(config.metricTypes[index]);
} }
} else { } else {
if (!d[item.label]) { if (!d[item.label]) {
@ -412,6 +416,7 @@ export function usePodsSource(
if (idx === 0) { if (idx === 0) {
names.push(item.label); names.push(item.label);
metricConfigArr.push(c); metricConfigArr.push(c);
metricTypesArr.push(config.metricTypes[index]);
} }
} }
} }
@ -419,7 +424,7 @@ export function usePodsSource(
}); });
return d; return d;
}); });
return { data, names, metricConfigArr }; return { data, names, metricConfigArr, metricTypesArr };
} }
export function useQueryTopologyMetrics(metrics: string[], ids: string[]) { export function useQueryTopologyMetrics(metrics: string[], ids: string[]) {
const appStore = useAppStoreWithOut(); const appStore = useAppStoreWithOut();

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

@ -56,7 +56,12 @@ limitations under the License. -->
<ColumnGraph <ColumnGraph
:intervalTime="intervalTime" :intervalTime="intervalTime"
:colMetrics="colMetrics" :colMetrics="colMetrics"
:config="{ ...config, metrics: colMetrics, metricConfig }" :config="{
...config,
metrics: colMetrics,
metricConfig,
metricTypes,
}"
v-if="colMetrics.length" v-if="colMetrics.length"
/> />
</el-table> </el-table>
@ -122,6 +127,8 @@ const searchText = ref<string>("");
const groups = ref<any>({}); const groups = ref<any>({});
const sortServices = ref<(Service & { merge: boolean })[]>([]); const sortServices = ref<(Service & { merge: boolean })[]>([]);
const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []); const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []);
const metricTypes = ref<string[]>(props.config.metricTypes || []);
queryServices(); queryServices();
async function queryServices() { async function queryServices() {
@ -199,9 +206,9 @@ async function queryServiceMetrics(currentServices: Service[]) {
return; return;
} }
const metrics = props.config.metrics || []; 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( const params = await useQueryPodsMetrics(
currentServices, currentServices,
props.config, props.config,
@ -217,7 +224,7 @@ async function queryServiceMetrics(currentServices: Service[]) {
if (!metricConfig.value.length) { if (!metricConfig.value.length) {
return; return;
} }
const { data, names, metricConfigArr } = usePodsSource( const { data, names, metricConfigArr, metricTypesArr } = usePodsSource(
currentServices, currentServices,
json, json,
{ {
@ -227,9 +234,9 @@ async function queryServiceMetrics(currentServices: Service[]) {
); );
services.value = data; services.value = data;
colMetrics.value = names; colMetrics.value = names;
metricTypes.value = metricTypesArr;
metricConfig.value = metricConfigArr; metricConfig.value = metricConfigArr;
// console.log(metricConfigArr);
return; return;
} }
services.value = currentServices; services.value = currentServices;
@ -283,6 +290,7 @@ watch(
if (JSON.stringify(data) === JSON.stringify(old)) { if (JSON.stringify(data) === JSON.stringify(old)) {
return; return;
} }
metricConfig.value = data;
queryServiceMetrics(services.value); queryServiceMetrics(services.value);
} }
); );

13
src/views/dashboard/graphs/components/ColumnGraph.vue
View File

@ -95,13 +95,12 @@ import Card from "../Card.vue";
const props = defineProps({ const props = defineProps({
colMetrics: { type: Object }, colMetrics: { type: Object },
config: { config: {
type: Object as PropType< type: Object as PropType<{
{ i: string;
i: string; metrics: string[];
metrics: string[]; metricTypes: string[];
metricTypes: string[]; metricConfig: MetricConfigOpt[];
} & { metricConfig: MetricConfigOpt[] } }>,
>,
default: () => ({}), default: () => ({}),
}, },
intervalTime: { type: Array as PropType<string[]>, default: () => [] }, intervalTime: { type: Array as PropType<string[]>, default: () => [] },