From 3bfb31d8f3bfc70b5d5fc3cfb7be101d5f449b1d Mon Sep 17 00:00:00 2001 From: Fotis Paraskevopoulos Date: Tue, 20 Aug 2024 12:51:43 +0300 Subject: [PATCH 1/2] Synchronizing code from bitbucket repository --- gui/.dockerignore | 7 +- gui/.env.development | 3 - gui/.env.docker | 2 + gui/.gitignore | 7 +- gui/.nvmrc | 1 + gui/Dockerfile | 21 +- gui/package.json | 2 +- gui/set_env.sh | 17 + gui/src/components/Application/Details.vue | 10 +- .../components/Application/Metrics/index.vue | 3 +- gui/src/components/Application/Resources.vue | 1 + gui/src/components/Modal/ResourceCreation.vue | 1 + gui/src/components/Modal/ResourceForm.vue | 348 +++++++++++++++++- .../Resources/NodeCandidatesTable.vue | 109 ------ gui/src/interfaces/resources.interface.ts | 2 + gui/src/store/modules/resources.ts | 9 +- 16 files changed, 412 insertions(+), 131 deletions(-) delete mode 100644 gui/.env.development create mode 100644 gui/.env.docker create mode 100644 gui/.nvmrc create mode 100644 gui/set_env.sh delete mode 100644 gui/src/containers/Applications/Resources/NodeCandidatesTable.vue diff --git a/gui/.dockerignore b/gui/.dockerignore index 9414382..ae89e39 100644 --- a/gui/.dockerignore +++ b/gui/.dockerignore @@ -1 +1,6 @@ -Dockerfile +**/node_modules +**/dist +/gerrit +/licenses +.env* +!.env.docker diff --git a/gui/.env.development b/gui/.env.development deleted file mode 100644 index 8edc2f8..0000000 --- a/gui/.env.development +++ /dev/null @@ -1,3 +0,0 @@ -NODE_ENV=development -VITE_API_URL=http://localhost:3000 -VITE_API_URL=https://exz-nebulous-backend-staging-2003f98f736b.herokuapp.com diff --git a/gui/.env.docker b/gui/.env.docker new file mode 100644 index 0000000..6529b96 --- /dev/null +++ b/gui/.env.docker @@ -0,0 +1,2 @@ +VITE_API_URL=VITE_API_URL_PLACEHOLDER +CFSB_API_URL=CFSB_API_URL_PLACEHOLDER \ No newline at end of file diff --git a/gui/.gitignore b/gui/.gitignore index e0c3de1..6dc0973 100644 --- a/gui/.gitignore +++ b/gui/.gitignore @@ -6,7 +6,7 @@ yarn-debug.log* yarn-error.log* pnpm-debug.log* lerna-debug.log* - +/*.env.* node_modules dist dist-ssr @@ -24,4 +24,7 @@ dist-ssr # we are using pnpm-lock.yaml package-lock.json -yarn.lock \ No newline at end of file +yarn.lock +/gerrit + +!.env.docker diff --git a/gui/.nvmrc b/gui/.nvmrc new file mode 100644 index 0000000..67d2ffe --- /dev/null +++ b/gui/.nvmrc @@ -0,0 +1 @@ +v20.13.1 \ No newline at end of file diff --git a/gui/Dockerfile b/gui/Dockerfile index b0365c2..5dd7ece 100644 --- a/gui/Dockerfile +++ b/gui/Dockerfile @@ -1,4 +1,19 @@ -FROM docker.io/library/node:21.4.0-bookworm -COPY . /app +# Build the Vue app +FROM node:20 as build-stage WORKDIR /app -RUN corepack enable pnpm && pnpm install && npx vue-tsc +COPY package*.json ./ +COPY .env.docker ./.env + +RUN npm install +COPY ./ . +RUN npm run build + +# Copy the compiled app in an NGINX contaier +FROM nginx:alpine as production-stage +RUN mkdir /app +COPY --from=build-stage /app/dist /usr/share/nginx/html + +# Executing the script at container runtime +COPY set_env.sh /docker-entrypoint.d/ +RUN chmod +x /docker-entrypoint.d/set_env.sh + diff --git a/gui/package.json b/gui/package.json index 14435b1..4ecec78 100644 --- a/gui/package.json +++ b/gui/package.json @@ -3,7 +3,7 @@ "private": true, "version": "0.0.0", "engines": { - "node": "v21.4.0" + "node": "v20.9.0" }, "scripts": { "serve": "vite", diff --git a/gui/set_env.sh b/gui/set_env.sh new file mode 100644 index 0000000..a36f127 --- /dev/null +++ b/gui/set_env.sh @@ -0,0 +1,17 @@ +#!/bin/sh + +ROOT_DIR=/usr/share/nginx/html + +# Replace env vars in files served by NGINX +for file in $ROOT_DIR/assets/*.js* $ROOT_DIR/index.html; +do + echo "Setting VITE_API_URL_PLACEHOlDER environment variables ${VITE_API_URL}" + sed -i 's|VITE_API_URL_PLACEHOLDER|'${VITE_API_URL}'|g' $file + + echo "Setting CFSB_API_URL_PLACEHOLDER environment variables ${CFSB_API_URL}" + sed -i 's|CFSB_API_URL_PLACEHOLDER|'${CFSB_API_URL}'|g' $file + # Your other variables here... +done + + +exec "$@" \ No newline at end of file diff --git a/gui/src/components/Application/Details.vue b/gui/src/components/Application/Details.vue index d9fcd88..1d0e777 100644 --- a/gui/src/components/Application/Details.vue +++ b/gui/src/components/Application/Details.vue @@ -129,7 +129,7 @@ v-model="env.name" type="text" :class="{ - 'input--invalid': v.name?.$error || hasBackendError(`env[${index}].name`) + 'input--invalid': v.name?.$error || hasBackendError(`environmentVariables[${index}].name`) }" /> @@ -142,7 +142,7 @@ v-model="env.value" :type="env.secret ==true ? 'password' : 'text' " :class="{ - 'input--invalid': v.value?.$error || hasBackendError(`env[${index}].value`) + 'input--invalid': v.value?.$error || hasBackendError(`environmentVariables[${index}].value`) }" /> @@ -150,7 +150,11 @@ - + diff --git a/gui/src/components/Application/Metrics/index.vue b/gui/src/components/Application/Metrics/index.vue index af7fcd3..708b298 100644 --- a/gui/src/components/Application/Metrics/index.vue +++ b/gui/src/components/Application/Metrics/index.vue @@ -3,7 +3,8 @@ -
diff --git a/gui/src/components/Application/Resources.vue b/gui/src/components/Application/Resources.vue index 043e796..26f6b46 100644 --- a/gui/src/components/Application/Resources.vue +++ b/gui/src/components/Application/Resources.vue @@ -62,6 +62,7 @@ const resources = computed>(() => uuid: resource.uuid, title: resource.title, platform: resource.platform.title, + regions: resource.regions, enabled: isEnabled } }) diff --git a/gui/src/components/Modal/ResourceCreation.vue b/gui/src/components/Modal/ResourceCreation.vue index 9c16944..280c490 100644 --- a/gui/src/components/Modal/ResourceCreation.vue +++ b/gui/src/components/Modal/ResourceCreation.vue @@ -33,6 +33,7 @@ const resourceData = reactive({ platform: {"uuid":'','title':''} as IPlatform, _platform: [{"uuid":'','title':''} as IPlatform], // TODO Remove this securityGroup:"", + regions:"", subnet:"", endpoint:"", identityVersion:"", diff --git a/gui/src/components/Modal/ResourceForm.vue b/gui/src/components/Modal/ResourceForm.vue index e7e4920..40db4e2 100644 --- a/gui/src/components/Modal/ResourceForm.vue +++ b/gui/src/components/Modal/ResourceForm.vue @@ -1,11 +1,12 @@ diff --git a/gui/src/interfaces/resources.interface.ts b/gui/src/interfaces/resources.interface.ts index 6c83629..9a634c1 100644 --- a/gui/src/interfaces/resources.interface.ts +++ b/gui/src/interfaces/resources.interface.ts @@ -18,6 +18,7 @@ export interface ICredentials{ export interface IResource { uuid: string title: string + regions: string securityGroup: string subnet: string endpoint: string @@ -35,6 +36,7 @@ export interface IAppResource { uuid: string title: string platform: string + regions: string enabled: boolean } diff --git a/gui/src/store/modules/resources.ts b/gui/src/store/modules/resources.ts index dfc7cfb..659015c 100644 --- a/gui/src/store/modules/resources.ts +++ b/gui/src/store/modules/resources.ts @@ -26,7 +26,14 @@ export const useResourceStore = defineStore("resource", { }, async getAllResources(): Promise> { this.platforms = await this.getPlatforms() - this.resources = await resourceService.getAllResources() + let resources = await resourceService.getAllResources() + + resources.results.forEach((r)=>{ + if(!r.regions){ + r.regions = '' + } + }) + this.resources = resources return this.resources }, async getAllNodeCandidate(uuid:string): Promise> { From eb2bbad2a890e8254d56fd7ac8a1ff29278c3873 Mon Sep 17 00:00:00 2001 From: Fotis Paraskevopoulos Date: Wed, 21 Aug 2024 01:49:30 +0300 Subject: [PATCH 2/2] Removing TomSelect because it is no longer updated --- gui/.gitignore | 1 + gui/Dockerfile | 2 +- gui/package.json | 9 +- gui/src/assets/css/app.css | 7 +- gui/src/assets/css/components/_tom-select.css | 173 ---------- .../css/components/_vue-multiselect.css | 78 +++++ .../base-components/TomSelect/TomSelect.vue | 118 ------- gui/src/base-components/TomSelect/index.ts | 3 - .../base-components/TomSelect/tom-select.ts | 145 -------- gui/src/components/Application/Details.vue | 91 +++-- .../Metrics/MetricsTemplateDesktop.vue | 65 ++-- .../Metrics/MetricsTemplateMobile.vue | 22 +- gui/src/components/Modal/ResourceForm.vue | 314 +++++++++--------- gui/src/interfaces/resources.interface.ts | 16 + 14 files changed, 354 insertions(+), 690 deletions(-) delete mode 100644 gui/src/assets/css/components/_tom-select.css create mode 100644 gui/src/assets/css/components/_vue-multiselect.css delete mode 100644 gui/src/base-components/TomSelect/TomSelect.vue delete mode 100644 gui/src/base-components/TomSelect/index.ts delete mode 100644 gui/src/base-components/TomSelect/tom-select.ts diff --git a/gui/.gitignore b/gui/.gitignore index 6dc0973..e5ea6a4 100644 --- a/gui/.gitignore +++ b/gui/.gitignore @@ -28,3 +28,4 @@ yarn.lock /gerrit !.env.docker +.env \ No newline at end of file diff --git a/gui/Dockerfile b/gui/Dockerfile index 5dd7ece..09db3f5 100644 --- a/gui/Dockerfile +++ b/gui/Dockerfile @@ -4,7 +4,7 @@ WORKDIR /app COPY package*.json ./ COPY .env.docker ./.env -RUN npm install +RUN npm install --include-dev COPY ./ . RUN npm run build diff --git a/gui/package.json b/gui/package.json index 4ecec78..99f04b0 100644 --- a/gui/package.json +++ b/gui/package.json @@ -3,7 +3,7 @@ "private": true, "version": "0.0.0", "engines": { - "node": "v20.9.0" + "node": "v20.13.1" }, "scripts": { "serve": "vite", @@ -52,13 +52,13 @@ "tiny-slider": "^2.9.4", "tippy.js": "^6.3.7", "toastify-js": "^1.12.0", - "tom-select": "^2.3.1", "uuid": "^9.0.1", "vite-svg-loader": "^5.1.0", "vue": "^3.3.9", "vue-draggable-next": "^2.2.1", + "vue-multiselect": "^3.0.0-beta.3", "vue-router": "^4.1.6", - "xlsx": "^0.18.5", + "vue3-select-component": "^0.5.2", "zoom-vanilla.js": "^2.0.6" }, "devDependencies": { @@ -76,6 +76,7 @@ "@typescript-eslint/parser": "^6.10.0", "@vitejs/plugin-vue": "^4.2.3", "@vue/eslint-config-standard": "^8.0.1", + "add": "^2.0.6", "autoprefixer": "^10.4.14", "eslint": "^8.53.0", "eslint-config-prettier": "^9.0.0", @@ -93,6 +94,6 @@ "typescript": "^5.2.2", "vite": "^4.4.2", "vue-eslint-parser": "^9.3.2", - "vue-tsc": "^1.8.22" + "vue-tsc": "^2.0.29" } } diff --git a/gui/src/assets/css/app.css b/gui/src/assets/css/app.css index fb84a20..04896b0 100644 --- a/gui/src/assets/css/app.css +++ b/gui/src/assets/css/app.css @@ -37,7 +37,6 @@ @import "simplebar/src/simplebar.css"; @import "dropzone/dist/dropzone.css"; @import "tabulator-tables/dist/css/tabulator.css"; -@import "tom-select/dist/css/tom-select.css"; @import "zoom-vanilla.js/dist/zoom.css"; @import "toastify-js/src/toastify.css"; @import "highlight.js/styles/github.css"; @@ -48,6 +47,7 @@ @import "tiny-slider/dist/tiny-slider.css"; @import "leaflet/dist/leaflet.css"; @import "leaflet.markercluster/dist/MarkerCluster.css"; +@import "vue-multiselect/dist/vue-multiselect.css"; /* |-------------------------------------------------------------------------- @@ -73,9 +73,12 @@ @import "./components/_toastify.css"; @import "./components/_transitions.css"; @import "./components/_zoom-vanilla.css"; -@import "./components/_tom-select.css"; @import "./components/_ckeditor.css"; @import "./components/_litepicker.css"; @import "./components/_full-calendar.css"; @import "./components/_tabulator.css"; +@import "./components/_vue-multiselect.css"; @import "./components/_main.css"; + + + diff --git a/gui/src/assets/css/components/_tom-select.css b/gui/src/assets/css/components/_tom-select.css deleted file mode 100644 index 8f48b6f..0000000 --- a/gui/src/assets/css/components/_tom-select.css +++ /dev/null @@ -1,173 +0,0 @@ -.tom-select { - &.ts-wrapper, - &.plugin-dropdown_input.focus.dropdown-active { - border-width: 1px; - border-style: solid; - box-shadow: theme("boxShadow.sm"); - border-radius: theme("borderRadius.DEFAULT"); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(74 85 104)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); - background-size: 18px; - background-position: center right 0.6rem; - background-repeat: no-repeat; - .ts-control { - border: 0; - display: flex; - outline: none; - min-height: 36px; - align-items: center; - background-color: transparent; - font-size: inherit; - padding: theme("spacing.2") theme("spacing.3"); - input { - font-size: inherit; - } - } - } - &.ts-wrapper.disabled { - background-color: theme("colors.slate.100"); - } - &.ts-wrapper.single.input-active .ts-control { - background-color: transparent; - } - &.ts-wrapper.multi { - &.has-items .ts-control { - column-gap: theme("spacing.[2.5]"); - row-gap: theme("spacing.1"); - padding: theme("spacing.1") theme("spacing.[2.5]"); - } - .ts-control > div { - padding: 0 theme("spacing.2"); - margin: 0 0 0 calc(theme("spacing.[1.5]") * -1); - border-radius: theme("borderRadius.DEFAULT"); - background-color: theme("colors.slate.200"); - } - } - &.ts-wrapper.plugin-remove_button .item .remove { - display: flex; - align-items: center; - justify-content: center; - border-color: theme("colors.slate.300"); - padding: theme("spacing.1") theme("spacing.2"); - } - &.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove { - margin-left: theme("spacing.2"); - } - &.ts-wrapper .dropdown-header { - border-color: theme("colors.slate.200"); - background-color: theme("colors.slate.100"); - padding: theme("spacing.[2.5]"); - font-weight: theme("fontWeight.medium"); - } - &.plugin-dropdown_input.focus.dropdown-active { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' transform='rotate(180)' fill='none' stroke='rgb(74 85 104)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); - } - &.plugin-dropdown_input .dropdown-input-wrap .dropdown-input { - outline: none; - } - .ts-dropdown { - left: -1px; - right: -1px; - width: auto; - z-index: 50; - margin-top: 1px; - font-size: inherit; - box-shadow: theme("boxShadow.sm"); - border-radius: theme("borderRadius.DEFAULT"); - border: 1px solid theme("colors.slate.200"); - .dropdown-input-wrap { - padding: theme("spacing.2"); - .dropdown-input { - border-radius: theme("borderRadius.DEFAULT"); - border: 1px solid theme("colors.slate.200"); - } - } - .optgroup-header { - padding: theme("spacing.[2.5]") theme("spacing.3"); - font-weight: theme("fontWeight.medium"); - background-color: theme("colors.slate.100"); - } - .option { - padding: theme("spacing.[2.5]") theme("spacing.3"); - &[data-selectable] { - &.active:not(.selected) { - color: inherit; - background-color: transparent; - background-color: theme("colors.slate.100"); - } - &:hover:not(.selected) { - color: inherit; - background-color: theme("colors.slate.100"); - } - } - } - .selected { - color: white; - background-color: theme("colors.primary"); - } - [data-selectable] .highlight { - color: white; - background-color: theme("colors.danger"); - } - } -} - -.dark { - .tom-select { - &.ts-wrapper, - &.plugin-dropdown_input.focus.dropdown-active { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(255 255 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); - .ts-control { - color: theme("colors.slate.300"); - } - } - &.ts-wrapper.disabled { - border-color: transparent; - background-color: theme("colors.darkmode.800" / 50%); - } - &.ts-wrapper.multi { - .ts-control > div { - color: theme("colors.slate.300"); - background-color: theme("colors.darkmode.600"); - } - } - &.ts-wrapper.plugin-remove_button .item .remove { - border-color: theme("colors.darkmode.400"); - } - &.ts-wrapper .dropdown-header { - border-color: theme("colors.darkmode.800"); - background-color: theme("colors.darkmode.800"); - } - &.plugin-dropdown_input.focus.dropdown-active { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' transform='rotate(180)' fill='none' stroke='rgb(255 255 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); - } - .ts-dropdown { - color: theme("colors.slate.300"); - border-color: theme("colors.darkmode.800"); - background-color: theme("colors.darkmode.700"); - .dropdown-input-wrap { - .dropdown-input { - border-color: theme("colors.darkmode.800"); - background-color: theme("colors.darkmode.600"); - } - } - .optgroup-header { - color: theme("colors.slate.300"); - background-color: theme("colors.darkmode.800"); - } - .option { - &[data-selectable] { - &.active:not(.selected) { - background-color: theme("colors.darkmode.600"); - } - &:hover:not(.selected) { - background-color: theme("colors.darkmode.600"); - } - } - } - } - } - .ts-wrapper { - border-color: theme("colors.darkmode.800"); - background-color: theme("colors.darkmode.800"); - } -} diff --git a/gui/src/assets/css/components/_vue-multiselect.css b/gui/src/assets/css/components/_vue-multiselect.css new file mode 100644 index 0000000..d575a79 --- /dev/null +++ b/gui/src/assets/css/components/_vue-multiselect.css @@ -0,0 +1,78 @@ +.dark{ + + .multiselect, + .multiselect__input, + .multiselect__single { + font-family: inherit; + font-size: inherit; + } + + .multiselect { + color: inherit; + } + + .multiselect__content-wrapper { + background: theme('colors.darkmode.700'); + + } + + .multiselect--disabled { + background: theme('colors.darkmode.700'); + } + + .multiselect__tag{ + color:inherit; + background: theme('colors.darkmode.600'); + } + + .multiselect__tags { + background: theme('colors.darkmode.800'); + border-radius: theme('borderRadius.DEFAULT'); + font-size:inherit; + + } + .multiselect__tag-icon::after { + color: theme('colors.slate.500'); + } + + .multiselect__tag-icon:focus::after, + .multiselect__tag-icon:hover::after { + color: white; + } + + .multiselect__option--highlight { + background:theme('colors.slate.500'); + outline: none; + color: white; + } + + .multiselect__option--highlight::after { + content: attr(data-select); + background:theme('colors.slate.500'); + color: white; + } + + + .multiselect__option--selected { + background: theme('colors.slate.700'); + color: inherit; + font-weight: bold; + } + + .multiselect__input::placeholder { + color: theme("colors.slate.500"); + } + + .multiselect__input, + .multiselect__single{ + background: theme('colors.darkmode.700'); + } + + + .multiselect__spinner::before, + .multiselect__spinner::after{ + border-color: theme('colors.slate.600') transparent transparent; + } + +} + diff --git a/gui/src/base-components/TomSelect/TomSelect.vue b/gui/src/base-components/TomSelect/TomSelect.vue deleted file mode 100644 index d34ace6..0000000 --- a/gui/src/base-components/TomSelect/TomSelect.vue +++ /dev/null @@ -1,118 +0,0 @@ - - - diff --git a/gui/src/base-components/TomSelect/index.ts b/gui/src/base-components/TomSelect/index.ts deleted file mode 100644 index f6faba1..0000000 --- a/gui/src/base-components/TomSelect/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import TomSelect from "./TomSelect.vue" - -export default TomSelect diff --git a/gui/src/base-components/TomSelect/tom-select.ts b/gui/src/base-components/TomSelect/tom-select.ts deleted file mode 100644 index ea966dc..0000000 --- a/gui/src/base-components/TomSelect/tom-select.ts +++ /dev/null @@ -1,145 +0,0 @@ -import { TomSelectProps, TomSelectElement, TomSelectEmit } from "./TomSelect.vue" -import { TomSettings, RecursivePartial } from "tom-select/src/types" -import TomSelect from "tom-select" -import _ from "lodash" -import TomSelectPlugin from "tom-select" - -const setValue = (el: TomSelectElement, props: TomSelectProps) => { - if (props.modelValue.length) { - if (Array.isArray(props.modelValue)) { - for (const value of props.modelValue) { - const selectedOption = Array.from(el).find( - (option) => option instanceof HTMLOptionElement && option.value === value - ) - - if (selectedOption !== undefined && selectedOption instanceof HTMLOptionElement) { - selectedOption.selected = true - } - } - } else { - el.value = props.modelValue - } - } -} - -const init = ( - originalEl: TomSelectElement, - clonedEl: TomSelectElement, - props: TomSelectProps, - computedOptions: RecursivePartial, - emit: TomSelectEmit -): TomSelectPlugin => { - // On option add - if (Array.isArray(props.modelValue)) { - computedOptions = { - onOptionAdd: function (value: string | number) { - // Add new option - const newOption = document.createElement("option") - newOption.value = value.toString() - newOption.text = value.toString() - originalEl.add(newOption) - - // Emit option add - emit("optionAdd", value) - }, - ...computedOptions - } - } - - clonedEl.TomSelect = new TomSelect(clonedEl, computedOptions) - - // On change - clonedEl.TomSelect.on("change", function (selectedItems: string[] | string) { - emit("update:modelValue", Array.isArray(selectedItems) ? [...selectedItems] : selectedItems) - }) - - clonedEl.TomSelect.on("change", function (selectedItems: string[] | string) { - emit("change", Array.isArray(selectedItems) ? [...selectedItems] : selectedItems) - }) - - return clonedEl.TomSelect -} - -const getOptions = (options: HTMLCollection | undefined, tempOptions: Element[] = []) => { - if (options) { - Array.from(options).forEach(function (optionEl) { - if (optionEl instanceof HTMLOptGroupElement) { - getOptions(optionEl.children, tempOptions) - } else { - tempOptions.push(optionEl) - } - }) - } - - return tempOptions -} - -const updateValue = ( - originalEl: TomSelectElement, - clonedEl: TomSelectElement, - value: string | string[], - props: TomSelectProps, - computedOptions: RecursivePartial, - emit: TomSelectEmit -) => { - // Remove old options - for (const [, option] of Object.entries(clonedEl.TomSelect.options)) { - if ( - !getOptions(originalEl.children).filter((optionEl) => { - return optionEl instanceof HTMLOptionElement && optionEl.value === option.value - }).length - ) { - clonedEl.TomSelect.removeOption(option.value) - } - } - - // Update classnames - const initialClassNames = clonedEl.getAttribute("data-initial-class")?.split(" ") - clonedEl.setAttribute( - "class", - [ - ...Array.from(originalEl.classList), - ...Array.from(clonedEl.classList).filter((className) => initialClassNames?.indexOf(className) === -1) - ].join(" ") - ) - clonedEl.TomSelect.wrapper.setAttribute( - "class", - [ - ...Array.from(originalEl.classList), - ...Array.from(clonedEl.TomSelect.wrapper.classList).filter( - (className) => initialClassNames?.indexOf(className) === -1 - ) - ].join(" ") - ) - clonedEl.setAttribute("data-initial-class", Array.from(originalEl.classList).join(" ")) - - // Add new options - const options = originalEl.children - if (options) { - Array.from(options).forEach(function (optionEl) { - clonedEl.TomSelect.addOption({ - text: optionEl.textContent, - value: optionEl.getAttribute("value") - }) - }) - } - - // Refresh options - clonedEl.TomSelect.refreshOptions(false) - - // Update value - if ( - value === "" || - (!Array.isArray(value) && value !== clonedEl.TomSelect.getValue()) || - (Array.isArray(value) && !_.isEqual(value, clonedEl.TomSelect.getValue())) - ) { - clonedEl.TomSelect.destroy() - if (originalEl.innerHTML) { - clonedEl.innerHTML = originalEl.innerHTML - } - setValue(clonedEl, props) - init(originalEl, clonedEl, props, computedOptions, emit) - } -} - -export { setValue, init, updateValue } diff --git a/gui/src/components/Application/Details.vue b/gui/src/components/Application/Details.vue index 1d0e777..ab64d53 100644 --- a/gui/src/components/Application/Details.vue +++ b/gui/src/components/Application/Details.vue @@ -40,27 +40,15 @@
- - - - + :options="autocompleteOptions" + + />
@@ -172,22 +160,20 @@ + diff --git a/gui/src/components/Application/Metrics/MetricsTemplateDesktop.vue b/gui/src/components/Application/Metrics/MetricsTemplateDesktop.vue index 80f9d49..d2dbcb2 100644 --- a/gui/src/components/Application/Metrics/MetricsTemplateDesktop.vue +++ b/gui/src/components/Application/Metrics/MetricsTemplateDesktop.vue @@ -111,25 +111,17 @@
- - - - + }" + :options="componentList" + /> +
@@ -306,25 +298,16 @@
- - - - + }" + :options="componentList" + /> +
@@ -389,13 +372,13 @@ \ No newline at end of file + diff --git a/gui/src/interfaces/resources.interface.ts b/gui/src/interfaces/resources.interface.ts index 9a634c1..ed34cf1 100644 --- a/gui/src/interfaces/resources.interface.ts +++ b/gui/src/interfaces/resources.interface.ts @@ -42,6 +42,22 @@ export interface IAppResource { +export interface IRegion { + region_name: string + region: string + endpoints: any + protocol: any +} + + +export interface IRegions { + [key: string]: Array +} + + + + + export interface INodeCandidate { id: number region: string