avoid sending unnecessary data to the frontend, formatting fixes

src/components/Services.vue

@@ -12,18 +12,37 @@
       hide-bottom
     >
       <template v-slot:top>
-        <q-btn dense flat push @click="refreshServices" icon="refresh" />
+        <q-btn
+          dense
+          flat
+          push
+          @click="refreshServices"
+          icon="refresh"
+        />
         <q-space />
-        <q-input v-model="filter" outlined label="Search" dense clearable >
+        <q-input
+          v-model="filter"
+          outlined
+          label="Search"
+          dense
+          clearable
+        >
           <template v-slot:prepend>
             <q-icon name="search" />
           </template>
         </q-input>
       </template>
-      <template slot="body" slot-scope="props" :props="props">
+      <template
+        slot="body"
+        slot-scope="props"
+        :props="props"
+      >
         <q-tr :props="props">
           <q-menu context-menu>
-            <q-list dense style="min-width: 200px">
+            <q-list
+              dense
+              style="min-width: 200px"
+            >
               <q-item
                 clickable
                 v-close-popup
@@ -46,19 +65,38 @@
                 <q-item-section>Restart</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="editService(props.row.name)">
+              <q-item
+                clickable
+                v-close-popup
+                @click="editService(props.row.name)"
+              >
                 <q-item-section>Service Details</q-item-section>
               </q-item>
             </q-list>
           </q-menu>
-          <q-td key="display_name" :props="props">
+          <q-td
+            key="display_name"
+            :props="props"
+          >
             <q-icon name="fas fa-cogs" />
             &nbsp;&nbsp;&nbsp;{{ props.row.display_name }}
           </q-td>
-          <q-td key="start_type" :props="props">{{ props.row.start_type }}</q-td>
-          <q-td key="pid" :props="props">{{ props.row.pid }}</q-td>
-          <q-td key="status" :props="props">{{ props.row.status }}</q-td>
-          <q-td key="username" :props="props">{{ props.row.username }}</q-td>
+          <q-td
+            key="start_type"
+            :props="props"
+          >{{ props.row.start_type }}</q-td>
+          <q-td
+            key="pid"
+            :props="props"
+          >{{ props.row.pid }}</q-td>
+          <q-td
+            key="status"
+            :props="props"
+          >{{ props.row.status }}</q-td>
+          <q-td
+            key="username"
+            :props="props"
+          >{{ props.row.username }}</q-td>
         </q-tr>
       </template>
     </q-table>
@@ -83,7 +121,10 @@
           <div class="row">
             <div class="col-3">Description:</div>
             <div class="col-9">
-              <q-field outlined color="black">{{ serviceData.Description }}</q-field>
+              <q-field
+                outlined
+                color="black"
+              >{{ serviceData.Description }}</q-field>
             </div>
           </div>
           <br />
@@ -145,7 +186,10 @@
           </div>
         </q-card-section>
         <hr />
-        <q-card-actions align="left" class="bg-white text-teal">
+        <q-card-actions
+          align="left"
+          class="bg-white text-teal"
+        >
           <q-btn
             :disable="saveServiceDetailButton"
             dense
@@ -153,7 +197,12 @@
             color="positive"
             @click="changeStartupType(startupType, serviceData.svc_name)"
           />
-          <q-btn dense label="Cancel" color="grey" v-close-popup />
+          <q-btn
+            dense
+            label="Cancel"
+            color="grey"
+            v-close-popup
+          />
         </q-card-actions>
         <q-inner-loading :showing="serviceDetailVisible" />
       </q-card>
@@ -168,7 +217,8 @@ import mixins from "@/mixins/mixins";
 export default {
   name: "Services",
   props: ["pk"],
-  data() {
+  mixins: [mixins],
+  data () {
     return {
       servicesData: [],
       serviceDetailsModal: false,
@@ -228,7 +278,7 @@ export default {
     };
   },
   methods: {
-    changeStartupType(startuptype, name) {
+    changeStartupType (startuptype, name) {
       let changed;
       switch (startuptype) {
         case "Automatic (Delayed Start)":
@@ -251,21 +301,24 @@ export default {
         sv_name: name,
         edit_action: changed
       };
+      this.serviceDetailVisible = true;
       axios
         .post("/services/editservice/", data)
         .then(r => {
+          this.serviceDetailVisible = false;
           this.serviceDetailsModal = false;
           this.refreshServices();
           this.notifySuccess(`Service ${name} was edited!`);
         })
         .catch(err => {
+          this.serviceDetailVisible = false;
           this.notifyError(err.response.data.error);
         });
     },
-    startupTypeChanged() {
+    startupTypeChanged () {
       this.saveServiceDetailButton = false;
     },
-    editService(name) {
+    editService (name) {
       this.saveServiceDetailButton = true;
       this.serviceDetailsModal = true;
       this.serviceDetailVisible = true;
@@ -294,7 +347,7 @@ export default {
           this.notifyError(err.response.data.error);
         });
     },
-    serviceAction(name, action, fullname) {
+    serviceAction (name, action, fullname) {
       let msg, status;
       switch (action) {
         case "start":
@@ -330,15 +383,15 @@ export default {
           this.notifyError(err.response.data.error);
         });
     },
-    async getServices() {
+    async getServices () {
       try {
         let r = await axios.get(`/services/${this.pk}/services/`);
         this.servicesData = [r.data][0].services;
-      } catch(e) {
+      } catch (e) {
         console.log(`ERROR!: ${e}`)
       }
     },
-    refreshServices() {
+    refreshServices () {
       this.$q.loading.show({ message: "Reloading services..." });
       axios
         .get(`/services/${this.pk}/refreshedservices/`)
@@ -352,7 +405,7 @@ export default {
         });
     }
   },
-  created() {
+  created () {
     this.getServices();
   }
 };

src/components/SummaryTab.vue

@@ -14,13 +14,13 @@
             <q-item-section avatar>
               <q-icon name="fas fa-desktop" />
             </q-item-section>
-            <q-item-section>{{ makeModel }}</q-item-section>
+            <q-item-section>{{ summary.make_model }}</q-item-section>
           </q-item>
           <q-item>
             <q-item-section avatar>
               <q-icon name="fas fa-microchip" />
             </q-item-section>
-            <q-item-section>{{ cpuModel }}</q-item-section>
+            <q-item-section>{{ summary.cpu_model }}</q-item-section>
           </q-item>
           <q-item>
             <q-item-section avatar>
@@ -30,7 +30,10 @@
           </q-item>
 
           <!-- physical disks -->
-          <q-item v-for="disk in physicalDisks" :key="disk.model">
+          <q-item
+            v-for="disk in summary.physical_disks"
+            :key="disk.model"
+          >
             <q-item-section avatar>
               <q-icon name="far fa-hdd" />
             </q-item-section>
@@ -46,7 +49,7 @@
             <q-item-section avatar>
               <q-icon name="fas fa-network-wired" />
             </q-item-section>
-            <q-item-section>LAN IP: {{ localIPs }}</q-item-section>
+            <q-item-section>LAN IP: {{ summary.local_ips }}</q-item-section>
           </q-item>
         </q-list>
       </div>
@@ -54,7 +57,10 @@
       <!-- right -->
       <div class="col-3">
         <span class="text-subtitle2 text-bold">Disks</span>
-        <div v-for="disk in disks" :key="disk.device">
+        <div
+          v-for="disk in disks"
+          :key="disk.device"
+        >
           <span>{{ disk.device }} ({{ disk.fstype }})</span>
           <q-linear-progress
             rounded
@@ -74,82 +80,22 @@
 <script>
 export default {
   name: "SummaryTab",
-  data() {
+  data () {
     return {};
   },
   methods: {
-    bytesToGB(bytes) {
-      return Math.round(parseInt(bytes) / 1073741824);
-    },
-    validateIPv4(ip) {
-      const rx = /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/;
-      if (rx.test(ip)) {
-        return true;
-      }
-      return false;
-    }
   },
   computed: {
-    summary() {
+    summary () {
       return this.$store.state.agentSummary;
     },
-    disks() {
+    disks () {
       const entries = Object.entries(this.summary.disks);
       const ret = [];
       for (let [k, v] of entries) {
         ret.push(v);
       }
       return ret;
-    },
-    makeModel() {
-      const comp_sys = this.summary.wmi_detail.comp_sys[0];
-      const comp_sys_prod = this.summary.wmi_detail.comp_sys_prod[0];
-      let make = comp_sys_prod.filter(k => k.Vendor).map(k => k.Vendor)[0];
-      let model = comp_sys.filter(k => k.SystemFamily).map(k => k.SystemFamily)[0];
-
-      if (!model || !make) {
-        return comp_sys_prod.filter(k => k.Version).map(k => k.Version)[0];
-      } else {
-        return `${make} ${model}`;
-      }
-    },
-    physicalDisks() {
-      const ret = this.summary.wmi_detail.disk;
-      const phys = [];
-      ret.forEach(disk => {
-        const model = disk.filter(k => k.Caption).map(k => k.Caption)[0];
-        const size = disk.filter(k => k.Size).map(k => k.Size)[0];
-        const interfaceType = disk
-          .filter(k => k.InterfaceType)
-          .map(k => k.InterfaceType)[0];
-
-        phys.push({
-          model: model,
-          size: this.bytesToGB(size),
-          interfaceType: interfaceType
-        });
-      });
-
-      return phys;
-    },
-    localIPs() {
-      const ret = this.summary.wmi_detail.network_config;
-      const ips = [];
-      ret.forEach(ip => {
-        const x = ip.filter(k => k.IPAddress).map(k => k.IPAddress)[0];
-        if (x !== undefined) {
-          x.forEach(i => {
-            if (this.validateIPv4(i)) {
-              ips.push(i);
-            }
-          });
-        }
-      });
-      return (ips.length === 1 ? ips[0] : ips.join(", "))
-    },
-    cpuModel() {
-      const cpu = this.summary.wmi_detail.cpu[0];
-      return cpu.filter(k => k.Name).map(k => k.Name)[0];
     }
   }
 };

src/components/modals/agents/EditAgent.vue

@@ -1,10 +1,24 @@
 <template>
-  <q-card style="min-width: 800px" v-if="agentLoaded && clientsLoaded">
+  <q-card
+    style="min-width: 800px"
+    v-if="agentLoaded && clientsLoaded"
+  >
     <q-splitter v-model="splitterModel">
       <template v-slot:before>
-        <q-tabs dense v-model="tab" vertical class="text-primary">
-          <q-tab name="general" label="General" />
-          <q-tab name="patch" label="Patches" />
+        <q-tabs
+          dense
+          v-model="tab"
+          vertical
+          class="text-primary"
+        >
+          <q-tab
+            name="general"
+            label="General"
+          />
+          <q-tab
+            name="patch"
+            label="Patches"
+          />
         </q-tabs>
       </template>
       <template v-slot:after>
@@ -12,9 +26,18 @@
           <q-card-section class="row items-center">
             <div class="text-h6">Edit {{ agent.hostname }}</div>
             <q-space />
-            <q-btn icon="close" flat round dense v-close-popup />
+            <q-btn
+              icon="close"
+              flat
+              round
+              dense
+              v-close-popup
+            />
           </q-card-section>
-          <q-scroll-area :thumb-style="thumbStyle" style="height: 500px;">
+          <q-scroll-area
+            :thumb-style="thumbStyle"
+            style="height: 500px;"
+          >
             <q-tab-panels
               v-model="tab"
               animated
@@ -38,7 +61,13 @@
                 <q-card-section class="row">
                   <div class="col-2">Site:</div>
                   <div class="col-2"></div>
-                  <q-select class="col-8" dense outlined v-model="agent.site" :options="sites" />
+                  <q-select
+                    class="col-8"
+                    dense
+                    outlined
+                    v-model="agent.site"
+                    :options="sites"
+                  />
                 </q-card-section>
                 <q-card-section class="row">
                   <div class="col-2">Type:</div>
@@ -95,8 +124,14 @@
                   />
                 </q-card-section>
                 <q-card-section class="row">
-                  <q-checkbox v-model="agent.overdue_email_alert" label="Get overdue email alerts" />
-                  <q-checkbox v-model="agent.overdue_text_alert" label="Get overdue sms alerts" />
+                  <q-checkbox
+                    v-model="agent.overdue_email_alert"
+                    label="Get overdue email alerts"
+                  />
+                  <q-checkbox
+                    v-model="agent.overdue_text_alert"
+                    label="Get overdue sms alerts"
+                  />
                 </q-card-section>
               </q-tab-panel>
               <!-- patch -->
@@ -282,8 +317,15 @@
             </q-tab-panels>
           </q-scroll-area>
           <q-card-section class="row items-center">
-            <q-btn label="Save" color="primary" type="submit" />
-            <q-btn label="Cancel" v-close-popup />
+            <q-btn
+              label="Save"
+              color="primary"
+              type="submit"
+            />
+            <q-btn
+              label="Cancel"
+              v-close-popup
+            />
           </q-card-section>
         </q-form>
       </template>
@@ -299,7 +341,7 @@ import { scheduledTimes } from "@/mixins/data";
 export default {
   name: "EditAgent",
   mixins: [mixins],
-  data() {
+  data () {
     return {
       agentLoaded: false,
       clientsLoaded: false,
@@ -324,22 +366,21 @@ export default {
     };
   },
   methods: {
-    getAgentInfo() {
+    getAgentInfo () {
       axios.get(`/agents/${this.selectedAgentPk}/agentdetail/`).then(r => {
         this.agent = r.data;
         this.agentLoaded = true;
       });
     },
-    getClientsSites() {
+    getClientsSites () {
       axios.get("/clients/loadclients/").then(r => {
         this.tree = r.data;
         this.clientsLoaded = true;
       });
     },
-    editAgent() {
+    editAgent () {
       let data = this.agent;
       delete data.services;
-      delete data.wmi_detail;
       delete data.disks;
       delete data.local_ip;
 
@@ -355,13 +396,13 @@ export default {
   },
   computed: {
     ...mapGetters(["selectedAgentPk"]),
-    sites() {
+    sites () {
       if (this.agentLoaded && this.clientsLoaded) {
         return this.tree[this.agent.client];
       }
     }
   },
-  created() {
+  created () {
     this.getAgentInfo();
     this.getClientsSites();
   }