Merge pull request #1257 from slntopp/dev

dev

admin-ui/src/components/ServicesProvider/template.vue

@@ -102,9 +102,7 @@ export default {
             message: 'Service provider edited successfully'
           });
 
-          setTimeout(() => {
-            this.$router.push({ name: 'ServicesProviders' });
-          }, 1500);
+          this.$router.push({ name: 'ServicesProviders' });
         })
         .catch((err) => {
           this.showSnackbarError({ message: err });
@@ -166,18 +164,18 @@ pre {
 	white-space: pre-wrap;
 }
 .string {
-	color: var(--v-success-base); 
+	color: var(--v-success-base);
 }
 .number {
-	color: var(--v-warning-base); 
+	color: var(--v-warning-base);
 }
 .boolean {
-	color: var(--v-info-base); 
+	color: var(--v-info-base);
 }
 .null {
-	color: var(--v-accent-base); 
+	color: var(--v-accent-base);
 }
 .key {
-	color: var(--v-error-base); 
+	color: var(--v-error-base);
 }
 </style>

admin-ui/src/components/account/chats.vue

@@ -0,0 +1,15 @@
+<template>
+  <plugin-iframe
+    style="height: 100vh; width: 100%"
+    url="/cc.ui/"
+    :params="{ filterByAccount: $route.params.accountId }"
+  />
+</template>
+
+<script setup>
+import PluginIframe from "@/components/plugin/iframe.vue";
+</script>
+
+<script>
+export default { name: 'account-chats' }
+</script>

admin-ui/src/components/account/info.vue

@@ -216,9 +216,7 @@ export default {
           message: "Account edited successfully",
         });
 
-        setTimeout(() => {
-          this.$router.push({ name: "Accounts" });
-        }, 1500);
+        this.$router.push({ name: "Accounts" });
       } finally {
         this.isEditLoading = false;
       }

admin-ui/src/components/account/template.vue

@@ -99,9 +99,7 @@ export default {
             message: 'Account edited successfully'
           });
 
-          setTimeout(() => {
-            this.$router.push({ name: 'Accounts' });
-          }, 1500);
+          this.$router.push({ name: 'Accounts' });
         })
         .catch((err) => {
           this.showSnackbarError({ message: err });

admin-ui/src/components/confirmDialog.vue

@@ -3,7 +3,7 @@
     <div class="empty" @click.stop="() => !disabled && open()">
       <slot></slot>
     </div>
-    <v-dialog v-model="dialog" :max-width="width">
+    <v-dialog persistent v-model="dialog" :max-width="width">
       <v-card>
         <div class="confirm-card">
           <v-card-title class="text-h6">{{ title }}</v-card-title>

admin-ui/src/components/historyTable.vue

@@ -11,7 +11,7 @@
     sort-by="ts"
     sort-desc
     item-key="id"
-    @update:options="onUpdateOptions"
+    @update:options="setOptions"
     show-expand
     :expanded.sync="expanded"
     no-hide-uuid
@@ -54,21 +54,20 @@
   </nocloud-table>
 </template>
 <script setup>
-import { toRefs, ref, onMounted, computed, watch } from "vue";
+import { toRefs, ref, computed, watch } from "vue";
 import nocloudTable from "@/components/table.vue";
 import api from "@/api";
 import { useStore } from "@/store";
+import { debounce } from "@/functions";
 
 const props = defineProps({
   tableName: {},
   accountId: {},
   uuid: {},
   hideRequestor: { type: Boolean, default: false },
   hideUuid: { type: Boolean, default: false },
-  loading: { type: Boolean, default: false },
 });
-const { tableName, accountId, uuid, hideRequestor, hideUuid, loading } =
-  toRefs(props);
+const { tableName, accountId, uuid, hideRequestor, hideUuid } = toRefs(props);
 
 const count = ref(10);
 const logs = ref([]);
@@ -163,9 +162,14 @@ const getEntityByUuid = (item) => {
   }
 };
 
-const onUpdateOptions = async (newOptions) => {
-  options.value = newOptions;
-  page.value = newOptions.page;
+const setOptions = (newOptions) => {
+  if (JSON.stringify(newOptions) !== JSON.stringify(options.value)) {
+    options.value = newOptions;
+    page.value = newOptions.page;
+  }
+};
+
+const fetchLogs = async () => {
   init();
   isFetchLoading.value = true;
   try {
@@ -175,11 +179,12 @@ const onUpdateOptions = async (newOptions) => {
   }
 };
 
+const fetchLogsDebounced = debounce(fetchLogs);
+
 const updateProps = async () => {
   page.value = 1;
   try {
-    await init();
-    await onUpdateOptions(options.value);
+    await fetchLogsDebounced(options.value);
   } catch (e) {
     fetchError.value = e.message;
   }
@@ -188,7 +193,15 @@ const updateProps = async () => {
 const init = async () => {
   isCountLoading.value = true;
   try {
-    count.value = +(await api.logging.count(requestOptions.value)).total;
+    const { total, unique } = await api.logging.count(requestOptions.value);
+    count.value = +total;
+
+    if (!actionItems.value.length || !scopeItems.value.length) {
+      actionItems.value = unique.actions;
+      scopeItems.value = unique.scopes;
+
+      store.commit("appSearch/pushFields", searchFields.value);
+    }
   } finally {
     isCountLoading.value = false;
   }
@@ -210,28 +223,6 @@ const getServiceProvider = (uuid) => {
   return sps.value.find((s) => s.uuid === uuid) || uuid;
 };
 
-const getFilterItems = async () => {
-  if (actionItems.value.length && scopeItems.value.length) {
-    return;
-  }
-  const { unique } = await api.logging.count({});
-  actionItems.value = unique.actions;
-  scopeItems.value = unique.scopes;
-
-  // if (Object.keys(store.getters["appSearch/customParams"]).length === 0) {
-  //   const hiddenActions = ["monitoring", "regions"];
-  //
-  //   const defaultCustomParams = [];
-  //   actionItems.value.forEach(({ title, uuid }) => {
-  //     if (!hiddenActions.includes(title)) {
-  //       defaultCustomParams.push({ title, value: uuid });
-  //     }
-  //   });
-  //   store.commit("appSearch/setCustomParams", { action: defaultCustomParams });
-  // }
-  store.commit("appSearch/pushFields", searchFields.value);
-};
-
 const isLoading = computed(() => {
   return isFetchLoading.value || isCountLoading.value;
 });
@@ -276,24 +267,8 @@ const scope = computed(() =>
   filter.value.scope?.length ? filter.value.scope : undefined
 );
 
-onMounted(() => {
-  if (!loading.value) {
-    getFilterItems();
-  }
-});
-
 watch(accountId, () => updateProps());
-watch(loading, () => {
-  if (!loading.value) {
-    getFilterItems();
-  }
-});
 watch(uuid, () => updateProps());
-watch(
-  filter,
-  () => {
-    onUpdateOptions(options.value);
-  },
-  { deep: true }
-);
+watch(filter, fetchLogsDebounced, { deep: true });
+watch(options, fetchLogsDebounced);
 </script>

admin-ui/src/components/instance/controls.vue

@@ -109,9 +109,7 @@ export default {
         }
 
         this.showSnackbarSuccess({ message: "Done!" });
-        setTimeout(() => {
-          this.$router.push({ name: "Instances" });
-        }, 100);
+        this.$router.push({ name: "Instances" });
       } catch (err) {
         this.showSnackbarError({
           message: `Error: ${err?.response?.data?.message ?? "Unknown"}.`,
@@ -127,9 +125,7 @@ export default {
       try {
         await api.delete(`/instances/${action}/${this.template.uuid}`);
         this.showSnackbarSuccess({ message: "Done!" });
-        setTimeout(() => {
-          this.$router.push({ name: "Instances" });
-        }, 100);
+        this.$router.push({ name: "Instances" });
       } catch (err) {
         this.showSnackbarError({
           message: `Error: ${err?.response?.data?.message ?? "Unknown"}.`,

admin-ui/src/components/instance/template.vue

@@ -110,9 +110,7 @@ export default {
             message: "Instance edited successfully",
           });
 
-          setTimeout(() => {
-            this.$router.push({ name: "Instances" });
-          }, 1500);
+          this.$router.push({ name: "Instances" });
         })
         .catch((err) => {
           this.showSnackbarError({ message: err });

admin-ui/src/components/instances_table.vue

@@ -140,7 +140,12 @@
 <script>
 import nocloudTable from "@/components/table.vue";
 import instanceIpMenu from "./ui/instanceIpMenu.vue";
-import {compareSearchValue, getDeepObjectValue, getOvhPrice, getState} from "@/functions";
+import {
+  compareSearchValue,
+  getDeepObjectValue,
+  getOvhPrice,
+  getState,
+} from "@/functions";
 import LoginInAccountIcon from "@/components/ui/loginInAccountIcon.vue";
 import searchMixin from "@/mixins/search";
 import InstanceState from "@/components/ui/instanceState.vue";
@@ -286,13 +291,22 @@ export default {
       }
     },
     getNcuPrice(inst) {
-      return this.getPrice(inst) + " " + this.defaultCurrency;
+      const price = this.getPrice(inst);
+      if (!price) {
+        return "";
+      }
+      return price + " " + this.defaultCurrency;
     },
     getAccountPrice(inst) {
-      const accountCurrency = this.getAccount(inst)?.currency || this.defaultCurrency;
+      const price = this.getPrice(inst);
+      if (!price) {
+        return "";
+      }
 
+      const accountCurrency =
+        this.getAccount(inst)?.currency || this.defaultCurrency;
       return (
-        (this.getPrice(inst) * this.getRate(accountCurrency)).toFixed(2) +
+        (price * this.getRate(accountCurrency)).toFixed(2) +
         " " +
         accountCurrency
       );
@@ -379,10 +393,10 @@ export default {
         config: { planCode, duration },
       } = item;
       let key;
-      if(item.type==='ovh'){
+      if (item.type === "ovh") {
         key = `${duration} ${planCode}`;
-      }else{
-        key=item.product
+      } else {
+        key = item.product;
       }
 
       return billingPlan.products[key]?.title;
@@ -417,7 +431,7 @@ export default {
           if (this.headersGetters[key]) {
             value = this.getValue(key, i);
           } else {
-            value=getDeepObjectValue(i,key)
+            value = getDeepObjectValue(i, key);
           }
           return compareSearchValue(
             value,

admin-ui/src/components/modules/ione/instanceCreate.vue

@@ -38,6 +38,27 @@
       </v-row>
 
       <v-row>
+        <v-col cols="6">
+          <v-autocomplete
+            :filter="defaultFilterObject"
+            label="price model"
+            item-text="title"
+            item-value="uuid"
+            :value="instance.billing_plan"
+            :items="plans.list"
+            :rules="planRules"
+            @change="changeBilling"
+          />
+        </v-col>
+        <v-col cols="6">
+          <v-autocomplete
+            label="product"
+            :value="instance.product"
+            :items="products"
+            @change="setProduct"
+          />
+        </v-col>
+
         <v-col cols="6">
           <v-text-field
             @change="(newVal) => setValue('resources.cpu', +newVal)"
@@ -93,27 +114,6 @@
           >
           </v-text-field>
         </v-col>
-        <v-col cols="6">
-          <v-autocomplete
-            :filter="defaultFilterObject"
-            label="price model"
-            item-text="title"
-            item-value="uuid"
-            :value="instance.billing_plan"
-            :items="plans.list"
-            :rules="planRules"
-            @change="changeBilling"
-          />
-        </v-col>
-        <v-col cols="6">
-          <v-autocomplete
-            label="product"
-            :value="instance.product"
-            v-if="products.length > 0"
-            :items="products"
-            @change="setProduct"
-          />
-        </v-col>
       </v-row>
       <v-row>
         <v-col cols="2">
@@ -252,6 +252,11 @@ export default {
       this.setValue("data.vm_id", null);
       this.setValue("data.vm_name", null);
     },
+    driveTypes(newVal) {
+      if (newVal && newVal.length > 0) {
+        this.setValue("resources.drive_type", newVal[0]);
+      }
+    },
   },
 };
 </script>