cleanup script manager and snippet modals and move agent select dropdown for test script to script form

src/App.vue

@@ -12,6 +12,13 @@ export default {
 body
   overflow-y: hidden
 
+.tbl-sticky
+  thead tr th
+    position: sticky
+    z-index: 1
+  thead tr:first-child th
+    top: 0
+
 .tabs-tbl-sticky
 
   thead tr th

src/api/scripts.js

@@ -4,17 +4,13 @@ const baseUrl = "/scripts"
 
 // script operations
 export async function fetchScripts(params = {}) {
-  try {
-    const { data } = await axios.get(`${baseUrl}/`, { params: params })
-    return data
-  } catch (e) { }
+  const { data } = await axios.get(`${baseUrl}/`, { params: params })
+  return data
 }
 
 export async function testScript(agent_id, payload) {
-  try {
-    const { data } = await axios.post(`${baseUrl}/${agent_id}/test/`, payload)
-    return data
-  } catch (e) { }
+  const { data } = await axios.post(`${baseUrl}/${agent_id}/test/`, payload)
+  return data
 }
 
 export async function saveScript(payload) {
@@ -33,45 +29,34 @@ export async function removeScript(id) {
 }
 
 export async function downloadScript(id, params = {}) {
-  try {
-    const { data } = await axios.get(`${baseUrl}/${id}/download/`, { params: params })
-    return data
-  } catch (e) { }
+  const { data } = await axios.get(`${baseUrl}/${id}/download/`, { params: params })
+  return data
 }
 
 
 // script snippet operations
 export async function fetchScriptSnippets(params = {}) {
-  try {
-    const { data } = await axios.get(`${baseUrl}/snippets/`, { params: params })
-    return data
-  } catch (e) { }
+  const { data } = await axios.get(`${baseUrl}/snippets/`, { params: params })
+  return data
+
 }
 
 export async function saveScriptSnippet(payload) {
-  try {
-    const { data } = await axios.post(`${baseUrl}/snippets/`, payload)
-    return data
-  } catch (e) { }
+  const { data } = await axios.post(`${baseUrl}/snippets/`, payload)
+  return data
 }
 
 export async function fetchScriptSnippet(id, params = {}) {
-  try {
-    const { data } = await axios.get(`${baseUrl}/snippets/${id}/`, { params: params })
-    return data
-  } catch (e) { }
+  const { data } = await axios.get(`${baseUrl}/snippets/${id}/`, { params: params })
+  return data
 }
 
 export async function editScriptSnippet(payload) {
-  try {
-    const { data } = await axios.put(`${baseUrl}/snippets/${payload.id}/`, payload)
-    return data
-  } catch (e) { }
+  const { data } = await axios.put(`${baseUrl}/snippets/${payload.id}/`, payload)
+  return data
 }
 
 export async function removeScriptSnippet(id) {
-  try {
-    const { data } = await axios.delete(`${baseUrl}/snippets/${id}/`)
-    return data
-  } catch (e) { }
+  const { data } = await axios.delete(`${baseUrl}/snippets/${id}/`)
+  return data
 }

src/components/scripts/ScriptFormModal.vue

@@ -1,6 +1,6 @@
 <template>
   <q-dialog ref="dialogRef" @hide="onDialogHide" persistent @keydown.esc="onDialogHide" :maximized="maximized">
-    <q-card class="q-dialog-plugin" :style="maximized ? '' : 'width: 70vw; max-width: 90vw'">
+    <q-card class="q-dialog-plugin" :style="maximized ? '' : 'width: 80vw; max-width: 90vw'">
       <q-bar>
         {{ title }}
         <q-space />
@@ -15,73 +15,63 @@
         </q-btn>
       </q-bar>
       <q-form @submit="submitForm">
-        <q-card-section class="row">
-          <div class="q-pa-sm col-1" style="width: auto">
-            <q-icon
-              class="cursor-pointer"
-              :name="formScript.favorite ? 'star' : 'star_outline'"
-              size="md"
-              color="yellow-8"
-              @[clickEvent]="formScript.favorite = !formScript.favorite"
-            />
-          </div>
-          <div class="q-pa-sm col-2">
-            <q-input
-              filled
-              dense
-              :readonly="readonly"
-              v-model="formScript.name"
-              label="Name"
-              :rules="[val => !!val || '*Required']"
-            />
-          </div>
-          <div class="q-pa-sm col-2">
-            <q-select
-              :readonly="readonly"
-              options-dense
-              filled
-              dense
-              v-model="formScript.shell"
-              :options="shellOptions"
-              emit-value
-              map-options
-              label="Shell Type"
-            />
-          </div>
-          <div class="q-pa-sm col-2">
-            <q-input
-              type="number"
-              filled
-              dense
-              :readonly="readonly"
-              v-model.number="formScript.default_timeout"
-              label="Timeout (seconds)"
-              :rules="[val => val >= 5 || 'Minimum is 5']"
-            />
-          </div>
-          <div class="q-pa-sm col-3">
-            <tactical-dropdown
-              hint="Press Enter or Tab when adding a new value"
-              filled
-              v-model="formScript.category"
-              :options="categories"
-              use-input
-              clearable
-              new-value-mode="add-unique"
-              filterable
-              label="Category"
-              :readonly="readonly"
-            />
-          </div>
-          <div class="q-pa-sm col-2">
-            <q-input filled dense :readonly="readonly" v-model="formScript.description" label="Description" />
-          </div>
-        </q-card-section>
-        <div class="q-px-sm q-pt-none q-pb-sm q-mt-none row">
+        <div class="q-pt-sm q-px-sm row">
+          <q-input
+            filled
+            dense
+            class="col-2"
+            :readonly="readonly"
+            v-model="formScript.name"
+            label="Name"
+            :rules="[val => !!val || '*Required']"
+          />
+          <q-select
+            class="q-pl-sm col-2"
+            :readonly="readonly"
+            options-dense
+            filled
+            dense
+            v-model="formScript.shell"
+            :options="shellOptions"
+            emit-value
+            map-options
+            label="Shell Type"
+          />
+          <q-input
+            type="number"
+            class="q-pl-sm col-2"
+            filled
+            dense
+            :readonly="readonly"
+            v-model.number="formScript.default_timeout"
+            label="Timeout (seconds)"
+            :rules="[val => val >= 5 || 'Minimum is 5']"
+          />
+          <tactical-dropdown
+            class="q-pl-sm col-3"
+            filled
+            v-model="formScript.category"
+            :options="categories"
+            use-input
+            clearable
+            new-value-mode="add-unique"
+            filterable
+            label="Category"
+            :readonly="readonly"
+            hide-bottom-space
+          />
+          <q-input
+            class="q-pl-sm col-3"
+            filled
+            dense
+            :readonly="readonly"
+            v-model="formScript.description"
+            label="Description"
+          />
           <tactical-dropdown
             v-model="formScript.args"
             label="Script Arguments (press Enter after typing each argument)"
-            class="col-12"
+            class="q-pb-sm col-12 row"
             filled
             use-input
             multiple
@@ -94,13 +84,35 @@
 
         <CodeEditor
           v-model="code"
-          :style="maximized ? '--prism-height: 76vh' : '--prism-height: 70vh'"
+          :style="maximized ? '--prism-height: 72vh' : '--prism-height: 65vh'"
           :readonly="readonly"
           :shell="formScript.shell"
         />
-        <q-card-actions align="right">
+        <q-card-actions>
+          <tactical-dropdown
+            style="width: 350px"
+            dense
+            filled
+            v-model="agent"
+            :options="agentOptions"
+            label="Agent to run test script on"
+            mapOptions
+            @filter="loadAgentOptions"
+          >
+            <template v-slot:after>
+              <q-btn
+                size="md"
+                color="primary"
+                dense
+                flat
+                label="Test Script"
+                :disable="!agent || !code || !formScript.default_timeout"
+                @click="openTestScriptModal"
+              />
+            </template>
+          </tactical-dropdown>
+          <q-space />
           <q-btn dense flat label="Cancel" v-close-popup />
-          <q-btn dense flat color="primary" label="Test Script" @click="openTestScriptModal" />
           <q-btn v-if="!readonly" :loading="loading" dense flat label="Save" color="primary" type="submit" />
         </q-card-actions>
       </q-form>
@@ -113,6 +125,7 @@
 import { ref, computed } from "vue";
 import { useQuasar, useDialogPluginComponent } from "quasar";
 import { saveScript, editScript, downloadScript } from "@/api/scripts";
+import { useAgentDropdown } from "@/composables/agents";
 import { notifySuccess } from "@/utils/notify";
 
 // ui imports
@@ -147,6 +160,9 @@ export default {
     const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
     const $q = useQuasar();
 
+    // setup agent dropdown
+    const { agent, agentOptions, getAgentOptions } = useAgentDropdown();
+
     // script form logic
     const script = props.script
       ? ref(Object.assign({}, props.script))
@@ -157,7 +173,6 @@ export default {
     const maximized = ref(false);
     const loading = ref(false);
 
-    const clickEvent = computed(() => (!props.readonly ? "click" : null));
     const title = computed(() => {
       if (props.script) {
         return props.readonly
@@ -204,25 +219,41 @@ export default {
         component: TestScriptModal,
         componentProps: {
           script: { ...script.value, code: code.value },
+          agent: agent.value,
         },
       });
     }
 
+    function loadAgentOptions(val, update, abort) {
+      if (agentOptions.value.length > 0) {
+        // already loaded
+        update();
+        return;
+      }
+
+      update(async () => {
+        await getAgentOptions();
+      });
+    }
+
     return {
       // reactive data
       formScript: script.value,
       code,
       maximized,
       loading,
+      agentOptions,
+      agent,
 
       // non-reactive data
       shellOptions,
 
       //computed
-      clickEvent,
+      getAgentOptions,
       title,
 
       //methods
+      loadAgentOptions,
       submitForm,
       openTestScriptModal,
 

src/components/scripts/ScriptManager.vue

@@ -1,6 +1,15 @@
 <template>
   <q-dialog ref="dialogRef" @hide="onDialogHide">
-    <q-card class="q-dialog-plugin" style="width: 90vw; max-width: 90vw">
+    <q-card
+      class="q-dialog-plugin"
+      id="script-manager-card"
+      :style="{
+        width: `${$q.screen.width - 100}px`,
+        'max-width': `${$q.screen.width - 100}px`,
+        height: `${$q.screen.height - 100}px`,
+        'max-height': `${$q.screen.height - 100}px`,
+      }"
+    >
       <q-bar>
         <q-btn @click="getScripts" class="q-mr-sm" dense flat push icon="refresh" />Script Manager
         <q-space />
@@ -8,320 +17,307 @@
           <q-tooltip class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
       </q-bar>
-      <div class="q-pa-md">
-        <div class="q-gutter-sm row">
-          <q-btn-dropdown icon="add" label="New" no-caps dense flat>
-            <q-list dense>
-              <q-item clickable v-close-popup @click="newScriptModal">
-                <q-item-section side>
-                  <q-icon size="xs" name="add" />
-                </q-item-section>
-                <q-item-section>
-                  <q-item-label>New Script</q-item-label>
-                </q-item-section>
-              </q-item>
-              <q-item clickable v-close-popup @click="uploadScriptModal">
-                <q-item-section side>
-                  <q-icon size="xs" name="cloud_upload" />
-                </q-item-section>
-                <q-item-section>
-                  <q-item-label>Upload Script</q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-btn-dropdown>
-          <q-btn
-            no-caps
-            dense
-            flat
-            class="q-ml-sm"
-            label="Script Snippets"
-            icon="mdi-script"
-            @click="ScriptSnippetModal"
-          />
-          <q-btn
-            dense
-            flat
-            no-caps
-            class="q-ml-sm"
-            :label="tableView ? 'Folder View' : 'Table View'"
-            :icon="tableView ? 'folder' : 'list'"
-            @click="tableView = !tableView"
-          />
-          <q-btn
-            dense
-            flat
-            no-caps
-            class="q-ml-sm"
-            :label="showCommunityScripts ? 'Hide Community Scripts' : 'Show Community Scripts'"
-            :icon="showCommunityScripts ? 'visibility_off' : 'visibility'"
-            @click="setShowCommunityScripts(!showCommunityScripts)"
-          />
+      <div class="row q-pt-xs q-pl-xs">
+        <q-btn-dropdown icon="add" label="New" no-caps dense flat>
+          <q-list dense>
+            <q-item clickable v-close-popup @click="newScriptModal">
+              <q-item-section side>
+                <q-icon size="xs" name="add" />
+              </q-item-section>
+              <q-item-section>
+                <q-item-label>New Script</q-item-label>
+              </q-item-section>
+            </q-item>
+            <q-item clickable v-close-popup @click="uploadScriptModal">
+              <q-item-section side>
+                <q-icon size="xs" name="cloud_upload" />
+              </q-item-section>
+              <q-item-section>
+                <q-item-label>Upload Script</q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-btn-dropdown>
+        <q-btn
+          no-caps
+          dense
+          flat
+          class="q-ml-sm"
+          label="Script Snippets"
+          icon="mdi-script"
+          @click="ScriptSnippetModal"
+        />
+        <q-btn
+          dense
+          flat
+          no-caps
+          class="q-ml-sm"
+          :label="tableView ? 'Folder View' : 'Table View'"
+          :icon="tableView ? 'folder' : 'list'"
+          @click="tableView = !tableView"
+        />
+        <q-btn
+          dense
+          flat
+          no-caps
+          class="q-ml-sm"
+          :label="showCommunityScripts ? 'Hide Community Scripts' : 'Show Community Scripts'"
+          :icon="showCommunityScripts ? 'visibility_off' : 'visibility'"
+          @click="setShowCommunityScripts(!showCommunityScripts)"
+        />
 
-          <q-space />
-          <q-input
-            v-model="search"
-            style="width: 300px"
-            label="Search"
-            dense
-            outlined
-            clearable
-            class="q-pr-md q-pb-xs"
-          >
-            <template v-slot:prepend>
-              <q-icon name="search" color="primary" />
-            </template>
-          </q-input>
-        </div>
-        <div class="scroll" style="min-height: 65vh; max-height: 65vh">
-          <!-- List View -->
-          <q-tree
-            ref="folderTree"
-            v-if="!tableView"
-            :nodes="tree"
-            :filter="search"
-            no-connectors
-            node-key="id"
-            v-model:expanded="expanded"
-            no-results-label="No Scripts Found"
-            no-nodes-label="No Scripts Found"
-          >
-            <template v-slot:header-script="props">
-              <div
-                class="cursor-pointer"
-                @dblclick="
-                  props.node.script_type === 'builtin' ? viewCodeModal(props.node) : editScriptModal(props.node)
-                "
-              >
-                <q-icon v-if="props.node.favorite" color="yellow-8" name="star" size="sm" class="q-px-sm" />
-                <q-icon v-else color="yellow-8" name="star_outline" size="sm" class="q-px-sm" />
-
-                <q-icon v-if="props.node.shell === 'powershell'" name="mdi-powershell" color="primary">
-                  <q-tooltip> Powershell </q-tooltip>
-                </q-icon>
-                <q-icon v-else-if="props.node.shell === 'python'" name="mdi-language-python" color="primary">
-                  <q-tooltip> Python </q-tooltip>
-                </q-icon>
-                <q-icon v-else-if="props.node.shell === 'cmd'" name="mdi-microsoft-windows" color="primary">
-                  <q-tooltip> Batch </q-tooltip>
-                </q-icon>
-
-                <span class="q-pl-xs text-weight-bold">{{ props.node.name }}</span>
-                <span class="q-pl-xs">{{ props.node.description }}</span>
-              </div>
-
-              <!-- context menu -->
-              <q-menu context-menu>
-                <q-list dense style="min-width: 200px">
-                  <q-item clickable v-close-popup @click="viewCodeModal(props.node)">
-                    <q-item-section side>
-                      <q-icon name="remove_red_eye" />
-                    </q-item-section>
-                    <q-item-section>View Code</q-item-section>
-                  </q-item>
-
-                  <q-item clickable v-close-popup @click="cloneScriptModal(props.node)">
-                    <q-item-section side>
-                      <q-icon name="content_copy" />
-                    </q-item-section>
-                    <q-item-section>Clone</q-item-section>
-                  </q-item>
-
-                  <q-item
-                    clickable
-                    v-close-popup
-                    @click="editScriptModal(props.node)"
-                    :disable="props.node.script_type === 'builtin'"
-                  >
-                    <q-item-section side>
-                      <q-icon name="edit" />
-                    </q-item-section>
-                    <q-item-section>Edit</q-item-section>
-                  </q-item>
-
-                  <q-item
-                    clickable
-                    v-close-popup
-                    @click="deleteScript(props.node)"
-                    :disable="props.node.script_type === 'builtin'"
-                  >
-                    <q-item-section side>
-                      <q-icon name="delete" />
-                    </q-item-section>
-                    <q-item-section>Delete</q-item-section>
-                  </q-item>
-
-                  <q-separator></q-separator>
-
-                  <q-item clickable v-close-popup @click="favoriteScript(props.node)">
-                    <q-item-section side>
-                      <q-icon name="star" />
-                    </q-item-section>
-                    <q-item-section>{{
-                      props.node.favorite ? "Remove as Favorite" : "Add as Favorite"
-                    }}</q-item-section>
-                  </q-item>
-
-                  <q-item clickable v-close-popup @click="exportScript(props.node)">
-                    <q-item-section side>
-                      <q-icon name="cloud_download" />
-                    </q-item-section>
-                    <q-item-section>Download Script</q-item-section>
-                  </q-item>
-
-                  <q-separator></q-separator>
-
-                  <q-item clickable v-close-popup>
-                    <q-item-section>Close</q-item-section>
-                  </q-item>
-                </q-list>
-              </q-menu>
-            </template>
-          </q-tree>
-          <q-table
-            v-if="tableView"
-            dense
-            :table-class="{ 'table-bgcolor': !$q.dark.isActive, 'table-bgcolor-dark': $q.dark.isActive }"
-            class="settings-tbl-sticky"
-            :rows="visibleScripts"
-            :columns="columns"
-            :loading="loading"
-            v-model:pagination="pagination"
-            :filter="search"
-            row-key="id"
-            binary-state-sort
-            hide-pagination
-            virtual-scroll
-            :rows-per-page-options="[0]"
-          >
-            <template v-slot:header-cell-favorite="props">
-              <q-th :props="props" auto-width>
-                <q-icon name="star" color="yellow-8" size="sm" />
-              </q-th>
-            </template>
-
-            <template v-slot:header-cell-shell="props">
-              <q-th :props="props" auto-width> Shell </q-th>
-            </template>
-
-            <template v-slot:no-data> No Scripts Found </template>
-            <template v-slot:body="props">
-              <!-- Table View -->
-              <q-tr
-                :props="props"
-                @dblclick="props.row.script_type === 'builtin' ? viewCodeModal(props.row) : editScriptModal(props.row)"
-                class="cursor-pointer"
-              >
-                <!-- Context Menu -->
-                <q-menu context-menu>
-                  <q-list dense style="min-width: 200px">
-                    <q-item clickable v-close-popup @click="viewCodeModal(props.row)">
-                      <q-item-section side>
-                        <q-icon name="remove_red_eye" />
-                      </q-item-section>
-                      <q-item-section>View Code</q-item-section>
-                    </q-item>
-
-                    <q-item clickable v-close-popup @click="cloneScriptModal(props.row)">
-                      <q-item-section side>
-                        <q-icon name="content_copy" />
-                      </q-item-section>
-                      <q-item-section>Clone</q-item-section>
-                    </q-item>
-
-                    <q-item
-                      clickable
-                      v-close-popup
-                      @click="editScriptModal(props.row)"
-                      :disable="props.row.script_type === 'builtin'"
-                    >
-                      <q-item-section side>
-                        <q-icon name="edit" />
-                      </q-item-section>
-                      <q-item-section>Edit</q-item-section>
-                    </q-item>
-
-                    <q-item
-                      clickable
-                      v-close-popup
-                      @click="deleteScript(props.row)"
-                      :disable="props.row.script_type === 'builtin'"
-                    >
-                      <q-item-section side>
-                        <q-icon name="delete" />
-                      </q-item-section>
-                      <q-item-section>Delete</q-item-section>
-                    </q-item>
-
-                    <q-separator></q-separator>
-
-                    <q-item clickable v-close-popup @click="favoriteScript(props.row)">
-                      <q-item-section side>
-                        <q-icon name="star" />
-                      </q-item-section>
-                      <q-item-section>{{
-                        props.row.favorite ? "Remove as Favorite" : "Add as Favorite"
-                      }}</q-item-section>
-                    </q-item>
-
-                    <q-item clickable v-close-popup @click="exportScript(props.row)">
-                      <q-item-section side>
-                        <q-icon name="cloud_download" />
-                      </q-item-section>
-                      <q-item-section>Download Script</q-item-section>
-                    </q-item>
-
-                    <q-separator></q-separator>
-
-                    <q-item clickable v-close-popup>
-                      <q-item-section>Close</q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-menu>
-                <q-td>
-                  <q-icon v-if="props.row.favorite" color="yellow-8" name="star" size="sm" />
-                </q-td>
-                <q-td>
-                  <q-icon v-if="props.row.shell === 'powershell'" name="mdi-powershell" color="primary" size="sm">
-                    <q-tooltip> Powershell </q-tooltip>
-                  </q-icon>
-                  <q-icon v-else-if="props.row.shell === 'python'" name="mdi-language-python" color="primary" size="sm">
-                    <q-tooltip> Python </q-tooltip>
-                  </q-icon>
-                  <q-icon v-else-if="props.row.shell === 'cmd'" name="mdi-microsoft-windows" color="primary" size="sm">
-                    <q-tooltip> Batch </q-tooltip>
-                  </q-icon>
-                </q-td>
-                <!-- name -->
-                <q-td>
-                  {{ truncateText(props.row.name, 50) }}
-                  <q-tooltip v-if="props.row.name.length >= 50" style="font-size: 12px">
-                    {{ props.row.name }}
-                  </q-tooltip>
-                </q-td>
-                <!-- args -->
-                <q-td>
-                  <span v-if="props.row.args.length > 0">
-                    {{ truncateText(props.row.args.toString(), 30) }}
-                    <q-tooltip v-if="props.row.args.toString().length >= 30" style="font-size: 12px">
-                      {{ props.row.args }}
-                    </q-tooltip>
-                  </span>
-                </q-td>
-
-                <q-td>{{ props.row.category }}</q-td>
-                <q-td>
-                  {{ truncateText(props.row.description, 30) }}
-                  <q-tooltip v-if="props.row.description.length >= 30" style="font-size: 12px">{{
-                    props.row.description
-                  }}</q-tooltip>
-                </q-td>
-                <q-td>{{ props.row.default_timeout }}</q-td>
-              </q-tr>
-            </template>
-          </q-table>
-        </div>
+        <q-space />
+        <q-input v-model="search" style="width: 300px" label="Search" dense outlined clearable class="q-pr-md q-pb-xs">
+          <template v-slot:prepend>
+            <q-icon name="search" color="primary" />
+          </template>
+        </q-input>
       </div>
+      <!-- List View -->
+      <div
+        v-if="!tableView"
+        class="scroll q-pl-xs"
+        :style="{ 'max-height': `${$q.screen.height - 182}px`, 'min-height': `${$q.screen.height - 382}px` }"
+      >
+        <q-tree
+          ref="folderTree"
+          :nodes="tree"
+          :filter="search"
+          no-connectors
+          node-key="id"
+          v-model:expanded="expanded"
+          no-results-label="No Scripts Found"
+          no-nodes-label="No Scripts Found"
+        >
+          <template v-slot:header-script="props">
+            <div
+              class="cursor-pointer"
+              @dblclick="props.node.script_type === 'builtin' ? viewCodeModal(props.node) : editScriptModal(props.node)"
+            >
+              <q-icon v-if="props.node.favorite" color="yellow-8" name="star" size="sm" class="q-px-sm" />
+              <q-icon v-else color="yellow-8" name="star_outline" size="sm" class="q-px-sm" />
+
+              <q-icon v-if="props.node.shell === 'powershell'" name="mdi-powershell" color="primary">
+                <q-tooltip> Powershell </q-tooltip>
+              </q-icon>
+              <q-icon v-else-if="props.node.shell === 'python'" name="mdi-language-python" color="primary">
+                <q-tooltip> Python </q-tooltip>
+              </q-icon>
+              <q-icon v-else-if="props.node.shell === 'cmd'" name="mdi-microsoft-windows" color="primary">
+                <q-tooltip> Batch </q-tooltip>
+              </q-icon>
+
+              <span class="q-pl-xs text-weight-bold">{{ props.node.name }}</span>
+              <span class="q-pl-xs">{{ props.node.description }}</span>
+            </div>
+
+            <!-- context menu -->
+            <q-menu context-menu>
+              <q-list dense style="min-width: 200px">
+                <q-item clickable v-close-popup @click="viewCodeModal(props.node)">
+                  <q-item-section side>
+                    <q-icon name="remove_red_eye" />
+                  </q-item-section>
+                  <q-item-section>View Code</q-item-section>
+                </q-item>
+
+                <q-item clickable v-close-popup @click="cloneScriptModal(props.node)">
+                  <q-item-section side>
+                    <q-icon name="content_copy" />
+                  </q-item-section>
+                  <q-item-section>Clone</q-item-section>
+                </q-item>
+
+                <q-item
+                  clickable
+                  v-close-popup
+                  @click="editScriptModal(props.node)"
+                  :disable="props.node.script_type === 'builtin'"
+                >
+                  <q-item-section side>
+                    <q-icon name="edit" />
+                  </q-item-section>
+                  <q-item-section>Edit</q-item-section>
+                </q-item>
+
+                <q-item
+                  clickable
+                  v-close-popup
+                  @click="deleteScript(props.node)"
+                  :disable="props.node.script_type === 'builtin'"
+                >
+                  <q-item-section side>
+                    <q-icon name="delete" />
+                  </q-item-section>
+                  <q-item-section>Delete</q-item-section>
+                </q-item>
+
+                <q-separator></q-separator>
+
+                <q-item clickable v-close-popup @click="favoriteScript(props.node)">
+                  <q-item-section side>
+                    <q-icon name="star" />
+                  </q-item-section>
+                  <q-item-section>{{ props.node.favorite ? "Remove as Favorite" : "Add as Favorite" }}</q-item-section>
+                </q-item>
+
+                <q-item clickable v-close-popup @click="exportScript(props.node)">
+                  <q-item-section side>
+                    <q-icon name="cloud_download" />
+                  </q-item-section>
+                  <q-item-section>Download Script</q-item-section>
+                </q-item>
+
+                <q-separator></q-separator>
+
+                <q-item clickable v-close-popup>
+                  <q-item-section>Close</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </template>
+        </q-tree>
+      </div>
+      <q-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"
+        :pagination="{ rowsPerPage: 0, sortBy: 'favorite', descending: true }"
+        :filter="search"
+        row-key="id"
+        binary-state-sort
+        virtual-scroll
+        :rows-per-page-options="[0]"
+      >
+        <template v-slot:header-cell-favorite="props">
+          <q-th :props="props" auto-width>
+            <q-icon name="star" color="yellow-8" size="sm" />
+          </q-th>
+        </template>
+
+        <template v-slot:header-cell-shell="props">
+          <q-th :props="props" auto-width> Shell </q-th>
+        </template>
+
+        <template v-slot:no-data> No Scripts Found </template>
+        <template v-slot:body="props">
+          <!-- Table View -->
+          <q-tr
+            :props="props"
+            @dblclick="props.row.script_type === 'builtin' ? viewCodeModal(props.row) : editScriptModal(props.row)"
+            class="cursor-pointer"
+          >
+            <!-- Context Menu -->
+            <q-menu context-menu>
+              <q-list dense style="min-width: 200px">
+                <q-item clickable v-close-popup @click="viewCodeModal(props.row)">
+                  <q-item-section side>
+                    <q-icon name="remove_red_eye" />
+                  </q-item-section>
+                  <q-item-section>View Code</q-item-section>
+                </q-item>
+
+                <q-item clickable v-close-popup @click="cloneScriptModal(props.row)">
+                  <q-item-section side>
+                    <q-icon name="content_copy" />
+                  </q-item-section>
+                  <q-item-section>Clone</q-item-section>
+                </q-item>
+
+                <q-item
+                  clickable
+                  v-close-popup
+                  @click="editScriptModal(props.row)"
+                  :disable="props.row.script_type === 'builtin'"
+                >
+                  <q-item-section side>
+                    <q-icon name="edit" />
+                  </q-item-section>
+                  <q-item-section>Edit</q-item-section>
+                </q-item>
+
+                <q-item
+                  clickable
+                  v-close-popup
+                  @click="deleteScript(props.row)"
+                  :disable="props.row.script_type === 'builtin'"
+                >
+                  <q-item-section side>
+                    <q-icon name="delete" />
+                  </q-item-section>
+                  <q-item-section>Delete</q-item-section>
+                </q-item>
+
+                <q-separator></q-separator>
+
+                <q-item clickable v-close-popup @click="favoriteScript(props.row)">
+                  <q-item-section side>
+                    <q-icon name="star" />
+                  </q-item-section>
+                  <q-item-section>{{ props.row.favorite ? "Remove as Favorite" : "Add as Favorite" }}</q-item-section>
+                </q-item>
+
+                <q-item clickable v-close-popup @click="exportScript(props.row)">
+                  <q-item-section side>
+                    <q-icon name="cloud_download" />
+                  </q-item-section>
+                  <q-item-section>Download Script</q-item-section>
+                </q-item>
+
+                <q-separator></q-separator>
+
+                <q-item clickable v-close-popup>
+                  <q-item-section>Close</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+            <q-td>
+              <q-icon v-if="props.row.favorite" color="yellow-8" name="star" size="sm" />
+            </q-td>
+            <q-td>
+              <q-icon v-if="props.row.shell === 'powershell'" name="mdi-powershell" color="primary" size="sm">
+                <q-tooltip> Powershell </q-tooltip>
+              </q-icon>
+              <q-icon v-else-if="props.row.shell === 'python'" name="mdi-language-python" color="primary" size="sm">
+                <q-tooltip> Python </q-tooltip>
+              </q-icon>
+              <q-icon v-else-if="props.row.shell === 'cmd'" name="mdi-microsoft-windows" color="primary" size="sm">
+                <q-tooltip> Batch </q-tooltip>
+              </q-icon>
+            </q-td>
+            <!-- name -->
+            <q-td>
+              {{ truncateText(props.row.name, 50) }}
+              <q-tooltip v-if="props.row.name.length >= 50" style="font-size: 12px">
+                {{ props.row.name }}
+              </q-tooltip>
+            </q-td>
+            <!-- args -->
+            <q-td>
+              <span v-if="props.row.args.length > 0">
+                {{ truncateText(props.row.args.toString(), 30) }}
+                <q-tooltip v-if="props.row.args.toString().length >= 30" style="font-size: 12px">
+                  {{ props.row.args }}
+                </q-tooltip>
+              </span>
+            </q-td>
+
+            <q-td>{{ props.row.category }}</q-td>
+            <q-td>
+              {{ truncateText(props.row.description, 30) }}
+              <q-tooltip v-if="props.row.description.length >= 30" style="font-size: 12px">{{
+                props.row.description
+              }}</q-tooltip>
+            </q-td>
+            <q-td>{{ props.row.default_timeout }}</q-td>
+          </q-tr>
+        </template>
+      </q-table>
     </q-card>
   </q-dialog>
 </template>
@@ -410,16 +406,20 @@ export default {
 
     async function getScripts() {
       loading.value = true;
-      scripts.value = await fetchScripts();
+      try {
+        scripts.value = await fetchScripts();
+      } catch (e) {
+        console.error(e);
+      }
       loading.value = false;
     }
 
-    function favoriteScript(script) {
+    async function favoriteScript(script) {
       loading.value = true;
       const notifyText = !script.favorite ? "Script was favorited!" : "Script was removed as a favorite!";
       try {
-        editScript({ id: script.id, favorite: !script.favorite });
-        getScripts();
+        const result = await editScript({ id: script.id, favorite: !script.favorite });
+        await getScripts();
         notifySuccess(notifyText);
       } catch (e) {}
 
@@ -446,8 +446,12 @@ export default {
     async function exportScript(script) {
       loading.value = true;
 
-      const { code, filename } = await downloadScript(script.id);
-      exportFile(filename, new Blob([code]), { mimeType: "text/plain;charset=utf-8" });
+      try {
+        const { code, filename } = await downloadScript(script.id);
+        exportFile(filename, new Blob([code]), { mimeType: "text/plain;charset=utf-8" });
+      } catch (e) {
+        console.error(e);
+      }
       loading.value = false;
     }
 
@@ -456,11 +460,6 @@ export default {
     const tableView = ref(true);
     const expanded = ref([]);
     const loading = ref(false);
-    const pagination = ref({
-      rowsPerPage: 0,
-      sortBy: "favorite",
-      descending: true,
-    });
 
     const visibleScripts = computed(() =>
       showCommunityScripts.value ? scripts.value : scripts.value.filter(i => i.script_type !== "builtin")
@@ -494,7 +493,7 @@ export default {
         // sort by name property
         const sortedScripts = scriptsTemp.sort(function (a, b) {
           const nameA = a.name.toUpperCase();
-          const nameB = b.name.toUpperCase(); 
+          const nameB = b.name.toUpperCase();
 
           if (nameA < nameB) {
             return -1;
@@ -515,7 +514,7 @@ export default {
             id: category,
             children: [],
           };
-        
+
           for (let x = 0; x < sortedScripts.length; x++) {
             if (sortedScripts[x].category === category) {
               temp.children.push({ label: sortedScripts[x].name, header: "script", ...sortedScripts[x] });
@@ -610,7 +609,6 @@ export default {
       search,
       tableView,
       expanded,
-      pagination,
       loading,
       showCommunityScripts,
 

src/components/scripts/ScriptSnippetFormModal.vue

@@ -15,28 +15,28 @@
         </q-btn>
       </q-bar>
       <q-form @submit="submitForm">
-        <q-card-section>
-          <div class="q-gutter-sm row">
-            <div class="col-5">
-              <q-input :rules="[val => !!val || '*Required']" v-model="formSnippet.name" label="Name" filled dense />
-            </div>
-            <div class="col-2">
-              <q-select
-                v-model="formSnippet.shell"
-                :options="shellOptions"
-                label="Shell Type"
-                options-dense
-                filled
-                dense
-                emit-value
-                map-options
-              />
-            </div>
-            <div class="col-4">
-              <q-input filled dense v-model="formSnippet.desc" label="Description" />
-            </div>
-          </div>
-        </q-card-section>
+        <div class="row">
+          <q-input
+            :rules="[val => !!val || '*Required']"
+            class="q-pa-sm col-4"
+            v-model="formSnippet.name"
+            label="Name"
+            filled
+            dense
+          />
+          <q-select
+            v-model="formSnippet.shell"
+            :options="shellOptions"
+            class="q-pa-sm col-2"
+            label="Shell Type"
+            options-dense
+            filled
+            dense
+            emit-value
+            map-options
+          />
+          <q-input class="q-pa-sm col-6" filled dense v-model="formSnippet.desc" label="Description" />
+        </div>
 
         <CodeEditor
           v-model="formSnippet.code"
@@ -44,8 +44,8 @@
           :shell="formSnippet.shell"
         />
         <q-card-actions align="right">
-          <q-btn flat label="Cancel" v-close-popup />
-          <q-btn :loading="loading" flat label="Save" color="primary" type="submit" />
+          <q-btn dense flat label="Cancel" v-close-popup />
+          <q-btn :loading="loading" dense flat label="Save" color="primary" type="submit" />
         </q-card-actions>
       </q-form>
     </q-card>
@@ -95,20 +95,13 @@ export default {
 
     async function submitForm() {
       loading.value = true;
-      let result = "";
       try {
-        // edit existing script snippet
-        if (props.snippet) {
-          result = await editScriptSnippet(snippet.value);
-
-          // add script snippet
-        } else {
-          result = await saveScriptSnippet(snippet.value);
-        }
-
+        const result = props.snippet ? await editScriptSnippet(snippet.value) : await saveScriptSnippet(snippet.value);
         onDialogOK();
         notifySuccess(result);
-      } catch (e) {}
+      } catch (e) {
+        console.error(e);
+      }
 
       loading.value = false;
     }

src/components/scripts/ScriptSnippets.vue

@@ -1,6 +1,14 @@
 <template>
   <q-dialog ref="dialogRef" @hide="onDialogHide">
-    <q-card class="q-dialog-plugin" style="width: 70vw; max-width: 70vw">
+    <q-card
+      class="q-dialog-plugin"
+      :style="{
+        width: `${$q.screen.width - 300}px`,
+        'max-width': `${$q.screen.width - 300}px`,
+        height: `${$q.screen.height - 300}px`,
+        'max-height': `${$q.screen.height - 300}px`,
+      }"
+    >
       <q-bar>
         <q-btn @click="getSnippets" class="q-mr-sm" dense flat push icon="refresh" />Script Snippets
         <q-space />
@@ -8,70 +16,69 @@
           <q-tooltip class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
       </q-bar>
+      <q-table
+        dense
+        :table-class="{ 'table-bgcolor': !$q.dark.isActive, 'table-bgcolor-dark': $q.dark.isActive }"
+        :style="{ 'max-height': `${$q.screen.height - 300 - 32}px` }"
+        class="tbl-sticky"
+        :rows="snippets"
+        :columns="columns"
+        :loading="loading"
+        :pagination="{ rowsPerPage: 0, sortBy: 'name', descending: true }"
+        row-key="id"
+        binary-state-sort
+        virtual-scroll
+        :rows-per-page-options="[0]"
+      >
+        <template v-slot:top>
+          <q-btn dense flat no-caps icon="add" label="New" @click="newSnippetModal" />
+        </template>
+        <template v-slot:header-cell-shell="props">
+          <q-th :props="props" auto-width> Shell </q-th>
+        </template>
 
-      <div class="q-pa-md">
-        <q-btn dense flat no-caps icon="add" label="New" @click="newSnippetModal" />
-        <q-table
-          dense
-          :table-class="{ 'table-bgcolor': !$q.dark.isActive, 'table-bgcolor-dark': $q.dark.isActive }"
-          class="settings-tbl-sticky"
-          :rows="snippets"
-          :columns="columns"
-          :loading="loading"
-          v-model:pagination="pagination"
-          row-key="id"
-          binary-state-sort
-          hide-pagination
-          virtual-scroll
-          :rows-per-page-options="[0]"
-        >
-          <template v-slot:header-cell-shell="props">
-            <q-th :props="props" auto-width> Shell </q-th>
-          </template>
+        <template v-slot:body="props">
+          <!-- Table View -->
+          <q-tr :props="props" @dblclick="editSnippetModal(props.row)" class="cursor-pointer">
+            <!-- Context Menu -->
+            <q-menu context-menu>
+              <q-list dense style="min-width: 200px">
+                <q-item clickable v-close-popup @click="editSnippetModal(props.row)">
+                  <q-item-section side>
+                    <q-icon name="edit" />
+                  </q-item-section>
+                  <q-item-section>Edit</q-item-section>
+                </q-item>
 
-          <template v-slot:body="props">
-            <!-- Table View -->
-            <q-tr :props="props" @dblclick="editSnippetModal(props.row)" class="cursor-pointer">
-              <!-- Context Menu -->
-              <q-menu context-menu>
-                <q-list dense style="min-width: 200px">
-                  <q-item clickable v-close-popup @click="editSnippetModal(props.row)">
-                    <q-item-section side>
-                      <q-icon name="edit" />
-                    </q-item-section>
-                    <q-item-section>Edit</q-item-section>
-                  </q-item>
+                <q-item clickable v-close-popup @click="deleteSnippet(props.row)">
+                  <q-item-section side>
+                    <q-icon name="delete" />
+                  </q-item-section>
+                  <q-item-section>Delete</q-item-section>
+                </q-item>
 
-                  <q-item clickable v-close-popup @click="deleteSnippet(props.row)">
-                    <q-item-section side>
-                      <q-icon name="delete" />
-                    </q-item-section>
-                    <q-item-section>Delete</q-item-section>
-                  </q-item>
-
-                  <q-item clickable v-close-popup>
-                    <q-item-section>Close</q-item-section>
-                  </q-item>
-                </q-list>
-              </q-menu>
-              <q-td>
-                <q-icon v-if="props.row.shell === 'powershell'" name="mdi-powershell" color="primary" size="sm">
-                  <q-tooltip> Powershell </q-tooltip>
-                </q-icon>
-                <q-icon v-else-if="props.row.shell === 'python'" name="mdi-language-python" color="primary" size="sm">
-                  <q-tooltip> Python </q-tooltip>
-                </q-icon>
-                <q-icon v-else-if="props.row.shell === 'cmd'" name="mdi-microsoft-windows" color="primary" size="sm">
-                  <q-tooltip> Batch </q-tooltip>
-                </q-icon>
-              </q-td>
-              <!-- name -->
-              <q-td>{{ props.row.name }}</q-td>
-              <q-td>{{ props.row.desc }}</q-td>
-            </q-tr>
-          </template>
-        </q-table>
-      </div>
+                <q-item clickable v-close-popup>
+                  <q-item-section>Close</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+            <q-td>
+              <q-icon v-if="props.row.shell === 'powershell'" name="mdi-powershell" color="primary" size="sm">
+                <q-tooltip> Powershell </q-tooltip>
+              </q-icon>
+              <q-icon v-else-if="props.row.shell === 'python'" name="mdi-language-python" color="primary" size="sm">
+                <q-tooltip> Python </q-tooltip>
+              </q-icon>
+              <q-icon v-else-if="props.row.shell === 'cmd'" name="mdi-microsoft-windows" color="primary" size="sm">
+                <q-tooltip> Batch </q-tooltip>
+              </q-icon>
+            </q-td>
+            <!-- name -->
+            <q-td>{{ props.row.name }}</q-td>
+            <q-td>{{ props.row.desc }}</q-td>
+          </q-tr>
+        </template>
+      </q-table>
     </q-card>
   </q-dialog>
 </template>
@@ -124,7 +131,11 @@ export default {
 
     async function getSnippets() {
       loading.value = true;
-      snippets.value = await fetchScriptSnippets();
+      try {
+        snippets.value = await fetchScriptSnippets();
+      } catch (e) {
+        console.error(e);
+      }
       loading.value = false;
     }
 
@@ -147,11 +158,6 @@ export default {
 
     // table setup
     const loading = ref(false);
-    const pagination = ref({
-      rowsPerPage: 0,
-      sortBy: "name",
-      descending: true,
-    });
 
     function newSnippetModal() {
       $q.dialog({
@@ -167,18 +173,15 @@ export default {
         componentProps: {
           snippet,
         },
-      }).onOk(() => {
-        getSnippets();
-      });
+      }).onOk(getSnippets);
     }
 
     // component life cycle hooks
-    onMounted(getSnippets());
+    onMounted(getSnippets);
 
     return {
       // reactive data
       snippets,
-      pagination,
       loading,
 
       // non-reactive data

src/components/scripts/TestScriptModal.vue

@@ -1,6 +1,6 @@
 <template>
   <q-dialog ref="dialogRef" @hide="onDialogHide">
-    <q-card class="q-dialog-plugin" style="min-width: 50vw">
+    <q-card class="q-dialog-plugin" style="min-width: 65vw">
       <q-bar>
         Script Test
         <q-space />
@@ -8,50 +8,10 @@
           <q-tooltip class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
       </q-bar>
-      <q-form @submit.prevent="runTestScript">
-        <q-card-section>
-          <tactical-dropdown
-            :rules="[val => !!val || '*Required']"
-            label="Select Agent to run script on"
-            v-model="agent"
-            :options="agentOptions"
-            filterable
-            mapOptions
-            outlined
-          />
-        </q-card-section>
-        <q-card-section>
-          <tactical-dropdown
-            v-model="args"
-            label="Script Arguments (press Enter after typing each argument)"
-            filled
-            use-input
-            multiple
-            hide-dropdown-icon
-            input-debounce="0"
-            new-value-mode="add"
-          />
-        </q-card-section>
-        <q-card-section>
-          <q-input
-            v-model.number="timeout"
-            dense
-            outlined
-            type="number"
-            style="max-width: 150px"
-            label="Timeout (seconds)"
-            stack-label
-            :rules="[val => !!val || '*Required', val => val >= 5 || 'Minimum is 5 seconds']"
-          />
-        </q-card-section>
-        <q-card-actions align="right">
-          <q-btn label="Cancel" v-close-popup />
-          <q-btn :loading="loading" label="Run" color="primary" type="submit" />
-        </q-card-actions>
-        <q-card-section v-if="ret" class="q-pl-md q-pr-md q-pt-none q-ma-none scroll" style="max-height: 50vh">
-          <pre>{{ ret }}</pre>
-        </q-card-section>
-      </q-form>
+      <q-card-section class="scroll" style="max-height: 70vh; height: 70vh">
+        <pre v-if="ret">{{ ret }}</pre>
+        <q-inner-loading :showing="loading" />
+      </q-card-section>
     </q-card>
   </q-dialog>
 </template>
@@ -59,7 +19,6 @@
 <script>
 // composition imports
 import { ref, onMounted } from "vue";
-import { useAgentDropdown } from "@/composables/agents";
 import { testScript } from "@/api/scripts";
 import { useDialogPluginComponent } from "quasar";
 
@@ -74,18 +33,13 @@ export default {
   },
   props: {
     script: !Object,
+    agent: !String,
   },
   setup(props) {
-    // setup dropdowns
-    const { agentOptions, getAgentOptions } = useAgentDropdown();
-
     // setup quasar dialog plugin
     const { dialogRef, onDialogHide } = useDialogPluginComponent();
 
     // main run script functionality
-    const agent = ref(null);
-    const timeout = ref(props.script.default_timeout);
-    const args = ref(props.script.args);
     const ret = ref(null);
     const loading = ref(false);
 
@@ -93,28 +47,25 @@ export default {
       loading.value = true;
       const data = {
         code: props.script.code,
-        timeout: timeout.value,
-        args: args.value,
+        timeout: props.script.default_timeout,
+        args: props.script.args,
         shell: props.script.shell,
       };
-
-      ret.value = await testScript(agent.value, data);
+      try {
+        ret.value = await testScript(props.agent, data);
+      } catch (e) {
+        console.error(e);
+      }
       loading.value = false;
     }
 
-    onMounted(getAgentOptions());
+    onMounted(runTestScript);
 
     return {
       // reactive data
-      agent,
-      timeout,
-      args,
       ret,
       loading,
 
-      // non-reactive data
-      agentOptions,
-
       // methods
       runTestScript,