fix

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

@@ -14,6 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div>
+    <span class="label">{{ t("contentDecorations") }}</span>
+    <content-decorations />
+  </div>
+  <div class="item">
     <span class="label">{{ t("showValues") }}</span>
     <el-switch
       v-model="showTableValues"
@@ -37,6 +41,7 @@ limitations under the License. -->
   import { ref } from "vue";
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
+  import ContentDecorations from "./components/ContentDecorations.vue";
 
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();

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

@@ -38,8 +38,9 @@ limitations under the License. -->
   import { useDashboardStore } from "@/store/modules/dashboard";
 
   const dashboardStore = useDashboardStore();
-  const decorations = ref<{ [key: string]: string }>(dashboardStore.selectedGrid.decorations || {});
-  const keys = ref<string[]>(dashboardStore.selectedGrid.decorations ? Object.keys(decorations.value) : [""]);
+  const graph = dashboardStore.selectedGrid.graph;
+  const decorations = ref<{ [key: string]: string }>(graph?.decorations || {});
+  const keys = ref<string[]>(graph.decorations ? Object.keys(decorations.value) : [""]);
 
   function changeKeys(event: any, index: number) {
     const params = event.target.textContent || "";

src/views/dashboard/graphs/Table.vue

@@ -37,7 +37,7 @@ limitations under the License. -->
         >{{ k.split("=")[1] }}</div
       >
       <div class="value-col" v-if="config.showTableValues">
-        {{ data[(keys as string[]).join(",")][data[(keys as string[]).join(",")].length - 1 || 0] }}
+        {{ getColValue(keys) }}
       </div>
     </div>
   </div>
@@ -58,12 +58,14 @@ limitations under the License. -->
         showTableValues: boolean;
         tableHeaderCol2: string;
         typesOfMQE: string[];
+        decorations: {};
       }>,
       default: () => ({ showTableValues: true }),
     },
   });
 
   const { t } = useI18n();
+  const decorations = computed<{ [key: number]: string }>(() => props.config.decorations || {});
   const nameWidth = computed(() => (props.config.showTableValues ? 80 : 100));
   const dataKeys = computed(() => {
     const keys = Object.keys(props.data || {}).filter(
@@ -73,6 +75,10 @@ limitations under the License. -->
 
     return list;
   });
+  function getColValue(keys: string[]) {
+    const val = props.data[(keys as string[]).join(",")][props.data[(keys as string[]).join(",")].length - 1 || 0];
+    return decorations.value[val] || val;
+  }
 </script>
 <style lang="scss" scoped>
   .chart-table {