From 27151cc80a264f458aec2a1b3c1da193b7fef58a Mon Sep 17 00:00:00 2001
From: Koushik Dutta <koushd@gmail.com>
Date: Mon, 4 Oct 2021 20:42:56 -0700
Subject: [PATCH] core: ui tweaks

---
 plugins/core/package-lock.json                |  86 ++-----------
 plugins/core/package.json                     |   3 +-
 plugins/core/ui/package-lock.json             |   6 +-
 plugins/core/ui/src/components/Device.vue     | 114 ++++++++++++------
 .../plugin/PluginAdvancedUpdate.vue           |   1 +
 .../ui/src/interfaces/HttpRequestHandler.vue  |   6 +-
 plugins/core/ui/src/plugins/icons.ts          |   2 +
 7 files changed, 94 insertions(+), 124 deletions(-)

diff --git a/plugins/core/package-lock.json b/plugins/core/package-lock.json
index abbb5901b..3bee854a3 100644
--- a/plugins/core/package-lock.json
+++ b/plugins/core/package-lock.json
@@ -1,16 +1,15 @@
 {
    "name": "@scrypted/core",
-   "version": "0.0.107",
+   "version": "0.0.108",
    "lockfileVersion": 2,
    "requires": true,
    "packages": {
       "": {
          "name": "@scrypted/core",
-         "version": "0.0.107",
+         "version": "0.0.108",
          "license": "Apache-2.0",
          "dependencies": {
             "@scrypted/sdk": "file:../../sdk",
-            "axios": "^0.19.0",
             "mime-types": "^2.1.29",
             "router": "^1.3.5",
             "typescript": "^4.4.2",
@@ -73,7 +72,7 @@
       },
       "../../sdk": {
          "name": "@scrypted/sdk",
-         "version": "0.0.78",
+         "version": "0.0.81",
          "license": "ISC",
          "dependencies": {
             "@babel/core": "^7.2.2",
@@ -86,7 +85,7 @@
             "@babel/preset-typescript": "^7.15.0",
             "@types/node": "^16.6.1",
             "adm-zip": "^0.4.13",
-            "axios": "^0.21.1",
+            "axios": "^0.21.4",
             "babel-loader": "^8.0.4",
             "babel-plugin-const-enum": "^1.1.0",
             "babel-plugin-minify-dead-code-elimination": "^0.5.1",
@@ -144,38 +143,6 @@
          "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-3.0.0.tgz",
          "integrity": "sha512-zPMVc3ZYlGLNk4mpK1NzP2wg0ml9t7fUgDsayR5Y5rSzxQilzR9FGu/EH2jQOcKSAeAfWeylyW8juy3OkWRvNA=="
       },
-      "node_modules/axios": {
-         "version": "0.19.2",
-         "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
-         "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
-         "dependencies": {
-            "follow-redirects": "1.5.10"
-         }
-      },
-      "node_modules/follow-redirects": {
-         "version": "1.5.10",
-         "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
-         "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
-         "dependencies": {
-            "debug": "=3.1.0"
-         },
-         "engines": {
-            "node": ">=4.0"
-         }
-      },
-      "node_modules/follow-redirects/node_modules/debug": {
-         "version": "3.1.0",
-         "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-         "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-         "dependencies": {
-            "ms": "2.0.0"
-         }
-      },
-      "node_modules/follow-redirects/node_modules/ms": {
-         "version": "2.0.0",
-         "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-         "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-      },
       "node_modules/methods": {
          "version": "1.1.2",
          "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
@@ -274,9 +241,9 @@
          }
       },
       "node_modules/url-parse": {
-         "version": "1.4.7",
-         "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.7.tgz",
-         "integrity": "sha512-d3uaVyzDB9tQoSXFvuSUNFibTd9zxd2bkVrDRvF5TmvWWQwqE4lgYJ5m+x1DbecWkw+LK4RNl2CU1hHuOKPVlg==",
+         "version": "1.5.3",
+         "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.3.tgz",
+         "integrity": "sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==",
          "dependencies": {
             "querystringify": "^2.1.1",
             "requires-port": "^1.0.0"
@@ -305,7 +272,7 @@
             "@babel/preset-typescript": "^7.15.0",
             "@types/node": "^16.6.1",
             "adm-zip": "^0.4.13",
-            "axios": "^0.21.1",
+            "axios": "^0.21.4",
             "babel-loader": "^8.0.4",
             "babel-plugin-const-enum": "^1.1.0",
             "babel-plugin-minify-dead-code-elimination": "^0.5.1",
@@ -349,37 +316,6 @@
          "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-3.0.0.tgz",
          "integrity": "sha512-zPMVc3ZYlGLNk4mpK1NzP2wg0ml9t7fUgDsayR5Y5rSzxQilzR9FGu/EH2jQOcKSAeAfWeylyW8juy3OkWRvNA=="
       },
-      "axios": {
-         "version": "0.19.2",
-         "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
-         "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
-         "requires": {
-            "follow-redirects": "1.5.10"
-         }
-      },
-      "follow-redirects": {
-         "version": "1.5.10",
-         "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
-         "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
-         "requires": {
-            "debug": "=3.1.0"
-         },
-         "dependencies": {
-            "debug": {
-               "version": "3.1.0",
-               "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-               "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-               "requires": {
-                  "ms": "2.0.0"
-               }
-            },
-            "ms": {
-               "version": "2.0.0",
-               "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-               "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-            }
-         }
-      },
       "methods": {
          "version": "1.1.2",
          "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
@@ -458,9 +394,9 @@
          "integrity": "sha512-gzP+t5W4hdy4c+68bfcv0t400HVJMMd2+H9B7gae1nQlBzCqvrXX+6GL/b3GAgyTH966pzrZ70/fRjwAtZksSQ=="
       },
       "url-parse": {
-         "version": "1.4.7",
-         "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.7.tgz",
-         "integrity": "sha512-d3uaVyzDB9tQoSXFvuSUNFibTd9zxd2bkVrDRvF5TmvWWQwqE4lgYJ5m+x1DbecWkw+LK4RNl2CU1hHuOKPVlg==",
+         "version": "1.5.3",
+         "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.3.tgz",
+         "integrity": "sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==",
          "requires": {
             "querystringify": "^2.1.1",
             "requires-port": "^1.0.0"
diff --git a/plugins/core/package.json b/plugins/core/package.json
index fe51c8271..79f2f7623 100644
--- a/plugins/core/package.json
+++ b/plugins/core/package.json
@@ -1,6 +1,6 @@
 {
    "name": "@scrypted/core",
-   "version": "0.0.107",
+   "version": "0.0.108",
    "description": "Scrypted Core plugin. Provides the UI, websocket, and engine.io APIs.",
    "author": "Scrypted",
    "license": "Apache-2.0",
@@ -31,7 +31,6 @@
    },
    "dependencies": {
       "@scrypted/sdk": "file:../../sdk",
-      "axios": "^0.19.0",
       "mime-types": "^2.1.29",
       "router": "^1.3.5",
       "typescript": "^4.4.2",
diff --git a/plugins/core/ui/package-lock.json b/plugins/core/ui/package-lock.json
index 2645955bd..f871e8ff0 100644
--- a/plugins/core/ui/package-lock.json
+++ b/plugins/core/ui/package-lock.json
@@ -91,7 +91,7 @@
     },
     "../../../sdk": {
       "name": "@scrypted/sdk",
-      "version": "0.0.79",
+      "version": "0.0.81",
       "license": "ISC",
       "dependencies": {
         "@babel/core": "^7.2.2",
@@ -104,7 +104,7 @@
         "@babel/preset-typescript": "^7.15.0",
         "@types/node": "^16.6.1",
         "adm-zip": "^0.4.13",
-        "axios": "^0.21.1",
+        "axios": "^0.21.4",
         "babel-loader": "^8.0.4",
         "babel-plugin-const-enum": "^1.1.0",
         "babel-plugin-minify-dead-code-elimination": "^0.5.1",
@@ -20679,7 +20679,7 @@
         "@babel/preset-typescript": "^7.15.0",
         "@types/node": "^16.6.1",
         "adm-zip": "^0.4.13",
-        "axios": "^0.21.1",
+        "axios": "^0.21.4",
         "babel-loader": "^8.0.4",
         "babel-plugin-const-enum": "^1.1.0",
         "babel-plugin-minify-dead-code-elimination": "^0.5.1",
diff --git a/plugins/core/ui/src/components/Device.vue b/plugins/core/ui/src/components/Device.vue
index 62478af74..43b67f458 100644
--- a/plugins/core/ui/src/components/Device.vue
+++ b/plugins/core/ui/src/components/Device.vue
@@ -45,7 +45,6 @@
     <v-flex xs12 md6 v-if="name != null">
       <v-layout row wrap>
         <v-flex xs12>
-
           <v-card raised>
             <v-card-title class="orange-gradient subtitle-1 font-weight-light">
               {{ name || "No Device Name" }}
@@ -66,6 +65,12 @@
               </v-layout>
             </v-card-title>
 
+            <v-card-subtitle v-if="ownerDevice && pluginData">
+              <a @click="openDevice(ownerDevice.id)">{{ ownerDevice.name }}</a>
+              (Native ID: {{ pluginData.nativeId }})
+              <div></div>
+            </v-card-subtitle>
+
             <v-flex v-if="cardButtonInterfaces.length">
               <v-layout align-center justify-center>
                 <component
@@ -147,6 +152,22 @@
               </v-layout>
             </v-container>
 
+            <v-card-actions v-if="!ownerDevice && pluginData">
+              <v-spacer></v-spacer>
+              <v-btn
+                small
+                outlined
+                color="blue"
+                @click="reloadPlugin"
+                class="mr-2"
+                >Reload Plugin</v-btn
+              >
+              <PluginAdvancedUpdate
+                :pluginData="pluginData"
+                @installed="reload"
+              />
+            </v-card-actions>
+
             <v-card-actions>
               <component
                 v-for="iface in cardActionInterfaces"
@@ -161,17 +182,48 @@
                 >Console</v-btn
               >
 
-              <v-btn color="info" text @click="openRepl" v-if="!loading"
-                >REPL</v-btn
-              >
+              <v-tooltip bottom v-if="!loading">
+                <template v-slot:activator="{ on }">
+                  <v-btn x-small v-on="on" color="info" text @click="openRepl"
+                    ><v-icon x-small>fa-terminal</v-icon></v-btn
+                  >
+                </template>
+                <span>REPL</span>
+              </v-tooltip>
 
-              <v-btn color="info" text @click="openLogs" v-if="!loading"
-                >Events</v-btn
-              >
+              <v-tooltip bottom v-if="!loading">
+                <template v-slot:activator="{ on }">
+                  <v-btn x-small v-on="on" color="info" text @click="openLogs"
+                    ><v-icon x-small>fa-history</v-icon></v-btn
+                  >
+                </template>
+                <span>Events</span>
+              </v-tooltip>
+
+              <v-tooltip bottom v-if="!loading">
+                <template v-slot:activator="{ on }">
+                  <v-btn
+                    x-small
+                    v-on="on"
+                    color="info"
+                    text
+                    @click="showStorage = !showStorage"
+                    ><v-icon x-small>fa-hdd</v-icon></v-btn
+                  >
+                </template>
+                <span>Storage</span>
+              </v-tooltip>
 
               <v-dialog v-if="!loading" v-model="showDelete" width="500">
                 <template v-slot:activator="{ on }">
-                  <v-btn color="error" text v-on="on">Delete</v-btn>
+                  <v-tooltip bottom v-on="on">
+                    <template v-slot:activator="{ on }">
+                      <v-btn x-small v-on="on" color="error" text
+                        ><v-icon x-small>fa-trash</v-icon></v-btn
+                      >
+                    </template>
+                    <span>Delete</span>
+                  </v-tooltip>
                 </template>
 
                 <v-card>
@@ -246,31 +298,6 @@
           ></component>
         </v-flex>
 
-        <v-flex xs12 v-if="ownerDevice && pluginData">
-          <v-card raised>
-            <v-card-title
-              class="green-gradient subtitle-1 text--white font-weight-light"
-            >
-              <font-awesome-icon size="sm" icon="server" />
-              &nbsp;&nbsp;Managed Device
-            </v-card-title>
-            <v-card-text></v-card-text>
-            <v-card-text>
-              <b>Native ID:</b>
-              {{ pluginData.nativeId }}
-            </v-card-text>
-            <v-card-actions>
-              <v-btn text color="primary" @click="showStorage = !showStorage"
-                >Storage</v-btn
-              >
-              <v-spacer></v-spacer>
-              <v-btn text color="blue" :to="`/device/${ownerDevice.id}`">{{
-                ownerDevice.name
-              }}</v-btn>
-            </v-card-actions>
-          </v-card>
-        </v-flex>
-
         <v-flex xs12 v-if="availableMixins.length">
           <v-card raised>
             <v-card-title
@@ -728,7 +755,10 @@ export default {
       await plugins.setStorage(this.device.id, this.pluginData.storage);
     },
     openMixin(mixin) {
-      this.$router.push(getDeviceViewPath(mixin.id));
+      this.openDevice(mixin.id);
+    },
+    openDevice(id) {
+      this.$router.push(getDeviceViewPath(id));
     },
     async toggleMixin(mixin) {
       await setMixin(
@@ -746,13 +776,17 @@ export default {
           this.$scrypted.systemManager,
           this.device
         );
-        const availableMixins = (await getDeviceAvailableMixins(
-          this.$scrypted.systemManager,
-          this.device
-        ))
-        .filter(device => !mixins.includes(device.id));
+        const availableMixins = (
+          await getDeviceAvailableMixins(
+            this.$scrypted.systemManager,
+            this.device
+          )
+        ).filter((device) => !mixins.includes(device.id));
 
-        const allMixins = [...mixins.map(id => this.$scrypted.systemManager.getDeviceById(id)), ...availableMixins];
+        const allMixins = [
+          ...mixins.map((id) => this.$scrypted.systemManager.getDeviceById(id)),
+          ...availableMixins,
+        ];
 
         const ret = allMixins.map((provider) => ({
           id: provider.id,
diff --git a/plugins/core/ui/src/components/plugin/PluginAdvancedUpdate.vue b/plugins/core/ui/src/components/plugin/PluginAdvancedUpdate.vue
index 6918e1987..8ca3ab0eb 100644
--- a/plugins/core/ui/src/components/plugin/PluginAdvancedUpdate.vue
+++ b/plugins/core/ui/src/components/plugin/PluginAdvancedUpdate.vue
@@ -2,6 +2,7 @@
   <v-menu text close-on-click bottom>
     <template v-slot:activator="{ on, attrs }">
       <v-btn
+       small
         :color="pluginData.updateAvailable ? 'orange' : 'blue'"
         v-bind="attrs"
         v-on="on"
diff --git a/plugins/core/ui/src/interfaces/HttpRequestHandler.vue b/plugins/core/ui/src/interfaces/HttpRequestHandler.vue
index 204b8d24d..441b527b2 100644
--- a/plugins/core/ui/src/interfaces/HttpRequestHandler.vue
+++ b/plugins/core/ui/src/interfaces/HttpRequestHandler.vue
@@ -31,12 +31,10 @@ export default {
   },
   methods: {
     async viewPublic() {
-        const endpoint = await this.rpc().getEndpoint();
-        window.open(`/endpoint/${endpoint}/public/`, 'endpoint');
+        window.open(`/endpoint/${this.id}/public/`, 'endpoint');
     },
     async viewPrivate() {
-        const endpoint = await this.rpc().getEndpoint();
-        window.open(`/endpoint/${endpoint}/`, 'endpoint');
+        window.open(`/endpoint/${this.id}/`, 'endpoint');
     }
   }
 };
diff --git a/plugins/core/ui/src/plugins/icons.ts b/plugins/core/ui/src/plugins/icons.ts
index 909a3739f..ccc1d1afc 100644
--- a/plugins/core/ui/src/plugins/icons.ts
+++ b/plugins/core/ui/src/plugins/icons.ts
@@ -75,6 +75,7 @@ import {
   faExternalLinkAlt,
   faSortDown,
   faCodeBranch,
+  faHdd,
 } from '@fortawesome/free-solid-svg-icons'
 
 import {
@@ -156,6 +157,7 @@ const icons =[
   faExternalLinkAlt,
   faSortDown,
   faCodeBranch,
+  faHdd,
 ];
 
 for (var icon in icons) {