Agent popout windows (#51)

* Agent popout windows

* small tweeks

CHANGELOG.md

@@ -4,6 +4,9 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.5.0] - 2020-11-??
+- Added popout windows for agents. Now you can work on and get live updates from multiple agents at one time.
+
 ## [1.4.0] - 2020-10-12
 - Added real-time notifications new listeners and agents [#49](https://github.com/BC-SECURITY/Starkiller/pull/49) 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "starkiller",
-  "version": "1.4.0",
+  "version": "1.5.0-RC1",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/App.vue

@@ -1,7 +1,9 @@
 <template>
   <div id="app">
     <v-app :dark="isDarkMode">
-      <side-nav v-if="isLoggedIn" />
+      <side-nav
+        v-if="isLoggedIn && !hideSideBar"
+      />
       <confirm ref="confirm" />
       <socket-notifications v-if="isLoggedIn && versionSatisfies('>=3.5.0')" />
 
@@ -14,7 +16,10 @@
         </v-container>
       </v-main>
 
-      <v-footer app>
+      <v-footer
+        v-if="!hideSideBar"
+        app
+      >
         <span class="mr-2">Copyright (c) 2020 BC Security |</span>
         <a
           class="mr-2"
@@ -60,6 +65,9 @@ export default {
     isLoginPage() {
       return this.$route.name === 'home';
     },
+    hideSideBar() {
+      return this.$route.query.hideSideBar;
+    },
   },
   watch: {
     isDarkMode: {

src/background.js

@@ -1,6 +1,6 @@
 /* global __static */
 import {
-  app, protocol, BrowserWindow, shell,
+  app, protocol, BrowserWindow, shell, ipcMain,
 } from 'electron';
 import path from 'path';
 import {
@@ -55,6 +55,51 @@ function createWindow() {
   });
 }
 
+const agentWindows = {};
+ipcMain.on('agentWindowOpen', (e, data) => {
+  if (agentWindows[data.id]) {
+    return;
+  }
+
+  let spawnedWin = new BrowserWindow({
+    x: win.getPosition()[0] + 50,
+    y: win.getPosition()[1] + 50,
+    width: 600,
+    height: 600,
+    frameless: true,
+    webPreferences: {
+      nodeIntegration: true,
+      webSecurity: false,
+      icon: path.join(__static, 'icon.png'),
+    },
+  });
+
+  if (process.env.WEBPACK_DEV_SERVER_URL) {
+    // Load the url of the dev server if in development mode
+    spawnedWin.loadURL(`${process.env.WEBPACK_DEV_SERVER_URL}#/agents/${data.id}?hideSideBar=true`);
+  } else {
+    createProtocol('app');
+    // Load the index.html when not in development
+    spawnedWin.loadURL(`app://./index.html#/agents/${data.id}?hideSideBar=true`);
+  }
+  spawnedWin.setTitle(`Agent ${data.id}`);
+
+  spawnedWin.on('page-title-updated', (evt) => {
+    evt.preventDefault();
+  });
+
+  spawnedWin.on('closed', () => {
+    spawnedWin = null;
+    delete agentWindows[data.id];
+  });
+
+  agentWindows[data.id] = spawnedWin;
+});
+
+ipcMain.on('closeAllAgentWindows', () => {
+  Object.values(agentWindows).forEach(window => window.close());
+});
+
 // Quit when all windows are closed.
 app.on('window-all-closed', () => {
   // On macOS it is common for applications and their menu bar

src/store/ApplicationModule.js

@@ -1,7 +1,9 @@
-import axios from 'axios';
 import { setInstance } from '@/api/axios-instance';
+import axios from 'axios';
 import { initNamespacedStore } from '@/store/electron-store';
 
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ipcRenderer } from 'electron';
 
 export default {
   namespaced: true,
@@ -68,6 +70,7 @@ export default {
     },
     async logout(context) {
       axios.post(`${context.state.url}/api/admin/logout?token=${context.state.token}`);
+      ipcRenderer.send('closeAllAgentWindows');
       context.commit('setLogout');
     },
     darkMode(context, val) {

src/views/AgentEdit.vue

@@ -108,6 +108,22 @@
           </template>
           <span>Kill Agent</span>
         </v-tooltip>
+        <v-tooltip
+          v-if="!isChild"
+          bottom
+        >
+          <template v-slot:activator="{ on }">
+            <v-btn
+              fab
+              x-small
+              v-on="on"
+              @click="popout"
+            >
+              <v-icon>fa-external-link-alt</v-icon>
+            </v-btn>
+          </template>
+          <span>New Window</span>
+        </v-tooltip>
       </div>
     </div>
     <div :style="splitPaneHeight()">
@@ -188,6 +204,9 @@ import AgentCommandViewer from '@/components/agents/AgentCommandViewer.vue';
 import SplitPane from 'vue-splitpane';
 import * as agentApi from '@/api/agent-api';
 
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ipcRenderer } from 'electron';
+
 export default {
   name: 'AgentEdit',
   components: {
@@ -217,7 +236,7 @@ export default {
       return [
         {
           text: 'Agents',
-          disabled: false,
+          disabled: this.isChild,
           to: '/agents',
           exact: true,
         },
@@ -231,6 +250,9 @@ export default {
     id() {
       return this.$route.params.id;
     },
+    isChild() {
+      return !!this.$route.query.hideSideBar;
+    },
   },
   watch: {
     id(val) {
@@ -246,7 +268,11 @@ export default {
     splitPaneHeight() {
       /* Not the prettiest thing, but seems to cover most window sizes to avoid page scroll.
      That's 96vh - height of breadcrumbs (57) - height of footer (36px) */
-      return 'height: calc(96vh - 57px - 36px';
+      return `height: calc(96vh - 57px ${this.isChild ? '' : '- 36px'})`;
+    },
+    popout() {
+      ipcRenderer.send('agentWindowOpen', { id: this.$route.params.id });
+      this.$router.push({ name: 'agents' });
     },
     getAgent(id) {
       agentApi.getAgent(id)

src/views/Agents.vue

@@ -47,11 +47,18 @@
           <td> {{ item.working_hours }}</td>
           <td>
             <v-icon
+              class="mr-2"
               small
               @click.stop="killAgent(item)"
             >
               fa-trash-alt
             </v-icon>
+            <v-icon
+              small
+              @click.stop="popout(item)"
+            >
+              fa-external-link-alt
+            </v-icon>
           </td>
         </tr>
       </template>
@@ -63,6 +70,9 @@
 import moment from 'moment';
 import { mapState } from 'vuex';
 
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ipcRenderer } from 'electron';
+
 export default {
   name: 'Agents',
   components: {
@@ -113,6 +123,9 @@ export default {
         this.getAgents();
       }
     },
+    popout(item) {
+      ipcRenderer.send('agentWindowOpen', { id: item.name });
+    },
     viewAgent(item) {
       this.$router.push({ name: 'agentEdit', params: { id: item.name } });
     },