mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-10-14 20:01:28 +00:00
build: migrate the build tool from vue-cli to vite4 (#208)
This commit is contained in:
Fine0830
@@ -15,12 +15,7 @@ limitations under the License. -->
|
||||
<template>
|
||||
<div class="table">
|
||||
<div class="search">
|
||||
<el-input
|
||||
v-model="searchText"
|
||||
placeholder="Please input instance name"
|
||||
@change="searchList"
|
||||
class="inputs"
|
||||
>
|
||||
<el-input v-model="searchText" placeholder="Please input instance name" @change="searchList" class="inputs">
|
||||
<template #append>
|
||||
<el-button class="btn" @click="searchList">
|
||||
<Icon size="sm" iconName="search" />
|
||||
@@ -32,11 +27,7 @@ limitations under the License. -->
|
||||
<el-table v-loading="chartLoading" :data="instances" style="width: 100%">
|
||||
<el-table-column label="Service Instances" fixed min-width="320">
|
||||
<template #default="scope">
|
||||
<span
|
||||
class="link"
|
||||
@click="clickInstance(scope)"
|
||||
:style="{ fontSize: `${config.fontSize}px` }"
|
||||
>
|
||||
<span class="link" @click="clickInstance(scope)" :style="{ fontSize: `${config.fontSize}px` }">
|
||||
{{ scope.row.label }}
|
||||
</span>
|
||||
</template>
|
||||
@@ -87,174 +78,153 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ElMessage } from "element-plus";
|
||||
import type { PropType } from "vue";
|
||||
import { useSelectorStore } from "@/store/modules/selectors";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { InstanceListConfig } from "@/types/dashboard";
|
||||
import { Instance } from "@/types/selector";
|
||||
import {
|
||||
useQueryPodsMetrics,
|
||||
usePodsSource,
|
||||
} from "@/hooks/useMetricsProcessor";
|
||||
import { EntityType } from "../data";
|
||||
import router from "@/router";
|
||||
import getDashboard from "@/hooks/useDashboardsSession";
|
||||
import { MetricConfigOpt } from "@/types/dashboard";
|
||||
import ColumnGraph from "./components/ColumnGraph.vue";
|
||||
import { ref, watch } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ElMessage } from "element-plus";
|
||||
import type { PropType } from "vue";
|
||||
import { useSelectorStore } from "@/store/modules/selectors";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import type { InstanceListConfig } from "@/types/dashboard";
|
||||
import type { Instance } from "@/types/selector";
|
||||
import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useMetricsProcessor";
|
||||
import { EntityType } from "../data";
|
||||
import router from "@/router";
|
||||
import getDashboard from "@/hooks/useDashboardsSession";
|
||||
import type { MetricConfigOpt } from "@/types/dashboard";
|
||||
import ColumnGraph from "./components/ColumnGraph.vue";
|
||||
|
||||
/*global defineProps */
|
||||
const props = defineProps({
|
||||
config: {
|
||||
type: Object as PropType<
|
||||
InstanceListConfig & {
|
||||
i: string;
|
||||
metrics: string[];
|
||||
metricTypes: string[];
|
||||
isEdit: boolean;
|
||||
} & { metricConfig: MetricConfigOpt[] }
|
||||
>,
|
||||
default: () => ({
|
||||
dashboardName: "",
|
||||
fontSize: 12,
|
||||
i: "",
|
||||
metrics: [],
|
||||
metricTypes: [],
|
||||
}),
|
||||
},
|
||||
intervalTime: { type: Array as PropType<string[]>, default: () => [] },
|
||||
needQuery: { type: Boolean, default: false },
|
||||
});
|
||||
const { t } = useI18n();
|
||||
const selectorStore = useSelectorStore();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const chartLoading = ref<boolean>(false);
|
||||
const instances = ref<Instance[]>([]); // current instances
|
||||
const pageSize = 10;
|
||||
const searchText = ref<string>("");
|
||||
const colMetrics = ref<string[]>([]);
|
||||
const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []);
|
||||
const metricTypes = ref<string[]>(props.config.metricTypes || []);
|
||||
if (props.needQuery) {
|
||||
queryInstance();
|
||||
}
|
||||
|
||||
async function queryInstance() {
|
||||
chartLoading.value = true;
|
||||
const resp = await selectorStore.getServiceInstances();
|
||||
|
||||
chartLoading.value = false;
|
||||
if (resp && resp.errors) {
|
||||
ElMessage.error(resp.errors);
|
||||
instances.value = [];
|
||||
return;
|
||||
}
|
||||
instances.value = selectorStore.pods.filter(
|
||||
(d: unknown, index: number) => index < pageSize
|
||||
);
|
||||
queryInstanceMetrics(instances.value);
|
||||
}
|
||||
|
||||
async function queryInstanceMetrics(currentInstances: Instance[]) {
|
||||
if (!currentInstances.length) {
|
||||
return;
|
||||
}
|
||||
const metrics = props.config.metrics || [];
|
||||
const types = props.config.metricTypes || [];
|
||||
|
||||
if (metrics.length && metrics[0] && types.length && types[0]) {
|
||||
const params = await useQueryPodsMetrics(
|
||||
currentInstances,
|
||||
props.config,
|
||||
EntityType[3].value
|
||||
);
|
||||
const json = await dashboardStore.fetchMetricValue(params);
|
||||
|
||||
if (json.errors) {
|
||||
ElMessage.error(json.errors);
|
||||
return;
|
||||
}
|
||||
const { data, names, metricConfigArr, metricTypesArr } = usePodsSource(
|
||||
currentInstances,
|
||||
json,
|
||||
{
|
||||
...props.config,
|
||||
metricConfig: metricConfig.value,
|
||||
}
|
||||
);
|
||||
instances.value = data;
|
||||
colMetrics.value = names;
|
||||
metricTypes.value = metricTypesArr;
|
||||
metricConfig.value = metricConfigArr;
|
||||
return;
|
||||
}
|
||||
instances.value = currentInstances;
|
||||
}
|
||||
|
||||
function clickInstance(scope: any) {
|
||||
const { dashboard } = getDashboard({
|
||||
name: props.config.dashboardName,
|
||||
layer: dashboardStore.layerId,
|
||||
entity: EntityType[3].value,
|
||||
/*global defineProps */
|
||||
const props = defineProps({
|
||||
config: {
|
||||
type: Object as PropType<
|
||||
InstanceListConfig & {
|
||||
i: string;
|
||||
metrics: string[];
|
||||
metricTypes: string[];
|
||||
isEdit: boolean;
|
||||
} & { metricConfig: MetricConfigOpt[] }
|
||||
>,
|
||||
default: () => ({
|
||||
dashboardName: "",
|
||||
fontSize: 12,
|
||||
i: "",
|
||||
metrics: [],
|
||||
metricTypes: [],
|
||||
}),
|
||||
},
|
||||
intervalTime: { type: Array as PropType<string[]>, default: () => [] },
|
||||
needQuery: { type: Boolean, default: false },
|
||||
});
|
||||
if (!dashboard) {
|
||||
ElMessage.error("No this dashboard");
|
||||
return;
|
||||
}
|
||||
router.push(
|
||||
`/dashboard/${dashboard.layer}/${dashboard.entity}/${
|
||||
selectorStore.currentService.id
|
||||
}/${scope.row.id}/${dashboard.name.split(" ").join("-")}`
|
||||
);
|
||||
}
|
||||
|
||||
function changePage(pageIndex: number) {
|
||||
instances.value = selectorStore.pods.filter((d: unknown, index: number) => {
|
||||
if (index >= (pageIndex - 1) * pageSize && index < pageIndex * pageSize) {
|
||||
return d;
|
||||
}
|
||||
});
|
||||
queryInstanceMetrics(instances.value);
|
||||
}
|
||||
|
||||
function searchList() {
|
||||
const searchInstances = selectorStore.pods.filter((d: { label: string }) =>
|
||||
d.label.includes(searchText.value)
|
||||
);
|
||||
instances.value = searchInstances.filter(
|
||||
(d: unknown, index: number) => index < pageSize
|
||||
);
|
||||
queryInstanceMetrics(instances.value);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => [
|
||||
...(props.config.metricTypes || []),
|
||||
...(props.config.metrics || []),
|
||||
...(props.config.metricConfig || []),
|
||||
],
|
||||
(data, old) => {
|
||||
if (JSON.stringify(data) === JSON.stringify(old)) {
|
||||
return;
|
||||
}
|
||||
metricConfig.value = props.config.metricConfig;
|
||||
queryInstanceMetrics(instances.value);
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => selectorStore.currentService,
|
||||
() => {
|
||||
const { t } = useI18n();
|
||||
const selectorStore = useSelectorStore();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const chartLoading = ref<boolean>(false);
|
||||
const instances = ref<Instance[]>([]); // current instances
|
||||
const pageSize = 10;
|
||||
const searchText = ref<string>("");
|
||||
const colMetrics = ref<string[]>([]);
|
||||
const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []);
|
||||
const metricTypes = ref<string[]>(props.config.metricTypes || []);
|
||||
if (props.needQuery) {
|
||||
queryInstance();
|
||||
}
|
||||
);
|
||||
|
||||
async function queryInstance() {
|
||||
chartLoading.value = true;
|
||||
const resp = await selectorStore.getServiceInstances();
|
||||
|
||||
chartLoading.value = false;
|
||||
if (resp && resp.errors) {
|
||||
ElMessage.error(resp.errors);
|
||||
instances.value = [];
|
||||
return;
|
||||
}
|
||||
instances.value = selectorStore.pods.filter((d: unknown, index: number) => index < pageSize);
|
||||
queryInstanceMetrics(instances.value);
|
||||
}
|
||||
|
||||
async function queryInstanceMetrics(currentInstances: Instance[]) {
|
||||
if (!currentInstances.length) {
|
||||
return;
|
||||
}
|
||||
const metrics = props.config.metrics || [];
|
||||
const types = props.config.metricTypes || [];
|
||||
|
||||
if (metrics.length && metrics[0] && types.length && types[0]) {
|
||||
const params = await useQueryPodsMetrics(currentInstances, props.config, EntityType[3].value);
|
||||
const json = await dashboardStore.fetchMetricValue(params);
|
||||
|
||||
if (json.errors) {
|
||||
ElMessage.error(json.errors);
|
||||
return;
|
||||
}
|
||||
const { data, names, metricConfigArr, metricTypesArr } = usePodsSource(currentInstances, json, {
|
||||
...props.config,
|
||||
metricConfig: metricConfig.value,
|
||||
});
|
||||
instances.value = data;
|
||||
colMetrics.value = names;
|
||||
metricTypes.value = metricTypesArr;
|
||||
metricConfig.value = metricConfigArr;
|
||||
return;
|
||||
}
|
||||
instances.value = currentInstances;
|
||||
}
|
||||
|
||||
function clickInstance(scope: any) {
|
||||
const { dashboard } = getDashboard({
|
||||
name: props.config.dashboardName,
|
||||
layer: dashboardStore.layerId,
|
||||
entity: EntityType[3].value,
|
||||
});
|
||||
if (!dashboard) {
|
||||
ElMessage.error("No this dashboard");
|
||||
return;
|
||||
}
|
||||
router.push(
|
||||
`/dashboard/${dashboard.layer}/${dashboard.entity}/${selectorStore.currentService.id}/${
|
||||
scope.row.id
|
||||
}/${dashboard.name.split(" ").join("-")}`,
|
||||
);
|
||||
}
|
||||
|
||||
function changePage(pageIndex: number) {
|
||||
instances.value = selectorStore.pods.filter((d: unknown, index: number) => {
|
||||
if (index >= (pageIndex - 1) * pageSize && index < pageIndex * pageSize) {
|
||||
return d;
|
||||
}
|
||||
});
|
||||
queryInstanceMetrics(instances.value);
|
||||
}
|
||||
|
||||
function searchList() {
|
||||
const searchInstances = selectorStore.pods.filter((d: { label: string }) => d.label.includes(searchText.value));
|
||||
instances.value = searchInstances.filter((d: unknown, index: number) => index < pageSize);
|
||||
queryInstanceMetrics(instances.value);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => [...(props.config.metricTypes || []), ...(props.config.metrics || []), ...(props.config.metricConfig || [])],
|
||||
(data, old) => {
|
||||
if (JSON.stringify(data) === JSON.stringify(old)) {
|
||||
return;
|
||||
}
|
||||
metricConfig.value = props.config.metricConfig;
|
||||
queryInstanceMetrics(instances.value);
|
||||
},
|
||||
);
|
||||
watch(
|
||||
() => selectorStore.currentService,
|
||||
() => {
|
||||
queryInstance();
|
||||
},
|
||||
);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./style.scss";
|
||||
@import "./style.scss";
|
||||
|
||||
.attributes {
|
||||
max-height: 400px;
|
||||
overflow: auto;
|
||||
}
|
||||
.attributes {
|
||||
max-height: 400px;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user