update config

src/locales/lang/zh.ts

@@ -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",

src/views/dashboard/configuration/Text.vue

@@ -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 || "");

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

@@ -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>

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

@@ -30,15 +30,15 @@ import { useI18n } from "vue-i18n";
 
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
-const { selectedGrid } = dashboardStore;
+const graph = dashboardStore.selectedGrid.graph;
-const showBackground = ref(selectedGrid.graph.showBackground || false);
+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>

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

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

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

@@ -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>

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

@@ -34,15 +34,15 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
-const { selectedGrid } = dashboardStore;
+const graph = dashboardStore.selectedGrid.graph;
-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>

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

@@ -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 graph = computed(() => dashboardStore.selectedGrid.graph || {});
-const smooth = ref(selectedGrid.graph.smooth);
+const smooth = ref(graph.value.smooth);
-const showSymbol = ref(selectedGrid.graph.showSymbol);
+const showSymbol = ref(graph.value.showSymbol);
-const step = ref(selectedGrid.graph.step);
+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>

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

@@ -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 graph = computed(() => dashboardStore.selectedGrid.graph || {});
-const fontSize = ref(selectedGrid.graph.fontSize);
+const fontSize = ref(graph.value.fontSize);
 
 function updateConfig(param: { [key: string]: unknown }) {
   const { selectedGrid } = dashboardStore;

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

@@ -50,17 +50,17 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
-const { selectedGrid } = dashboardStore;
+const graph = dashboardStore.selectedGrid.graph || {};
-const showTableValues = ref(selectedGrid.graph.showTableValues);
+const showTableValues = ref(graph.showTableValues);
-const tableHeaderCol1 = ref(selectedGrid.graph.tableHeaderCol1);
+const tableHeaderCol1 = ref(graph.tableHeaderCol1);
-const tableHeaderCol2 = ref(selectedGrid.graph.tableHeaderCol2);
+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>

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

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

src/views/dashboard/controls/Tab.vue

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

src/views/dashboard/controls/Text.vue

@@ -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],
+        backgroundColor: TextColors[graph.backgroundColor],
-        color: TextColors[data.graph.fontColor],
+        color: TextColors[graph.fontColor],
-        fontSize: data.graph.fontSize + 'px',
+        fontSize: graph.fontSize + 'px',
-        textAlign: data.graph.textAlign,
+        textAlign: graph.textAlign,
       }"
     >
-      <a :href="data.graph.url" target="_blank">
+      <a :href="graph.url" target="_blank">
-        {{ data.graph.content }}
+        {{ 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() {

src/views/dashboard/panel/Layout.vue

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

src/views/dashboard/related/topology/components/PodTopology.vue

@@ -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 },