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

update table

Browse Source
This commit is contained in:
Qiuxia Fan 2022-03-23 18:05:45 +08:00
parent 6b8491c542
commit 107a3d85dd
4 changed files with 17 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/store/modules/dashboard.ts
View File

@ -227,6 +227,7 @@ export const dashboardStore = defineStore({
this.showConfig = show;
},
selectWidget(item: Nullable<LayoutConfig>) {
console.log(item);
this.selectedGrid = item;
},
setLayer(id: string) {

6
src/views/dashboard/configuration/widget/MetricOptions.vue
View File

@ -144,10 +144,14 @@ async function setMetricType() {
}
states.metricList = (json.data.metrics || []).filter(
(d: { catalog: string; type: string }) => {
if (states.isList || graph.type === "Table") {
if (states.isList) {
if (d.type === MetricsType.REGULAR_VALUE) {
return d;
}
} else if (graph.type === "Table") {
if (d.type === MetricsType.LABELED_VALUE) {
return d;
}
} else {
return d;
}

6
src/views/dashboard/configuration/widget/StandardOptions.vue
View File

@ -33,7 +33,7 @@ limitations under the License. -->
@change="changeStandardOpt({ sortOrder })"
/>
</div>
<div class="item" v-show="percentile">
<div class="item">
<span class="label">{{ t("labels") }}</span>
<el-input
class="input"
@ -43,7 +43,7 @@ limitations under the License. -->
@change="changeStandardOpt"
/>
</div>
<div class="item" v-show="percentile">
<div class="item">
<span class="label">{{ t("labelsIndex") }}</span>
<el-input
class="input"
@ -134,7 +134,7 @@ const emit = defineEmits(["update", "loading"]);
const dashboardStore = useDashboardStore();
const { selectedGrid } = dashboardStore;
const percentile = ref<boolean>(
selectedGrid.metricTypes.includes("readLabeledMetricsValues")
dashboardStore.selectedGrid.metricTypes.includes("readLabeledMetricsValues")
);
const sortOrder = ref<string>(selectedGrid.standard.sortOrder || "DES");

12
src/views/dashboard/graphs/Table.vue
View File

@ -21,13 +21,13 @@ limitations under the License. -->
:style="`width: ${nameWidth + initWidth}px`"
>
<div class="name" :style="`width: ${nameWidth}px`">
{{ config.graph.tableHeaderCol1 || t("name") }}
{{ config.tableHeaderCol1 || t("name") }}
<i class="r cp" ref="draggerName">
<Icon iconName="settings_ethernet" size="middle" />
</i>
</div>
<div class="value-col" v-if="showTableValues">
{{ config.graph.tableHeaderCol2 || t("value") }}
{{ config.tableHeaderCol2 || t("value") }}
</div>
</div>
<div
@ -60,11 +60,9 @@ const props = defineProps({
},
config: {
type: Object as PropType<{
graph: {
showTableValues: boolean;
tableHeaderCol2: string;
tableHeaderCol1: string;
};
metricTypes: string[];
}>,
default: () => ({ showTableValues: true }),
@ -77,15 +75,15 @@ const chartTable = ref<Nullable<HTMLElement>>(null);
const initWidth = ref<number>(0);
const nameWidth = ref<number>(0);
const draggerName = ref<Nullable<HTMLElement>>(null);
const showTableValues = ref<boolean>(props.config.graph.showTableValues);
const showTableValues = ref<boolean>(props.config.showTableValues || false);
onMounted(() => {
if (!chartTable.value) {
return;
}
const width = props.config.graph.showTableValues
const width = props.config.showTableValues
? chartTable.value.offsetWidth / 2
: chartTable.value.offsetWidth;
initWidth.value = props.config.graph.showTableValues
initWidth.value = props.config.showTableValues
? chartTable.value.offsetWidth / 2
: 0;
nameWidth.value = width - 5;