core: ui tweaks

2026-09-17 09:10:38 +01:00 · 2021-10-04 20:42:56 -07:00
parent 4d094b102e
commit 27151cc80a
7 changed files with 94 additions and 124 deletions
--- 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"
--- 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",
--- 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",
--- 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,
--- 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"
--- 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');
    }
  }
 };
--- 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) {