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

update config

Browse Source
This commit is contained in:
Qiuxia Fan 2022-03-30 17:18:57 +08:00
parent 767c92c60d
commit ce54c8218b
15 changed files with 65 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/locales/lang/zh.ts
View File

@ -20,7 +20,7 @@ const msg = {
traces: "跟踪",
metrics: "指标",
serviceMesh: "服务网格",
infrastructure: "基础结构",
infrastructure: "基础设施",
virtualMachine: "虚拟机",
dashboardNew: "新建仪表板",
dashboardHome: "仪表盘首页",
@ -112,7 +112,7 @@ const msg = {
showGroup: "显示分组",
noWidget: "请添加组件",
rename: "重命名",
selfObservability: "自观性",
selfObservability: "自观测性",
satellite: "Satellite",
skyWalkingServer: "SkyWalking服务",
functions: "Functions",

2
src/views/dashboard/configuration/Text.vue
View File

@ -92,7 +92,7 @@ const { t } = useI18n();
const dashboardStore = useDashboardStore();
const originConfig = dashboardStore.selectedGrid;
const graph = originConfig.graph || {};
const url = ref(originConfig.graph.url || "");
const url = ref(graph.url || "");
const backgroundColor = ref(graph.backgroundColor || "green");
const fontColor = ref(graph.fontColor || "white");
const content = ref<string>(graph.content || "");

8
src/views/dashboard/configuration/widget/graph-styles/Area.vue
View File

@ -34,16 +34,16 @@ import { useDashboardStore } from "@/store/modules/dashboard";
const { t } = useI18n();
const dashboardStore = useDashboardStore();
const { selectedGrid } = dashboardStore;
const graph = dashboardStore.selectedGrid.graph || {};
const opacity = ref(selectedGrid.graph.opacity);
const opacity = ref(graph.opacity);
function updateConfig(param: { [key: string]: unknown }) {
const graph = {
...selectedGrid.graph,
...dashboardStore.selectedGrid.graph,
...param,
};
dashboardStore.selectWidget({ ...selectedGrid, graph });
dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
}
</script>
<style lang="scss" scoped>

8
src/views/dashboard/configuration/widget/graph-styles/Bar.vue
View File

@ -30,15 +30,15 @@ import { useI18n } from "vue-i18n";
const { t } = useI18n();
const dashboardStore = useDashboardStore();
const { selectedGrid } = dashboardStore;
const showBackground = ref(selectedGrid.graph.showBackground || false);
const graph = dashboardStore.selectedGrid.graph;
const showBackground = ref(graph.showBackground || false);
function changeConfig(param: { [key: string]: unknown }) {
const graph = {
...selectedGrid.graph,
...dashboardStore.selectedGrid.graph,
...param,
};
dashboardStore.selectWidget({ ...selectedGrid, graph });
dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
}
</script>
<style lang="scss" scoped>

6
src/views/dashboard/configuration/widget/graph-styles/Card.vue
View File

@ -43,9 +43,9 @@ import { useDashboardStore } from "@/store/modules/dashboard";
const { t } = useI18n();
const dashboardStore = useDashboardStore();
const { selectedGrid } = dashboardStore;
const fontSize = ref(selectedGrid.graph.fontSize);
const showUnit = ref<boolean>(selectedGrid.graph.showUnit);
const graph = dashboardStore.selectedGrid.graph || {};
const fontSize = ref(graph.fontSize);
const showUnit = ref<boolean>(graph.showUnit);
function updateConfig(param: { [key: string]: unknown }) {
const graph = {

8
src/views/dashboard/configuration/widget/graph-styles/EndpointList.vue
View File

@ -33,17 +33,17 @@ import { useI18n } from "vue-i18n";
import { useDashboardStore } from "@/store/modules/dashboard";
const dashboardStore = useDashboardStore();
const { selectedGrid } = dashboardStore;
const graph = dashboardStore.selectedGrid.graph;
const { t } = useI18n();
const fontSize = ref(selectedGrid.graph.fontSize);
const fontSize = ref(graph.fontSize);
function updateConfig(param: { [key: string]: unknown }) {
const graph = {
...selectedGrid.graph,
...dashboardStore.selectedGrid.graph,
...param,
};
dashboardStore.selectWidget({ ...selectedGrid, graph });
dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
}
</script>
<style lang="scss" scoped>

8
src/views/dashboard/configuration/widget/graph-styles/InstanceList.vue
View File

@ -34,15 +34,15 @@ import { useDashboardStore } from "@/store/modules/dashboard";
const { t } = useI18n();
const dashboardStore = useDashboardStore();
const { selectedGrid } = dashboardStore;
const fontSize = ref(selectedGrid.graph.fontSize);
const graph = dashboardStore.selectedGrid.graph;
const fontSize = ref(graph.fontSize);
function updateConfig(param: { [key: string]: unknown }) {
const graph = {
...selectedGrid.graph,
...dashboardStore.selectedGrid.graph,
...param,
};
dashboardStore.selectWidget({ ...selectedGrid, graph });
dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
}
</script>
<style lang="scss" scoped>

22
src/views/dashboard/configuration/widget/graph-styles/Line.vue
View File

@ -16,19 +16,19 @@ limitations under the License. -->
<div>
<span class="label">{{ t("showXAxis") }}</span>
<el-switch
v-model="selectedGrid.graph.showXAxis"
v-model="graph.showXAxis"
active-text="Yes"
inactive-text="No"
@change="updateConfig({ showXAxis: selectedGrid.graph.showXAxis })"
@change="updateConfig({ showXAxis: graph.showXAxis })"
/>
</div>
<div>
<span class="label">{{ t("showYAxis") }}</span>
<el-switch
v-model="selectedGrid.graph.showYAxis"
v-model="graph.showYAxis"
active-text="Yes"
inactive-text="No"
@change="updateConfig({ showYAxis: selectedGrid.graph.showYAxis })"
@change="updateConfig({ showYAxis: graph.showYAxis })"
/>
</div>
<div>
@ -60,23 +60,23 @@ limitations under the License. -->
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { ref, computed } from "vue";
import { useI18n } from "vue-i18n";
import { useDashboardStore } from "@/store/modules/dashboard";
const { t } = useI18n();
const dashboardStore = useDashboardStore();
const { selectedGrid } = dashboardStore;
const smooth = ref(selectedGrid.graph.smooth);
const showSymbol = ref(selectedGrid.graph.showSymbol);
const step = ref(selectedGrid.graph.step);
const graph = computed(() => dashboardStore.selectedGrid.graph || {});
const smooth = ref(graph.value.smooth);
const showSymbol = ref(graph.value.showSymbol);
const step = ref(graph.value.step);
function updateConfig(param: { [key: string]: unknown }) {
const graph = {
...selectedGrid.graph,
...dashboardStore.selectedGrid.graph,
...param,
};
dashboardStore.selectWidget({ ...selectedGrid, graph });
dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
}
</script>
<style lang="scss" scoped>

10
src/views/dashboard/configuration/widget/graph-styles/ServiceList.vue
View File

@ -16,10 +16,10 @@ limitations under the License. -->
<div class="item">
<span class="label">{{ t("showGroup") }}</span>
<el-switch
v-model="selectedGrid.graph.showGroup"
v-model="graph.showGroup"
active-text="Yes"
inactive-text="No"
@change="updateConfig({ showGroup: selectedGrid.graph.showGroup })"
@change="updateConfig({ showGroup: graph.showGroup })"
/>
</div>
<div class="item">
@ -37,14 +37,14 @@ limitations under the License. -->
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { ref, computed } from "vue";
import { useI18n } from "vue-i18n";
import { useDashboardStore } from "@/store/modules/dashboard";
const { t } = useI18n();
const dashboardStore = useDashboardStore();
const { selectedGrid } = dashboardStore;
const fontSize = ref(selectedGrid.graph.fontSize);
const graph = computed(() => dashboardStore.selectedGrid.graph || {});
const fontSize = ref(graph.value.fontSize);
function updateConfig(param: { [key: string]: unknown }) {
const { selectedGrid } = dashboardStore;

12
src/views/dashboard/configuration/widget/graph-styles/Table.vue
View File

@ -50,17 +50,17 @@ import { useDashboardStore } from "@/store/modules/dashboard";
const { t } = useI18n();
const dashboardStore = useDashboardStore();
const { selectedGrid } = dashboardStore;
const showTableValues = ref(selectedGrid.graph.showTableValues);
const tableHeaderCol1 = ref(selectedGrid.graph.tableHeaderCol1);
const tableHeaderCol2 = ref(selectedGrid.graph.tableHeaderCol2);
const graph = dashboardStore.selectedGrid.graph || {};
const showTableValues = ref(graph.showTableValues);
const tableHeaderCol1 = ref(graph.tableHeaderCol1);
const tableHeaderCol2 = ref(graph.tableHeaderCol2);
function updateConfig(param: { [key: string]: unknown }) {
const graph = {
...selectedGrid.graph,
...dashboardStore.selectedGrid.graph,
...param,
};
dashboardStore.selectWidget({ ...selectedGrid, graph });
dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
}
</script>
<style lang="scss" scoped>

4
src/views/dashboard/configuration/widget/graph-styles/TopList.vue
View File

@ -32,8 +32,8 @@ import { useDashboardStore } from "@/store/modules/dashboard";
const { t } = useI18n();
const dashboardStore = useDashboardStore();
const { selectedGrid } = dashboardStore;
const color = ref(selectedGrid.graph.color || "purple");
const graph = dashboardStore.selectedGrid.graph || {};
const color = ref(graph.color || "purple");
const Colors = [
{ label: "Purple", value: "purple" },
{

4
src/views/dashboard/controls/Tab.vue
View File

@ -83,8 +83,8 @@ limitations under the License. -->
v-model:layout="dashboardStore.currentTabItems"
:col-num="24"
:row-height="10"
:is-draggable="true"
:is-resizable="true"
:is-draggable="dashboardStore.editMode"
:is-resizable="dashboardStore.editMode"
@layout-updated="layoutUpdatedEvent"
>
<grid-item

16
src/views/dashboard/controls/Text.vue
View File

@ -36,21 +36,22 @@ limitations under the License. -->
</div>
<div
class="body"
:class="data.graph.textAlign === 'center' ? 'center' : ''"
:class="graph.textAlign === 'center' ? 'center' : ''"
:style="{
backgroundColor: TextColors[data.graph.backgroundColor],
color: TextColors[data.graph.fontColor],
fontSize: data.graph.fontSize + 'px',
textAlign: data.graph.textAlign,
backgroundColor: TextColors[graph.backgroundColor],
color: TextColors[graph.fontColor],
fontSize: graph.fontSize + 'px',
textAlign: graph.textAlign,
}"
>
<a :href="data.graph.url" target="_blank">
{{ data.graph.content }}
<a :href="graph.url" target="_blank">
{{ graph.content }}
</a>
</div>
</div>
</template>
<script lang="ts" setup>
import { computed } from "vue";
import type { PropType } from "vue";
import { useI18n } from "vue-i18n";
import { useDashboardStore } from "@/store/modules/dashboard";
@ -65,6 +66,7 @@ const props = defineProps({
activeIndex: { type: String, default: "" },
});
const { t } = useI18n();
const graph = computed(() => props.data.graph || {});
const dashboardStore = useDashboardStore();
function removeTopo() {

4
src/views/dashboard/panel/Layout.vue
View File

@ -17,8 +17,8 @@ limitations under the License. -->
v-model:layout="dashboardStore.layout"
:col-num="24"
:row-height="10"
:is-draggable="true"
:is-resizable="true"
:is-draggable="dashboardStore.editMode"
:is-resizable="dashboardStore.editMode"
v-if="dashboardStore.layout.length"
>
<grid-item

8
src/views/dashboard/related/topology/components/PodTopology.vue
View File

@ -16,7 +16,9 @@ limitations under the License. -->
<div class="tool">
<span
v-show="
dashboardStore.entity === EntityType[2].value && config.graph.showDepth
dashboardStore.entity === EntityType[2].value &&
config.graph &&
config.graph.showDepth
"
>
<span class="label">{{ t("currentDepth") }}</span>
@ -111,7 +113,9 @@ const width = ref<number>(100);
const showSettings = ref<boolean>(false);
const settings = ref<any>(props.config);
const operationsPos = reactive<{ x: number; y: number }>({ x: NaN, y: NaN });
const depth = ref<number>(props.config.graph.depth || 3);
const depth = ref<number>(
(props.config.graph && props.config.graph.depth) || 3
);
const items = [
{ id: "inspect", title: "Inspect", func: inspect },
{ id: "dashboard", title: "View Dashboard", func: goDashboard },