mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-05-12 15:52:57 +00:00
revert: remove settings
This commit is contained in:
Fine
parent
01a62848b6
commit
eeb41cffe4
@ -1,140 +0,0 @@
|
|||||||
<!-- Licensed to the Apache Software Foundation (ASF) under one or more
|
|
||||||
contributor license agreements. See the NOTICE file distributed with
|
|
||||||
this work for additional information regarding copyright ownership.
|
|
||||||
The ASF licenses this file to You under the Apache License, Version 2.0
|
|
||||||
(the "License"); you may not use this file except in compliance with
|
|
||||||
the License. You may obtain a copy of the License at
|
|
||||||
|
|
||||||
http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
|
|
||||||
Unless required by applicable law or agreed to in writing, software
|
|
||||||
distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
See the License for the specific language governing permissions and
|
|
||||||
limitations under the License. -->
|
|
||||||
<template>
|
|
||||||
<div class="hierarchy-services-settings">
|
|
||||||
<h5 class="title">{{ t("hierarchyServicesSettings") }}</h5>
|
|
||||||
<div class="label">{{ t("layer") }}</div>
|
|
||||||
<Selector
|
|
||||||
:value="currentConfig.layer || ''"
|
|
||||||
:options="layers"
|
|
||||||
size="small"
|
|
||||||
placeholder="Please select a layer"
|
|
||||||
@change="changeLayer"
|
|
||||||
class="inputs"
|
|
||||||
/>
|
|
||||||
<div class="label mb-5" v-if="currentConfig.layer">
|
|
||||||
<span>{{ t("nodeMetrics") }}</span>
|
|
||||||
<el-popover placement="left" :width="400" trigger="click">
|
|
||||||
<template #reference>
|
|
||||||
<span>
|
|
||||||
<Icon class="cp ml-5" iconName="mode_edit" size="middle" />
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
<Metrics :type="'hierarchyServicesConfig'" :layer="currentConfig.layer" @update="updateSettings" />
|
|
||||||
</el-popover>
|
|
||||||
</div>
|
|
||||||
<div v-if="currentConfig.layer">
|
|
||||||
<Tags
|
|
||||||
:tags="currentConfig.nodeExpressions || []"
|
|
||||||
:vertical="true"
|
|
||||||
:text="t('addExpressions')"
|
|
||||||
@change="(param) => changeNodeExpressions(param)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { onMounted, ref, reactive } from "vue";
|
|
||||||
import { useI18n } from "vue-i18n";
|
|
||||||
import { ElMessage } from "element-plus";
|
|
||||||
import type { HierarchyServicesConfig, MetricConfigOpt } from "@/types/dashboard";
|
|
||||||
import type { Option } from "@/types/app";
|
|
||||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
|
||||||
import { useTopologyStore } from "@/store/modules/topology";
|
|
||||||
import { useSelectorStore } from "@/store/modules/selectors";
|
|
||||||
import Metrics from "./Metrics.vue";
|
|
||||||
|
|
||||||
const emits = defineEmits(["update"]);
|
|
||||||
const { t } = useI18n();
|
|
||||||
const dashboardStore = useDashboardStore();
|
|
||||||
const topologyStore = useTopologyStore();
|
|
||||||
const selectorStore = useSelectorStore();
|
|
||||||
const hierarchyServicesConfig = dashboardStore.selectedGrid.hierarchyServicesConfig || [];
|
|
||||||
const currentConfig = reactive<HierarchyServicesConfig>(
|
|
||||||
hierarchyServicesConfig[0] || { layer: dashboardStore.layerId, nodeExpressions: [] },
|
|
||||||
);
|
|
||||||
const layers = ref<Option[]>([]);
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
setLayers();
|
|
||||||
});
|
|
||||||
function changeLayer(opt: Option[]) {
|
|
||||||
const hierarchyServicesConfig = dashboardStore.selectedGrid.hierarchyServicesConfig || [];
|
|
||||||
const layer = opt[0].value;
|
|
||||||
const config = hierarchyServicesConfig.find((d: HierarchyServicesConfig) => d.layer === layer) || {};
|
|
||||||
currentConfig.layer = layer;
|
|
||||||
currentConfig.nodeExpressions = config.nodeExpressions || [];
|
|
||||||
}
|
|
||||||
|
|
||||||
function changeNodeExpressions(param: string[]) {
|
|
||||||
currentConfig.nodeExpressions = param;
|
|
||||||
updateSettings();
|
|
||||||
if (!param.length) {
|
|
||||||
topologyStore.setHierarchyServiceNode({}, currentConfig.layer);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
topologyStore.queryHierarchyNodeExpressions(param, currentConfig.layer);
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateSettings(metricConfig?: { [key: string]: MetricConfigOpt[] }) {
|
|
||||||
if (metricConfig) {
|
|
||||||
currentConfig.expressionsConfig = Object.values(metricConfig)[0];
|
|
||||||
}
|
|
||||||
const config = dashboardStore.selectedGrid.hierarchyServicesConfig || [];
|
|
||||||
const index = config.findIndex((d: HierarchyServicesConfig) => d.layer === currentConfig.layer);
|
|
||||||
if (index < 0) {
|
|
||||||
config.push(JSON.parse(JSON.stringify(currentConfig)));
|
|
||||||
} else {
|
|
||||||
config[index] = JSON.parse(JSON.stringify(currentConfig));
|
|
||||||
}
|
|
||||||
|
|
||||||
const hierarchyServicesConfig = config.filter((d: HierarchyServicesConfig) => d.layer && d.nodeExpressions.length);
|
|
||||||
const param = {
|
|
||||||
...dashboardStore.selectedGrid,
|
|
||||||
hierarchyServicesConfig,
|
|
||||||
};
|
|
||||||
|
|
||||||
dashboardStore.selectWidget(param);
|
|
||||||
dashboardStore.setConfigs(param);
|
|
||||||
emits("update", param);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function setLayers() {
|
|
||||||
const resp = await selectorStore.fetchLayers();
|
|
||||||
if (resp.errors) {
|
|
||||||
ElMessage.error(resp.errors);
|
|
||||||
}
|
|
||||||
layers.value = resp.data.layers.map((d: string) => {
|
|
||||||
return { label: d, value: d };
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.title {
|
|
||||||
color: var(--sw-topology-color);
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
font-size: $font-size-smaller;
|
|
||||||
margin-top: 10px;
|
|
||||||
color: var(--sw-topology-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.inputs {
|
|
||||||
margin-top: 8px;
|
|
||||||
width: 250px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -76,14 +76,6 @@ limitations under the License. -->
|
|||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
<div id="popover"></div>
|
<div id="popover"></div>
|
||||||
<div class="tool">
|
|
||||||
<span class="switch-icon ml-5" title="Settings" @click="showConfig" v-if="dashboardStore.editMode">
|
|
||||||
<Icon size="middle" iconName="settings" />
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="hierarchy-settings" v-if="showSetting && dashboardStore.editMode">
|
|
||||||
<hierarchy-settings @update="updateSettings" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
@ -103,7 +95,6 @@ limitations under the License. -->
|
|||||||
import icons from "@/assets/img/icons";
|
import icons from "@/assets/img/icons";
|
||||||
import { layout, changeNode, computeLevels } from "./utils/layout";
|
import { layout, changeNode, computeLevels } from "./utils/layout";
|
||||||
import zoom from "@/views/dashboard/related/components/utils/zoom";
|
import zoom from "@/views/dashboard/related/components/utils/zoom";
|
||||||
import HierarchySettings from "../config/HierarchySettings.vue";
|
|
||||||
import type { HierarchyServicesConfig } from "@/types/dashboard";
|
import type { HierarchyServicesConfig } from "@/types/dashboard";
|
||||||
import getDashboard from "@/hooks/useDashboardsSession";
|
import getDashboard from "@/hooks/useDashboardsSession";
|
||||||
|
|
||||||
@ -372,45 +363,6 @@ limitations under the License. -->
|
|||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.operations-list {
|
|
||||||
position: absolute;
|
|
||||||
color: $font-color;
|
|
||||||
cursor: pointer;
|
|
||||||
border: var(--sw-topology-border);
|
|
||||||
border-radius: 3px;
|
|
||||||
background-color: $theme-background;
|
|
||||||
padding: 10px 0;
|
|
||||||
|
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
height: 30px;
|
|
||||||
line-height: 30px;
|
|
||||||
text-align: left;
|
|
||||||
padding: 0 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span:hover {
|
|
||||||
color: $active-color;
|
|
||||||
background-color: $popper-hover-bg-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tool {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.switch-icon {
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.5ms linear;
|
|
||||||
background: var(--sw-topology-switch-icon);
|
|
||||||
color: $text-color;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 1px;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.topo-line {
|
.topo-line {
|
||||||
stroke-linecap: round;
|
stroke-linecap: round;
|
||||||
stroke-width: 1px;
|
stroke-width: 1px;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user