add assets tab

src/components/AssetsTab.vue

@@ -0,0 +1,131 @@
+<template>
+  <div v-if="!selectedAgentPk">No agent selected</div>
+  <div v-else class="q-pa-none">
+    <div class="q-gutter-y-md">
+      <q-card>
+        <q-tabs
+          v-model="tab"
+          dense
+          class="text-grey"
+          active-color="primary"
+          indicator-color="primary"
+          align="justify"
+          narrow-indicator
+          no-caps
+        >
+          <q-tab name="os" label="Operating System" />
+          <q-tab name="cpu" label="CPU" />
+          <q-tab name="mem" label="Memory" />
+          <q-tab name="usb" label="USB" />
+          <q-tab name="bios" label="Bios" />
+          <q-tab name="disk" label="Disks" />
+          <q-tab name="comp_sys" label="Computer System" />
+          <q-tab name="base_board" label="Motherboard" />
+          <q-tab name="comp_sys_prod" label="Computer System Product" />
+          <q-tab name="network_config" label="Network Config" />
+          <q-tab name="desktop_monitor" label="Monitors" />
+          <q-tab name="network_adapter" label="Network Adapters" />
+        </q-tabs>
+
+        <q-separator />
+
+        <q-tab-panels v-model="tab">
+          <q-tab-panel name="os">
+            <WmiDetail :info="os" />
+          </q-tab-panel>
+          <q-tab-panel name="cpu">
+            <WmiDetail :info="cpu" />
+          </q-tab-panel>
+          <q-tab-panel name="mem">
+            <WmiDetail :info="mem" />
+          </q-tab-panel>
+          <q-tab-panel name="usb">
+            <WmiDetail :info="usb" />
+          </q-tab-panel>
+          <q-tab-panel name="bios">
+            <WmiDetail :info="bios" />
+          </q-tab-panel>
+          <q-tab-panel name="disk">
+            <WmiDetail :info="disk" />
+          </q-tab-panel>
+          <q-tab-panel name="comp_sys">
+            <WmiDetail :info="comp_sys" />
+          </q-tab-panel>
+          <q-tab-panel name="base_board">
+            <WmiDetail :info="base_board" />
+          </q-tab-panel>
+          <q-tab-panel name="comp_sys_prod">
+            <WmiDetail :info="comp_sys_prod" />
+          </q-tab-panel>
+          <q-tab-panel name="network_config">
+            <WmiDetail :info="network_config" />
+          </q-tab-panel>
+          <q-tab-panel name="desktop_monitor">
+            <WmiDetail :info="desktop_monitor" />
+          </q-tab-panel>
+          <q-tab-panel name="network_adapter">
+            <WmiDetail :info="network_adapter" />
+          </q-tab-panel>
+        </q-tab-panels>
+      </q-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import WmiDetail from "@/components/WmiDetail";
+
+export default {
+  name: "AssetsTab",
+  components: { WmiDetail },
+  data() {
+    return {
+      tab: "os"
+    };
+  },
+  computed: {
+    ...mapGetters(["selectedAgentPk"]),
+    assets() {
+      return Object.freeze(this.$store.state.agentSummary.wmi_detail);
+    },
+    os() {
+      return this.assets.os;
+    },
+    cpu() {
+      return this.assets.cpu;
+    },
+    mem() {
+      return this.assets.mem;
+    },
+    usb() {
+      return this.assets.usb;
+    },
+    bios() {
+      return this.assets.bios;
+    },
+    disk() {
+      return this.assets.disk;
+    },
+    comp_sys() {
+      return this.assets.comp_sys;
+    },
+    base_board() {
+      return this.assets.base_board;
+    },
+    comp_sys_prod() {
+      return this.assets.comp_sys_prod;
+    },
+    network_config() {
+      return this.assets.network_config;
+    },
+    desktop_monitor() {
+      return this.assets.desktop_monitor;
+    },
+    network_adapter() {
+      return this.assets.network_adapter;
+    }
+  }
+};
+</script>
+

src/components/SubTableTabs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="q-pa-md">
+  <div class="q-pa-none">
     <q-tabs
       v-model="subtab"
       dense
@@ -16,6 +16,7 @@
       <q-tab name="tasks" icon="fas fa-tasks" label="Tasks" />
       <q-tab name="patches" icon="system_update" label="Patches" />
       <q-tab name="software" icon="fab fa-windows" label="Software" />
+      <q-tab name="assets" icon="fas fa-barcode" label="Assets" />
     </q-tabs>
     <q-separator />
     <q-tab-panels v-model="subtab" :animated="false">
@@ -34,6 +35,9 @@
       <q-tab-panel name="software">
         <SoftwareTab />
       </q-tab-panel>
+      <q-tab-panel name="assets">
+        <AssetsTab />
+      </q-tab-panel>
     </q-tab-panels>
   </div>
 </template>
@@ -44,6 +48,7 @@ import ChecksTab from "@/components/ChecksTab";
 import AutomatedTasksTab from "@/components/AutomatedTasksTab";
 import WindowsUpdates from "@/components/WindowsUpdates";
 import SoftwareTab from "@/components/SoftwareTab";
+import AssetsTab from "@/components/AssetsTab";
 export default {
   name: "SubTableTabs",
   components: {
@@ -51,7 +56,8 @@ export default {
     ChecksTab,
     AutomatedTasksTab,
     WindowsUpdates,
-    SoftwareTab
+    SoftwareTab,
+    AssetsTab
   },
   data() {
     return {

src/components/WmiDetail.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="scroll" style="max-height: 28vh">
+    <div v-for="i in info" :key="i + randomID()">
+      <div v-for="j in i" :key="j + randomID()">
+        <div v-for="(v, k) in j" :key="v + randomID()">
+          <span class="text-overline">{{ k }}:</span>
+          <q-badge color="primary" class="q-ml-sm text-caption">{{ v }}</q-badge>
+        </div>
+      </div>
+      <hr v-if="info.length > 1" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { uid } from "quasar";
+
+export default {
+  name: "WmiDetail",
+  props: ["info"],
+  methods: {
+    randomID() {
+      return uid();
+    }
+  }
+};
+</script>
+

src/views/Dashboard.vue

@@ -178,7 +178,7 @@ export default {
       policyAddPk: null,
       outsideModel: 11,
       selectedTree: "",
-      innerModel: 55,
+      innerModel: 50,
       tab: "server",
       left: true,
       clientActive: "",