github/skywalking-booster-ui
3
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-10-15 04:09:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: View data value related dashboards in TopList widgets (#425)

Browse Source
This commit is contained in:
Fine0830
2024-11-05 11:21:08 +08:00
committed by GitHub
parent 224e761d70
commit 14fa5d65b6
11 changed files with 91 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/views/dashboard/graphs/TopList.vue
View File

@@ -35,6 +35,9 @@ limitations under the License. -->
<div class="operation" @click="viewTrace(i)" v-show="refIdType === RefIdTypes[0].value">
<span>{{ t("viewTrace") }}</span>
</div>
<div class="operation" @click="viewDashboard(i)">
<span>{{ t("viewValueDashboard") }}</span>
</div>
</el-popover>
</div>
<el-progress
@@ -61,12 +64,14 @@ limitations under the License. -->
import type { PropType } from "vue";
import { useI18n } from "vue-i18n";
import { computed, ref } from "vue";
import router from "@/router";
import { useDashboardStore } from "@/store/modules/dashboard";
import copy from "@/utils/copy";
import { TextColors } from "@/views/dashboard/data";
import { TextColors, MetricCatalog } from "@/views/dashboard/data";
import Trace from "@/views/dashboard/related/trace/Index.vue";
import { WidgetType, QueryOrders, Status, RefIdTypes, ExpressionResultType } from "@/views/dashboard/data";
/*global defineProps */
/*global defineProps, Recordable*/
const props = defineProps({
data: {
type: Object as PropType<{
@@ -80,12 +85,14 @@ limitations under the License. -->
expressions: string[];
typesOfMQE: string[];
relatedTrace: any;
valueRelatedDashboard: string;
}>,
default: () => ({ color: "purple" }),
},
intervalTime: { type: Array as PropType<string[]>, default: () => [] },
});
const { t } = useI18n();
const dashboardStore = useDashboardStore();
const showTrace = ref<boolean>(false);
const traceOptions = ref<{ type: string; filters?: unknown }>({
type: WidgetType.Trace,
@@ -122,6 +129,23 @@ limitations under the License. -->
};
showTrace.value = true;
}
function viewDashboard(item: Recordable) {
const { owner } = item;
let path;
if (owner.scope === MetricCatalog.SERVICE) {
path = `/dashboard/${dashboardStore.layerId}/${owner.scope}/${owner.serviceID}/${props.config.valueRelatedDashboard}`;
}
if (owner.scope === MetricCatalog.SERVICE_INSTANCE) {
path = `/dashboard/${dashboardStore.layerId}/${owner.scope}/${owner.serviceID}/${owner.serviceInstanceID}/${props.config.valueRelatedDashboard}`;
}
if (owner.scope === MetricCatalog.ENDPOINT) {
path = `/dashboard/${dashboardStore.layerId}/${owner.scope}/${owner.serviceID}/${owner.endpointID}/${props.config.valueRelatedDashboard}`;
}
if (!path) {
return;
}
router.push(path);
}
</script>
<style lang="scss" scoped>
.top-list {
@@ -187,11 +211,10 @@ limitations under the License. -->
}
.operation {
padding: 5px 0;
padding: 5px;
color: $font-color;
cursor: pointer;
position: relative;
text-align: center;
font-size: $font-size-smaller;
&:hover {