Merge pull request #1238 from slntopp/dev

Dev
slntopp · Nov 15, 2023 · b9f7784 · b9f7784
2 parents 23533d9 + 6b7af63
commit b9f7784
Show file tree

Hide file tree

Showing 88 changed files with 2,876 additions and 1,529 deletions.
diff --git a/admin-ui/package.json b/admin-ui/package.json
@@ -37,13 +37,13 @@
     "yaml": "^2.3.1"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.22.10",
+    "@babel/eslint-parser": "^7.22.15",
     "@vue/cli-plugin-babel": "~5.0.7",
     "@vue/cli-plugin-eslint": "~5.0.7",
     "@vue/cli-plugin-router": "~5.0.7",
     "@vue/cli-plugin-vuex": "~5.0.7",
     "@vue/cli-service": "~5.0.7",
-    "eslint": "^8.47.0",
+    "eslint": "^8.52.0",
     "eslint-plugin-vue": "^9.17.0",
     "sass": "~1.32.6",
     "vue-cli-plugin-vuetify": "~2.5.8",

diff --git a/admin-ui/public/js/config.js b/admin-ui/public/js/config.js
@@ -1,18 +1,27 @@
 globalThis.colors = {
-	background: "#000033",
-	"background-dark": "#000020",
-	"background-light": "#0c0c3c", //old #202033
-	accent: "#FF00FF",
-	primary: "#FF00FF"
-}
-globalThis.dark = true
+  light: {
+    background: "#e7e7e7",
+    "background-dark": "#e7e4e4",
+    "background-light": "#ffffff", //old #202033
+    accent: "#FF00FF",
+    primary: "#5272F2",
+  },
+  dark: {
+    background: "#000033",
+    "background-dark": "#000020",
+    "background-light": "#0c0c3c", //old #202033
+    accent: "#FF00FF",
+    primary: "#FF00FF",
+  },
+};
 
+globalThis.dark = true;
 
 // globalThis.dye = {
 // 	aside: {
 // 		background: "#322F2E",
 // 		links: 'primary',
-// 		whiteText: true 
+// 		whiteText: true
 // 	}
 // }
 
@@ -26,4 +35,4 @@ globalThis.dark = true
 
 // globalThis.dark = false
 
-// globalThis.logoSrc = '/img/logo.svg'
+// globalThis.logoSrc = '/img/logo.svg'
diff --git a/admin-ui/src/App.vue b/admin-ui/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <v-app
     v-if="!isVNC"
-    :style="{ background: $vuetify.theme.themes.dark.background }"
+    :style="{ background: $vuetify.theme.themes[theme].background }"
   >
     <v-navigation-drawer
       app
@@ -257,27 +257,30 @@
       </v-list>
     </v-navigation-drawer>
 
-    <v-app-bar v-if="isLoggedIn" app color="background" elevation="0">
+    <v-app-bar app color="background" elevation="0">
       <v-row style="width: 100%" justify="center" align="center">
-        <v-col cols="8">
-          <app-search />
-        </v-col>
-        <v-col class="d-flex justify-start">
-          <v-btn
-            v-if="btnStates.visible"
-            :disabled="btnStates.disabled"
-            color="background-light"
-            fab
-            small
-            :loading="btnLoading"
-            @click="() => this.$store.dispatch('reloadBtn/onclick')"
-          >
-            <v-icon>mdi-reload</v-icon>
-          </v-btn>
-        </v-col>
+        <template v-if="isLoggedIn">
+          <v-col>
+            <app-search />
+          </v-col>
+          <v-col class="d-flex justify-start">
+            <v-btn
+                v-if="btnStates.visible"
+                :disabled="btnStates.disabled"
+                color="background-light"
+                fab
+                small
+                :loading="btnLoading"
+                @click="() => this.$store.dispatch('reloadBtn/onclick')"
+            >
+              <v-icon>mdi-reload</v-icon>
+            </v-btn>
+          </v-col>
+        </template>
         <v-col class="d-flex justify-end align-center">
           <languages v-if="false" />
-          <v-menu offset-y transition="slide-y-transition">
+          <themes/>
+          <v-menu v-if="isLoggedIn" offset-y transition="slide-y-transition">
             <template v-slot:activator="{ on, attrs }">
               <v-btn
                 class="mx-2"
@@ -316,23 +319,27 @@
 
     <instances-table-modal
       v-if="overlay.uuid"
+      type="menu"
       :uuid="overlay.uuid"
       :visible="overlay.isVisible"
-      @close="() => { overlay.isVisible = false }"
+      @close="overlay.isVisible = false"
+      @hover="hoverOverlay"
     >
       <template #activator>
         <v-btn
+          outlined
           color="success"
-          style="position: absolute; top: 90px; right: 25px; z-index: 100"
-          @click="overlay.isVisible = true"
+          style="position: absolute; top: 70px; right: 25px; z-index: 100"
+          @mouseenter="overlay.isVisible = true"
+          @mouseleave="hiddenOverlay"
         >
           {{ overlay.buttonTitle }}
         </v-btn>
       </template>
     </instances-table-modal>
 
     <v-main>
-      <router-view />
+      <router-view :style="(overlay.uuid) ? 'padding-top: 55px !important' : null" />
     </v-main>
     <app-snackbar />
   </v-app>
@@ -347,15 +354,18 @@ import languages from "@/components/languages.vue";
 import appSearch from "@/components/search/search.vue";
 import AppSnackbar from "@/components/snackbar.vue";
 import instancesTableModal from "@/components/instances_table_modal.vue";
+import { mapGetters } from "vuex";
+import Themes from "@/components/themes.vue";
 
 export default {
   name: "App",
   components: {
+    Themes,
     AppSnackbar,
     balance,
     appSearch,
     languages,
-    instancesTableModal
+    instancesTableModal,
   },
   data: () => ({
     isMenuMinimize: true,
@@ -364,10 +374,11 @@ export default {
     config,
     navTitles: config.navTitles ?? {},
     overlay: {
+      timeoutId: null,
       isVisible: false,
-      buttonTitle: '',
-      uuid: ''
-    }
+      buttonTitle: "",
+      uuid: "",
+    },
   }),
   methods: {
     logoutHandler() {
@@ -412,8 +423,17 @@ export default {
           }
         });
     },
+    hoverOverlay() {
+      clearTimeout(this.overlay.timeoutId)
+    },
+    hiddenOverlay() {
+      this.overlay.timeoutId = setTimeout(() => {
+        this.overlay.isVisible = false;
+      }, 100)
+    },
   },
   computed: {
+    ...mapGetters("app", ["theme"]),
     isLoggedIn() {
       const result = this.$store.getters["auth/isLoggedIn"];
       return result;
@@ -452,7 +472,7 @@ export default {
     },
   },
   created() {
-    window.addEventListener("message", ({ data, origin }) => {
+    window.addEventListener("message", ({ data, origin, source }) => {
       if (origin.includes("localhost") || !data) return;
       if (data === "ready") return;
       if (data.type === "get-user") {
@@ -470,7 +490,10 @@ export default {
         window.open(`/admin/accounts/${data.value.uuid}`, "_blank");
         return;
       }
-      console.log(data, origin);
+      if (data.type === "get-theme") {
+        source.postMessage({ theme: this.theme }, "*");
+        return;
+      }
     });
 
     this.$store.dispatch("auth/load");
@@ -552,10 +575,10 @@ export default {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #000033;
+  background: var(--v-background-base);
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #c921c9;
+  background: var(--v-primary-base);
 }
 </style>
diff --git a/admin-ui/src/components/ServicesProvider/history.vue b/admin-ui/src/components/ServicesProvider/history.vue
@@ -1,13 +1,15 @@
 <template>
-  <history-table hide-uuid table-name="service-history" :uuid="template.uuid" />
+  <history-table hide-uuid table-name="sp-history" :uuid="template.uuid" />
 </template>
 
 <script>
 import historyTable from "@/components/historyTable.vue";
+import search from "@/mixins/search";
 
 export default {
   props: ["template"],
   name: "sp-history",
+  mixins:[search('sp-history')],
   components: { historyTable },
 };
 </script>

diff --git a/admin-ui/src/components/ServicesProvider/info.vue b/admin-ui/src/components/ServicesProvider/info.vue
@@ -60,7 +60,7 @@
       <!-- Date -->
       <v-row>
         <v-col cols="12" lg="6" class="mt-5 mb-5">
-          <v-alert dark type="info" color="indigo ">
+          <v-alert dark type="info" color="background ">
             <span class="mr-2 text-h6">Last Monitored:</span>
             <template v-if="provider.state && template.state.meta.ts">
               {{

diff --git a/admin-ui/src/components/account/history.vue b/admin-ui/src/components/account/history.vue
@@ -4,10 +4,12 @@
 
 <script>
 import HistoryTable from "@/components/historyTable.vue";
+import search from "@/mixins/search";
 
 export default {
   props: ["account"],
   name: "account-history",
+  mixins:[search('accounts-history')],
   components: { HistoryTable },
 };
 </script>