github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-07-18 11:05:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

add decorations

Browse Source
This commit is contained in:
Fine 2024-10-15 09:58:34 +08:00
parent cb6f8bc4bb
commit f38e7a1a48
1 changed files with 29 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/views/dashboard/configuration/widget/graph-styles/components/ContentDecorations.vue
View File

@ -23,7 +23,13 @@ limitations under the License. -->
</div> </div>
<div v-if="index === keys.length - 1"> <div v-if="index === keys.length - 1">
<Icon class="cp mr-5" iconName="add_circle_outlinecontrol_point" size="middle" @click="addDecoration" /> <Icon class="cp mr-5" iconName="add_circle_outlinecontrol_point" size="middle" @click="addDecoration" />
<Icon class="cp" iconName="remove_circle_outline" size="middle" @click="deleteDecoration(index)" /> <Icon
v-if="index !== 0"
class="cp"
iconName="remove_circle_outline"
size="middle"
@click="deleteDecoration(index)"
/>
</div> </div>
</div> </div>
</template> </template>
@ -33,16 +39,26 @@ limitations under the License. -->
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
const graph = dashboardStore.selectedGrid.graph || {}; const graph = dashboardStore.selectedGrid.graph || {};
const decorations = ref<{ [key: string]: string }>(graph.contentDecorations || { value: "content" }); const decorations = ref<{ [key: string]: string }>(graph.decorations || {});
const keys = ref<string[]>(graph.contentDecorations ? Object.keys(graph.contentDecorations) : [""]); const keys = ref<string[]>(graph.decorations ? Object.keys(graph.decorations) : [""]);
function changeKeys(event: any, index: number) { function changeKeys(event: any, index: number) {
const params = event.target.textContent || ""; const params = event.target.textContent || "";
decorations.value[params] = ""; const list = Object.keys(decorations.value);
if (!list[index]) {
return;
}
if (params) {
decorations.value[params] = decorations.value[list[index]];
}
delete decorations.value[list[index]];
keys.value = Object.keys(decorations.value);
updateConfig({ decorations: decorations.value });
} }
function changeValues(event: any, key: string) { function changeValues(event: any, key: string) {
decorations.value[key] = event.target.textContent || ""; decorations.value[key] = event.target.textContent || "";
updateConfig({ decorations: decorations.value });
} }
function addDecoration() { function addDecoration() {
@ -58,6 +74,15 @@ limitations under the License. -->
} }
delete decorations.value[keys.value[index]]; delete decorations.value[keys.value[index]];
keys.value.splice(index, 1); keys.value.splice(index, 1);
updateConfig({ decorations: decorations.value });
}
function updateConfig(param: { [key: string]: unknown }) {
const graph = {
...dashboardStore.selectedGrid.graph,
...param,
};
dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>