Release 0.101.31

Fixing main view removing blank space along bottom

.github/workflows/build-release.yml

@@ -15,7 +15,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
 
       - run: touch env-config.js
 
@@ -32,4 +32,3 @@ jobs:
         uses: softprops/action-gh-release@v1
         with:
           files: trmm-web-${{github.ref_name}}.tar.gz
-

.github/workflows/frontend-linting.yml

@@ -13,7 +13,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
       - run: npm install
 
       - name: Run Prettier formatting

package.json

@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "0.101.22",
+  "version": "0.101.31",
   "private": true,
   "productName": "Tactical RMM",
   "scripts": {
@@ -10,31 +10,31 @@
     "format": "prettier --write \"**/*.{js,ts,vue,,html,md,json}\" --ignore-path .gitignore"
   },
   "dependencies": {
-    "@quasar/extras": "1.16.4",
+    "@quasar/extras": "1.16.7",
-    "apexcharts": "3.40.0",
+    "apexcharts": "3.41.1",
-    "axios": "1.4.0",
+    "axios": "1.5.1",
-    "dotenv": "16.0.3",
+    "dotenv": "16.3.1",
-    "qrcode.vue": "3.4.0",
+    "qrcode.vue": "3.4.1",
-    "quasar": "2.12.0",
+    "quasar": "2.12.7",
-    "vue": "3.2.47",
+    "vue": "3.3.4",
-    "vue3-ace-editor": "2.2.2",
+    "vue3-ace-editor": "2.2.3",
-    "vue3-apexcharts": "1.4.1",
+    "vue3-apexcharts": "1.4.4",
     "vuedraggable": "4.1.0",
-    "vue-router": "4.1.6",
+    "vue-router": "4.2.5",
     "vuex": "4.1.0"
   },
   "devDependencies": {
-    "@quasar/cli": "^2.2.1",
+    "@quasar/cli": "2.3.0",
-    "@intlify/unplugin-vue-i18n": "^0.10.0",
+    "@intlify/unplugin-vue-i18n": "1.4.0",
-    "@quasar/app-vite": "^1.4.3",
+    "@quasar/app-vite": "1.6.2",
-    "@types/node": "^20.2.4",
+    "@types/node": "20.8.0",
-    "@typescript-eslint/eslint-plugin": "^5.59.7",
+    "@typescript-eslint/eslint-plugin": "6.7.3",
-    "@typescript-eslint/parser": "^5.59.7",
+    "@typescript-eslint/parser": "6.7.3",
-    "autoprefixer": "10.4.14",
+    "autoprefixer": "10.4.16",
-    "eslint": "8.41.0",
+    "eslint": "8.50.0",
-    "eslint-config-prettier": "8.8.0",
+    "eslint-config-prettier": "9.0.0",
     "eslint-plugin-vue": "8.7.1",
-    "prettier": "2.8.8",
+    "prettier": "3.0.3",
-    "typescript": "5.0.4"
+    "typescript": "5.2.2"
   }
 }

src/api/checks.js

@@ -31,6 +31,11 @@ export async function resetCheck(id) {
   return data;
 }
 
+export async function resetAllChecksStatus(agent_id) {
+  const { data } = await axios.post(`${baseUrl}/${agent_id}/resetall/`);
+  return data;
+}
+
 export async function runAgentChecks(agent_id) {
   const { data } = await axios.post(`${baseUrl}/${agent_id}/run/`);
   return data;

src/components/agents/ChecksTab.vue

@@ -119,6 +119,16 @@
           no-caps
           icon="play_arrow"
           @click="runChecks"
+          class="q-mr-md"
+        />
+        <q-btn
+          label="Reset All Checks Status"
+          dense
+          flat
+          push
+          no-caps
+          icon="restart_alt"
+          @click="resetAllChecks"
         />
       </template>
 
@@ -415,6 +425,7 @@ import {
   updateCheck,
   removeCheck,
   resetCheck,
+  resetAllChecksStatus,
   runAgentChecks,
 } from "@/api/checks";
 import { fetchAgentChecks } from "@/api/agents";
@@ -572,7 +583,7 @@ export default {
         notifySuccess(result);
         refreshDashboard(
           false /* clearTreeSelected */,
-          false /* clearSubTable */
+          false /* clearSubTable */,
         );
       } catch (e) {
         console.error(e);
@@ -580,6 +591,27 @@ export default {
       loading.value = false;
     }
 
+    function resetAllChecks() {
+      console.info(selectedAgent.value);
+      $q.dialog({
+        title: "Are you sure?",
+        message: "Reset all checks status",
+        cancel: true,
+        ok: { label: "Reset", color: "negative" },
+        persistent: true,
+      }).onOk(async () => {
+        loading.value = true;
+        try {
+          const result = await resetAllChecksStatus(selectedAgent.value);
+          await getChecks();
+          notifySuccess(result);
+        } catch (e) {
+          console.error(e);
+        }
+        loading.value = false;
+      });
+    }
+
     function showEventInfo(data) {
       $q.dialog({
         component: EventLogCheckOutput,
@@ -674,6 +706,7 @@ export default {
       formatDate,
       getAlertSeverity,
       runChecks,
+      resetAllChecks,
 
       // dialogs
       showScriptOutput,

src/components/scripts/ScriptFormModal.vue

@@ -3,7 +3,7 @@
     ref="dialogRef"
     @hide="onDialogHide"
     persistent
-    @keydown.esc="onDialogHide"
+    @keydown.esc.stop="onDialogHide"
     :maximized="maximized"
   >
     <q-card
@@ -173,8 +173,7 @@
                   >Setting this value on the script model will always override
                   any 'Run As User' checkboxes in the UI and force this script
                   to always be run in the context of the logged in user. If no
-                  user is logged in, the script will not run and an error will
+                  user is logged in, the script will run as SYSTEM.
-                  be returned.
                 </q-tooltip>
               </q-checkbox>
               <q-input
@@ -353,7 +352,7 @@ export default {
       downloadScript(script.value.id, { with_snippets: props.readonly }).then(
         (r) => {
           script.value.script_body = r.code;
-        }
+        },
       );
 
     async function submitForm() {

src/components/scripts/ScriptManager.vue

@@ -286,15 +286,10 @@
           </template>
         </q-tree>
       </div>
-      <q-table
+      <tactical-table
         v-if="tableView"
         dense
-        :table-class="{
-          'table-bgcolor': !$q.dark.isActive,
-          'table-bgcolor-dark': $q.dark.isActive,
-        }"
         :style="{ 'max-height': `${$q.screen.height - 182}px` }"
-        class="tbl-sticky"
         :rows="visibleScripts"
         :columns="columns"
         :loading="loading"
@@ -304,6 +299,7 @@
         binary-state-sort
         virtual-scroll
         :rows-per-page-options="[0]"
+        column-select
       >
         <template v-slot:header-cell-favorite="props">
           <q-th :props="props" auto-width>
@@ -425,7 +421,7 @@
               </q-list>
             </q-menu>
             <!-- favorite -->
-            <q-td>
+            <q-td key="favorite" :props="props">
               <q-icon
                 v-if="props.row.favorite"
                 color="yellow-8"
@@ -434,7 +430,7 @@
               />
             </q-td>
             <!-- shell icon -->
-            <q-td>
+            <q-td key="shell" :props="props">
               <q-icon
                 v-if="props.row.shell === 'powershell'"
                 name="mdi-powershell"
@@ -469,7 +465,7 @@
               </q-icon>
             </q-td>
             <!-- supported platforms -->
-            <q-td>
+            <q-td key="supported_platforms" :props="props">
               <q-badge
                 v-if="
                   !props.row.supported_platforms ||
@@ -487,7 +483,11 @@
               >
             </q-td>
             <!-- name -->
-            <q-td :style="{ color: props.row.hidden ? 'grey' : '' }">
+            <q-td
+              key="name"
+              :props="props"
+              :style="{ color: props.row.hidden ? 'grey' : '' }"
+            >
               {{ truncateText(props.row.name, 50) }}
               <q-tooltip
                 v-if="props.row.name.length >= 50"
@@ -497,7 +497,7 @@
               </q-tooltip>
             </q-td>
             <!-- args -->
-            <q-td>
+            <q-td key="args" :props="props">
               <span v-if="props.row.args.length > 0">
                 {{ truncateText(props.row.args.toString(), 30) }}
                 <q-tooltip
@@ -509,8 +509,8 @@
               </span>
             </q-td>
 
-            <q-td>{{ props.row.category }}</q-td>
+            <q-td key="category" :props="props">{{ props.row.category }}</q-td>
-            <q-td>
+            <q-td key="desc" :props="props">
               {{ truncateText(props.row.description, 30) }}
               <q-tooltip
                 v-if="props.row.description.length >= 30"
@@ -518,10 +518,13 @@
                 >{{ props.row.description }}</q-tooltip
               >
             </q-td>
-            <q-td>{{ props.row.default_timeout }}</q-td>
+            <q-td key="default_timeout" :props="props">{{
+              props.row.default_timeout
+            }}</q-td>
+            <q-td></q-td>
           </q-tr>
         </template>
-      </q-table>
+      </tactical-table>
     </q-card>
   </q-dialog>
 </template>
@@ -545,12 +548,13 @@ import { notifySuccess } from "@/utils/notify";
 import ScriptUploadModal from "@/components/scripts/ScriptUploadModal.vue";
 import ScriptFormModal from "@/components/scripts/ScriptFormModal.vue";
 import ScriptSnippets from "@/components/scripts/ScriptSnippets.vue";
+import TacticalTable from "@/components/ui/TacticalTable.vue";
 
 // static data
 const columns = [
   {
     name: "favorite",
-    label: "",
+    label: "Favorites",
     field: "favorite",
     align: "left",
     sortable: true,
@@ -608,6 +612,9 @@ const columns = [
 
 export default {
   name: "ScriptManager",
+  components: {
+    TacticalTable,
+  },
   emits: [...useDialogPluginComponent.emits],
   setup() {
     // setup vuex store

src/components/ui/TacticalTable.vue

@@ -0,0 +1,107 @@
+<template>
+  <q-table
+    :columns="localColumns"
+    :visible-columns="visibleColumns"
+    :table-class="{
+      'table-bgcolor': !$q.dark.isActive,
+      'table-bgcolor-dark': $q.dark.isActive,
+      'column-bgcolor-dark': $q.dark.isActive && columnSelect,
+      'column-bgcolor': !$q.dark.isActive && columnSelect,
+      'sticky-header-right-column': columnSelect,
+      'tbl-sticky': !columnSelect,
+    }"
+    v-bind="$attrs"
+  >
+    <template v-for="(_, slot) in $slots" v-slot:[slot]="scope">
+      <slot :name="slot" v-bind="scope || {}" />
+    </template>
+
+    <template v-slot:header-cell-columnSelect="props">
+      <q-th :props="props" auto-width>
+        <q-btn dense flat icon="more_horiz">
+          <q-menu>
+            <q-option-group
+              v-model="visibleColumns"
+              :options="columnOptions"
+              type="checkbox"
+            />
+          </q-menu>
+        </q-btn>
+      </q-th>
+    </template>
+  </q-table>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
+  inheritAttrs: false,
+});
+</script>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { type QTableColumn } from "quasar";
+const props = withDefaults(
+  defineProps<{
+    columns: QTableColumn[];
+    columnSelect?: boolean;
+    excludeColumns?: string[];
+  }>(),
+  { columnSelect: false, excludeColumns: () => ["columnSelect"] }
+);
+// save a non-reactive copy of columns to modify
+const localColumns: QTableColumn[] = Object.assign([], props.columns);
+if (props.columnSelect)
+  localColumns.push({
+    name: "columnSelect",
+    label: "Column Select",
+    field: "columnSelect",
+  });
+const visibleColumns = ref(localColumns.map((column) => column.name));
+const columnOptions = ref(
+  localColumns
+    .filter((column) => !props.excludeColumns.includes(column.name))
+    .map((column) => ({ label: column.label, value: column.name }))
+);
+</script>
+
+<style lang="sass">
+
+.column-bgcolor-dark
+  td:last-child
+    /* bg color is important for td; just specify one */
+    background-color: #1d1d1d
+
+.column-bgcolor
+  td:last-child
+    /* bg color is important for td; just specify one */
+    background-color: #ffffff
+
+.sticky-header-right-column
+  tr th
+    position: sticky
+    /* higher than z-index for td below */
+    z-index: 2
+  /* this will be the loading indicator */
+  thead tr:last-child th
+    /* height of all previous header rows */
+    top: 48px
+    /* highest z-index */
+    z-index: 3
+  thead tr:last-child th
+    top: 0
+    z-index: 1
+  tr:last-child th:last-child
+    /* highest z-index */
+    z-index: 3
+  td:last-child
+    z-index: 1
+  td:last-child, th:last-child
+    position: sticky
+    right: 0
+  /* prevent scrolling behind sticky top row on focus */
+  tbody
+    /* height of all previous header rows */
+    scroll-margin-top: 48px
+</style>

src/constants/constants.ts

@@ -4,7 +4,7 @@ export const GOARCH_ARM64 = "arm64";
 export const GOARCH_ARM32 = "arm";
 
 export const runAsUserToolTip =
-  "Run in the context of the logged in user. If no user is logged in, the script will not run and an error will be returned.";
+  "Run in the context of the logged in user. If no user is logged in, the script will run as SYSTEM";
 
 export const envVarsLabel =
   "Environment vars (press Enter after typing each key=value pair)";

src/layouts/MainLayout.vue

@@ -74,7 +74,7 @@
             :color="dash_negative_color"
             text-color="black"
             icon="warning"
-            >Certificate expires in {{ daysUntilCertExpires }} days</q-chip
+            >SSL certificate expires in {{ daysUntilCertExpires }} days</q-chip
           >
         </q-toolbar-title>
         <!-- temp dark mode toggle -->
@@ -288,7 +288,7 @@ export default {
 
       if (!token.value) {
         console.log(
-          "Access token is null or invalid, not setting up WebSocket"
+          "Access token is null or invalid, not setting up WebSocket",
         );
         return;
       }
@@ -325,10 +325,13 @@ export default {
 
     const poll = ref(null);
     function livePoll() {
-      poll.value = setInterval(() => {
+      poll.value = setInterval(
+        () => {
           store.dispatch("checkVer");
           store.dispatch("getDashInfo", false);
-      }, 60 * 4 * 1000);
+        },
+        60 * 4 * 1000,
+      );
     }
 
     const updateAvailable = computed(() => {

src/views/DashboardView.vue

@@ -13,7 +13,7 @@
         >
           <q-spinner size="40px" color="primary" />
         </div>
-        <div v-else class="q-pa-sm q-gutter-sm scroll" style="height: 85vh">
+        <div v-else class="q-pa-sm q-gutter-sm scroll" style="height: 85vh; overflow: initial;">
           <q-list dense class="rounded-borders">
             <q-item
               clickable

src/views/InitialSetup.vue

@@ -4,8 +4,17 @@
       <div class="col"></div>
       <div class="col">
         <q-card>
+          <q-card-actions align="center">
+            <q-btn
+              label="Getting Started"
+              color="info"
+              class="full-width"
+              href="https://docs.tacticalrmm.com/guide_gettingstarted/"
+              target="_blank"
+            />
+          </q-card-actions>
           <q-card-section class="row items-center">
-            <div class="text-h6">Initial Setup</div>
+            <div class="text-h5 text-weight-bold">Initial Setup</div>
           </q-card-section>
           <q-form @submit.prevent="finish">
             <q-card-section>

src/views/TakeControl.vue

@@ -2,7 +2,7 @@
   <div>
     <q-bar>
       <span class="text-caption">
-        Agent Status:
+        TRMM Agent Status:
         <q-badge :color="statusColor" :label="status" />
       </span>
       <q-space />