send command improvements

src/components/AgentTable.vue

@@ -106,12 +106,7 @@
                 <q-item-section>Remote Desktop</q-item-section>
               </q-item>
 
-              <q-item
-                clickable
-                v-ripple
-                v-close-popup
-                @click="toggleSendCommand(props.row.id, props.row.hostname)"
-              >
+              <q-item clickable v-ripple v-close-popup @click="showSendCommand = true">
                 <q-item-section side>
                   <q-icon size="xs" name="fas fa-terminal" />
                 </q-item-section>
@@ -298,32 +293,6 @@
     <q-inner-loading :showing="agentTableLoading">
       <q-spinner size="40px" color="primary" />
     </q-inner-loading>
-    <!-- send command modal -->
-    <q-dialog v-model="sendCommandToggle" persistent>
-      <q-card style="min-width: 400px">
-        <q-card-section>
-          <div class="text-h6">Send cmd on {{ sendCommandHostname }}</div>
-        </q-card-section>
-
-        <q-card-section>
-          <q-form @submit.prevent="sendCommand">
-            <q-card-section>
-              <q-input
-                dense
-                v-model="rawCMD"
-                persistent
-                autofocus
-                :rules="[val => !!val || 'Field is required']"
-              />
-            </q-card-section>
-            <q-card-actions align="right" class="text-primary">
-              <q-btn flat color="red" label="Cancel" v-close-popup />
-              <q-btn color="positive" :loading="loadingSendCMD" label="Send" type="submit" />
-            </q-card-actions>
-          </q-form>
-        </q-card-section>
-      </q-card>
-    </q-dialog>
     <!-- edit agent modal -->
     <q-dialog v-model="showEditAgentModal">
       <EditAgent @close="showEditAgentModal = false" @edited="agentEdited" />
@@ -338,17 +307,23 @@
     <q-dialog v-model="showPolicyAddModal">
       <PolicyAdd @close="showPolicyAddModal = false" type="agent" :pk="policyAddPk" />
     </q-dialog>
+    <!-- send command modal -->
+    <q-dialog v-model="showSendCommand">
+      <SendCommand @close="showSendCommand = false" :pk="selectedAgentPk" />
+    </q-dialog>
   </div>
 </template>
 
 <script>
 import axios from "axios";
 import mixins from "@/mixins/mixins";
+import { mapGetters } from "vuex";
 import { openURL } from "quasar";
 import EditAgent from "@/components/modals/agents/EditAgent";
 import RebootLater from "@/components/modals/agents/RebootLater";
 import PendingActions from "@/components/modals/logs/PendingActions";
 import PolicyAdd from "@/components/automation/modals/PolicyAdd";
+import SendCommand from "@/components/modals/agents/SendCommand";
 
 export default {
   name: "AgentTable",
@@ -357,7 +332,8 @@ export default {
     EditAgent,
     RebootLater,
     PendingActions,
-    PolicyAdd
+    PolicyAdd,
+    SendCommand
   },
   mixins: [mixins],
   data() {
@@ -367,11 +343,7 @@ export default {
         sortBy: "hostname",
         descending: false
       },
-      sendCommandToggle: false,
-      sendCommandID: null,
-      sendCommandHostname: "",
-      rawCMD: "",
-      loadingSendCMD: false,
+      showSendCommand: false,
       showEditAgentModal: false,
       showRebootLaterModal: false,
       showPolicyAddModal: false,
@@ -504,37 +476,6 @@ export default {
           });
         });
     },
-    toggleSendCommand(pk, hostname) {
-      this.sendCommandToggle = true;
-      this.sendCommandID = pk;
-      this.sendCommandHostname = hostname;
-    },
-    sendCommand() {
-      const rawcmd = this.rawCMD;
-      const hostname = this.sendCommandHostname;
-      const pk = this.sendCommandID;
-      const data = {
-        pk: pk,
-        rawcmd: rawcmd
-      };
-      this.loadingSendCMD = true;
-      axios
-        .post("/agents/sendrawcmd/", data)
-        .then(r => {
-          this.loadingSendCMD = false;
-          this.sendCommandToggle = false;
-          this.$q.dialog({
-            title: `<code>${rawcmd} on ${hostname}`,
-            style: "width: 900px; max-width: 90vw",
-            message: `<pre>${r.data}</pre>`,
-            html: true
-          });
-        })
-        .catch(err => {
-          this.loadingSendCMD = false;
-          this.notifyError(err.response.data);
-        });
-    },
     agentRowSelected(pk) {
       this.$store.commit("setActiveRow", pk);
       this.$store.dispatch("loadSummary", pk);
@@ -590,6 +531,7 @@ export default {
     }
   },
   computed: {
+    ...mapGetters(["selectedAgentPk"]),
     selectedRow() {
       return this.$store.state.selectedRow;
     },

src/components/modals/agents/SendCommand.vue

@@ -0,0 +1,104 @@
+<template>
+  <q-card :style="{'min-width': width}">
+    <q-card-section class="row items-center">
+      <div class="text-h6">Send command on {{ hostname }}</div>
+      <q-space />
+      <q-btn icon="close" flat round dense v-close-popup />
+    </q-card-section>
+    <q-form @submit.prevent="send">
+      <q-card-section>
+        <div class="q-gutter-sm">
+          <q-radio dense v-model="shell" val="cmd" label="CMD" />
+          <q-radio dense v-model="shell" val="powershell" label="Powershell" />
+        </div>
+      </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 >= 10 || 'Minimum is 10 seconds',
+              val => val <= 3600 || 'Maximum is 3600 seconds'
+          ]"
+        />
+      </q-card-section>
+      <q-card-section>
+        <q-input
+          v-model="cmd"
+          outlined
+          label="Command"
+          stack-label
+          :placeholder="shell === 'cmd' ? 'rmdir /S /Q C:\\Windows\\System32' : 'Remove-Item -Recurse -Force C:\\Windows\\System32'"
+          :rules="[ val => !!val || '*Required']"
+        />
+      </q-card-section>
+      <q-card-actions align="center">
+        <q-btn :loading="loading" label="Send" color="primary" class="full-width" type="submit" />
+      </q-card-actions>
+      <q-card-section
+        v-if="ret !== null"
+        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>
+</template>
+
+<script>
+import mixins from "@/mixins/mixins";
+
+export default {
+  name: "SendCommand",
+  mixins: [mixins],
+  props: {
+    pk: Number
+  },
+  data() {
+    return {
+      loading: false,
+      shell: "cmd",
+      cmd: null,
+      timeout: 30,
+      ret: null
+    };
+  },
+  computed: {
+    hostname() {
+      return this.$store.state.agentSummary.hostname;
+    },
+    width() {
+      return this.ret === null ? "40vw" : "70vw";
+    }
+  },
+  methods: {
+    send() {
+      this.ret = null;
+      this.loading = true;
+      const data = {
+        pk: this.pk,
+        cmd: this.cmd,
+        shell: this.shell,
+        timeout: this.timeout
+      };
+      this.$axios
+        .post("/agents/sendrawcmd/", data)
+        .then(r => {
+          this.loading = false;
+          this.ret = r.data;
+        })
+        .catch(e => {
+          this.loading = false;
+          this.notifyError(e.response.data);
+        });
+    }
+  }
+};
+</script>