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

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

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

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

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