Merge branch 'develop' into custom-theming

Author: pedrolamas

package-lock.json

@@ -59,6 +59,7 @@
     "vue-echarts": "^6.2.3",
     "vue-i18n": "^8.27.2",
     "vue-inline-svg": "^2.1.0",
+    "vue-json-viewer": "^2.2.22",
     "vue-meta": "^2.4.0",
     "vue-property-decorator": "^9.1.2",
     "vue-router": "^3.5.4",

package.json

@@ -38,8 +38,11 @@
       <!-- <pre>authenticated {{ authenticated }}, socketConnected {{ socketConnected }}, apiConnected {{ apiConnected }}</pre> -->
       <v-container
         fluid
-        :class="{ 'fill-height': $route.meta && $route.meta.fillHeight }"
-        class="pa-2 pa-sm-4"
+        :class="{
+          'fill-height': $route.meta && $route.meta.fillHeight,
+          [['single', 'double', 'triple', 'quad'][columnCount - 1]]: true
+        }"
+        class="constrained-width pa-2 pa-sm-4"
       >
         <v-row
           v-if="
@@ -119,6 +122,10 @@ export default class App extends Mixins(StateMixin, FilesMixin) {
     return (this.$store.state.config.layoutMode)
   }
 
+  get columnCount () {
+    return this.$store.state.config.containerColumnCount
+  }
+
   get loading () {
     return this.$store.getters['wait/hasWait'](Waits.onLoadLanguage)
   }

src/App.vue

@@ -100,7 +100,6 @@
 
 <script lang="ts">
 import { LayoutConfig } from '@/store/layout/types'
-import { kebabCase } from 'lodash-es'
 import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
 
 @Component({})
@@ -256,7 +255,7 @@ export default class CollapsableCard extends Vue {
         const split = this.layoutPath.split('.')
         return {
           name: split[0],
-          id: kebabCase(split[1])
+          id: split[1]
         }
       } else {
         throw new Error('invalid layout path')

src/components/common/CollapsableCard.vue

@@ -241,13 +241,16 @@ export default class AppBar extends Mixins(StateMixin, ServicesMixin) {
   }
 
   handleResetLayout () {
-    const layout = defaultState()
+    const pathLayouts = {
+      '/diagnostics': 'diagnostics'
+    } as { [key: string]: string }
+
+    const toReset = pathLayouts[this.$route.path] ?? 'dashboard'
+    const layoutDefaultState = defaultState()
+
     this.$store.dispatch('layout/onLayoutChange', {
-      name: 'dashboard',
-      value: {
-        container1: layout.layouts.dashboard.container1,
-        container2: layout.layouts.dashboard.container2
-      }
+      name: toReset,
+      value: layoutDefaultState.layouts[toReset]
     })
   }
 

src/components/layout/AppBar.vue

@@ -76,6 +76,14 @@
             {{ $t('app.general.title.tune') }}
           </app-nav-item>
 
+          <app-nav-item
+            v-if="enableDiagnostics"
+            icon="$chart"
+            to="/diagnostics"
+          >
+            {{ $t('app.general.title.diagnostics') }}
+          </app-nav-item>
+
           <app-nav-item
             icon="$codeJson"
             to="/configure"
@@ -133,6 +141,10 @@ export default class AppNavDrawer extends Mixins(StateMixin) {
     return this.$store.getters['server/componentSupport']('update_manager')
   }
 
+  get enableDiagnostics () {
+    return this.$store.state.config.uiSettings.general.enableDiagnostics
+  }
+
   get hasSubNavigation () {
     return this.$route.meta?.hasSubNavigation ?? false
   }

src/components/layout/AppNavDrawer.vue

@@ -139,6 +139,19 @@
           />
         </app-setting>
       </template>
+
+      <v-divider />
+
+      <app-setting
+        :title="$t('app.setting.label.enable_diagnostics')"
+        :sub-title="$t('app.setting.tooltip.diagnostics_performance')"
+      >
+        <v-switch
+          v-model="enableDiagnostics"
+          hide-details
+          class="mt-0 mb-4"
+        />
+      </app-setting>
     </v-card>
   </div>
 </template>
@@ -279,6 +292,18 @@ export default class GeneralSettings extends Mixins(StateMixin) {
     })
   }
 
+  get enableDiagnostics () {
+    return this.$store.state.config.uiSettings.general.enableDiagnostics
+  }
+
+  set enableDiagnostics (value: boolean) {
+    this.$store.dispatch('config/saveByPath', {
+      path: 'uiSettings.general.enableDiagnostics',
+      value,
+      server: true
+    })
+  }
+
   get current_time () {
     return Math.floor(Date.now() / 1000)
   }