Fix sort by date on Agent table

src/components/AgentTable.vue

@@ -3,7 +3,7 @@
     <q-table
       dense
       class="agents-tbl-sticky"
-      :style="{'max-height': agentTableHeight}"
+      :style="{ 'max-height': agentTableHeight }"
       :data="filter"
       :filter="search"
       :columns="columns"
@@ -68,7 +68,7 @@
         <q-tr
           @contextmenu="agentRowSelected(props.row.id, props.row.agent_id)"
           :props="props"
-          :class="{highlight: selectedRow === props.row.id}"
+          :class="{ highlight: selectedRow === props.row.id }"
           @click="agentRowSelected(props.row.id, props.row.agent_id)"
           @dblclick="rowDoubleClicked(props.row.id)"
         >
@@ -83,23 +83,14 @@
                 <q-item-section>Edit {{ props.row.hostname }}</q-item-section>
               </q-item>
               <!-- agent pending actions -->
-              <q-item
-                clickable
-                v-close-popup
-                @click="showPendingActions(props.row.id, props.row.hostname)"
-              >
+              <q-item clickable v-close-popup @click="showPendingActions(props.row.id, props.row.hostname)">
                 <q-item-section side>
                   <q-icon size="xs" name="far fa-clock" />
                 </q-item-section>
                 <q-item-section>Pending Agent Actions</q-item-section>
               </q-item>
               <!-- take control -->
-              <q-item
-                clickable
-                v-ripple
-                v-close-popup
-                @click.stop.prevent="takeControl(props.row.id)"
-              >
+              <q-item clickable v-ripple v-close-popup @click.stop.prevent="takeControl(props.row.id)">
                 <q-item-section side>
                   <q-icon size="xs" name="fas fa-desktop" />
                 </q-item-section>
@@ -156,12 +147,7 @@
                     >
                       <q-item-section>Run Patch Status Scan</q-item-section>
                     </q-item>
-                    <q-item
-                      clickable
-                      v-ripple
-                      v-close-popup
-                      @click.stop.prevent="installPatches(props.row.id)"
-                    >
+                    <q-item clickable v-ripple v-close-popup @click.stop.prevent="installPatches(props.row.id)">
                       <q-item-section>Install Patches Now</q-item-section>
                     </q-item>
                   </q-list>
@@ -196,12 +182,7 @@
                       <q-item-section>Now</q-item-section>
                     </q-item>
                     <!-- reboot later -->
-                    <q-item
-                      clickable
-                      v-ripple
-                      v-close-popup
-                      @click.stop.prevent="showRebootLaterModal = true"
-                    >
+                    <q-item clickable v-ripple v-close-popup @click.stop.prevent="showRebootLaterModal = true">
                       <q-item-section>Later</q-item-section>
                     </q-item>
                   </q-list>
@@ -250,12 +231,7 @@
             />
           </q-td>
           <q-td key="checks-status" :props="props">
-            <q-icon
-              v-if="props.row.checks.has_failing_checks"
-              name="fas fa-check-double"
-              size="1.2em"
-              color="negative"
-            >
+            <q-icon v-if="props.row.checks.has_failing_checks" name="fas fa-check-double" size="1.2em" color="negative">
               <q-tooltip>Checks failing</q-tooltip>
             </q-icon>
             <q-icon v-else name="fas fa-check-double" size="1.2em" color="positive">
@@ -287,20 +263,10 @@
             <q-icon v-else name="fas fa-times-circle" color="negative" />
           </q-td>-->
           <q-td key="agentstatus">
-            <q-icon
-              v-if="props.row.status ==='overdue'"
-              name="fas fa-signal"
-              size="1.2em"
-              color="negative"
-            >
+            <q-icon v-if="props.row.status === 'overdue'" name="fas fa-signal" size="1.2em" color="negative">
               <q-tooltip>Agent overdue</q-tooltip>
             </q-icon>
-            <q-icon
-              v-else-if="props.row.status ==='offline'"
-              name="fas fa-signal"
-              size="1.2em"
-              color="warning"
-            >
+            <q-icon v-else-if="props.row.status === 'offline'" name="fas fa-signal" size="1.2em" color="warning">
               <q-tooltip>Agent offline</q-tooltip>
             </q-icon>
             <q-icon v-else name="fas fa-signal" size="1.2em" color="positive">
@@ -313,7 +279,7 @@
               <q-tooltip>Reboot required</q-tooltip>
             </q-icon>
           </q-td>
-          <q-td key="lastseen" :props="props">{{ props.row.last_seen }}</q-td>
+          <q-td key="lastseen" :props="props">{{ formatDate(props.row.last_seen) }}</q-td>
           <q-td key="boottime" :props="props">{{ bootTime(props.row.boot_time) }}</q-td>
         </q-tr>
       </template>

src/components/AuditManager.vue

@@ -59,15 +59,7 @@
         </q-select>
       </div>
       <div class="q-pa-sm col-2">
-        <q-select
-          filled
-          dense
-          v-model="timeFilter"
-          label="Time"
-          emit-value
-          map-options
-          :options="timeOptions"
-        >
+        <q-select filled dense v-model="timeFilter" label="Time" emit-value map-options :options="timeOptions">
           <template v-slot:no-option>
             <q-item>
               <q-item-section class="text-grey">No results</q-item-section>
@@ -95,13 +87,7 @@
         @row-click="showDetails"
       >
         <template v-slot:top-right>
-          <q-btn
-            color="primary"
-            icon-right="archive"
-            label="Export to csv"
-            no-caps
-            @click="exportLog"
-          />
+          <q-btn color="primary" icon-right="archive" label="Export to csv" no-caps @click="exportLog" />
         </template>
       </q-table>
     </q-card-section>
@@ -115,6 +101,7 @@
 
 <script>
 import AuditLogDetail from "@/components/modals/logs/AuditLogDetail";
+import mixins from "@/mixins/mixins";
 import { exportFile } from "quasar";
 
 function wrapCsvValue(val, formatFn) {
@@ -135,6 +122,7 @@ function wrapCsvValue(val, formatFn) {
 
 export default {
   name: "AuditManager",
+  mixins: [mixins],
   components: { AuditLogDetail },
   data() {
     return {
@@ -148,7 +136,14 @@ export default {
       userFilter: [],
       timeFilter: 30,
       columns: [
-        { name: "entry_time", label: "Time", field: "entry_time", align: "left", sortable: true },
+        {
+          name: "entry_time",
+          label: "Time",
+          field: "entry_time",
+          align: "left",
+          sortable: true,
+          format: (val, row) => this.formatDate(val, true),
+        },
         { name: "username", label: "Username", field: "username", align: "left", sortable: true },
         { name: "agent", label: "Agent", field: "agent", align: "left", sortable: true },
         { name: "action", label: "Action", field: "action", align: "left", sortable: true },

src/mixins/mixins.js

@@ -56,6 +56,13 @@ function getTimeLapse(unixtime) {
   }
 }
 
+function appendLeadingZeroes(n) {
+  if (n <= 9) {
+    return "0" + n;
+  }
+  return n
+}
+
 export default {
   methods: {
     bootTime(unixtime) {
@@ -81,5 +88,12 @@ export default {
       const email = /^(?=[a-zA-Z0-9@._%+-]{6,254}$)[a-zA-Z0-9._%+-]{1,64}@(?:[a-zA-Z0-9-]{1,63}\.){1,8}[a-zA-Z]{2,63}$/;
       return email.test(val);
     },
+    formatDate(date, includeSeconds = false) {
+      const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+      let dt = new Date(date)
+      let formatted = months[dt.getMonth()] + "-" + appendLeadingZeroes(dt.getDate()) + "-" + appendLeadingZeroes(dt.getFullYear()) + " - " + appendLeadingZeroes(dt.getHours()) + ":" + appendLeadingZeroes(dt.getMinutes())
+
+      return includeSeconds ? formatted + ":" + appendLeadingZeroes(dt.getSeconds()) : formatted
+    }
   }
 };

src/views/Dashboard.vue

@@ -91,13 +91,7 @@
         </template>
 
         <template v-slot:after>
-          <q-splitter
-            v-model="innerModel"
-            reverse
-            horizontal
-            style="height: 87vh"
-            @input="setSplitter(innerModel)"
-          >
+          <q-splitter v-model="innerModel" reverse horizontal style="height: 87vh" @input="setSplitter(innerModel)">
             <template v-slot:before>
               <div class="row">
                 <q-tabs
@@ -116,14 +110,7 @@
                   <q-tab name="mixed" label="Mixed" />
                 </q-tabs>
                 <q-space />
-                <q-input
-                  v-model="search"
-                  label="Search"
-                  dense
-                  outlined
-                  clearable
-                  class="q-pr-md q-pb-xs"
-                >
+                <q-input v-model="search" label="Search" dense outlined clearable class="q-pr-md q-pb-xs">
                   <template v-slot:prepend>
                     <q-icon name="search" color="primary" />
                   </template>
@@ -168,11 +155,7 @@
     </q-dialog>
     <!-- add policy modal -->
     <q-dialog v-model="showPolicyAddModal">
-      <PolicyAdd
-        @close="showPolicyAddModal = false"
-        :type="policyAddType"
-        :pk="parseInt(policyAddPk)"
-      />
+      <PolicyAdd @close="showPolicyAddModal = false" :type="policyAddType" :pk="parseInt(policyAddPk)" />
     </q-dialog>
   </q-layout>
 </template>