-
Notifications
You must be signed in to change notification settings - Fork 39
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: imlpement the UI for configuring extensions during cluster create
Fixes: #207 The UI allows selecting installed extensions before adding machines to a cluster during cluster creation or scaling. Signed-off-by: Artem Chernyshev <[email protected]>
- Loading branch information
Showing
16 changed files
with
323 additions
and
74 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| <!-- | ||
| Copyright (c) 2024 Sidero Labs, Inc. | ||
|
|
||
| Use of this software is governed by the Business Source License | ||
| included in the LICENSE file. | ||
| --> | ||
| <template> | ||
| <svg viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M10 3.5a1.5 1.5 0 013 0V4a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-.5a1.5 1.5 0 000 3h.5a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-.5a1.5 1.5 0 00-3 0v.5a1 1 0 01-1 1H6a1 1 0 01-1-1v-3a1 1 0 00-1-1h-.5a1.5 1.5 0 010-3H4a1 1 0 001-1V6a1 1 0 011-1h3a1 1 0 001-1v-.5z" /> | ||
| </svg> | ||
| </template> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| <!-- | ||
| Copyright (c) 2024 Sidero Labs, Inc. | ||
|
|
||
| Use of this software is governed by the Business Source License | ||
| included in the LICENSE file. | ||
| --> | ||
| <template> | ||
| <svg viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> | ||
| <mask id="toggle2"> | ||
| <rect id="cover" x="-5%" y="-5%" width="110%" height="110%" fill="white"/> | ||
| <circle cx="17" cy="3" r="4" fill="black"/> | ||
| </mask> | ||
| <path mask="url(#toggle2)" d="M10 3.5a1.5 1.5 0 013 0V4a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-.5a1.5 1.5 0 000 3h.5a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-.5a1.5 1.5 0 00-3 0v.5a1 1 0 01-1 1H6a1 1 0 01-1-1v-3a1 1 0 00-1-1h-.5a1.5 1.5 0 010-3H4a1 1 0 001-1V6a1 1 0 011-1h3a1 1 0 001-1v-.5z" /> | ||
| <circle cx="17" cy="3" r="2.5" fill="#FF5F2A"/> | ||
| </svg> | ||
| </template> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -138,4 +138,4 @@ const openDocs = () => { | |
| .heading { | ||
| @apply text-xl text-naturals-N14; | ||
| } | ||
| </style> | ||
| </style> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,140 @@ | ||
| <!-- | ||
| Copyright (c) 2024 Sidero Labs, Inc. | ||
|
|
||
| Use of this software is governed by the Business Source License | ||
| included in the LICENSE file. | ||
| --> | ||
| <template> | ||
| <div class="modal-window flex flex-col gap-4" style="height: 90%;"> | ||
| <div class="heading"> | ||
| <h3 class="text-base text-naturals-N14"> | ||
| Set Extensions | ||
| </h3> | ||
| <close-button @click="close" /> | ||
| </div> | ||
|
|
||
| <div v-if="machineStatus" class="flex flex-col gap-4 flex-1 overflow-hidden"> | ||
| <extensions-picker | ||
| v-model="requestedExtensions" | ||
| :talos-version="machineStatus?.spec.talos_version!.slice(1)" class="flex-1" | ||
| /> | ||
|
|
||
| <div class="flex justify-between gap-4"> | ||
| <t-button @click="close" type="secondary"> | ||
| Cancel | ||
| </t-button> | ||
| <div class="flex gap-4"> | ||
| <t-button @click="() => updateExtensions()" icon="reset" :disabled="modelValue === undefined"> | ||
| Revert | ||
| </t-button> | ||
| <t-button @click="() => updateExtensions(requestedExtensions)" type="highlighted"> | ||
| Save | ||
| </t-button> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| <div v-else class="flex items-center justify-center"> | ||
| <t-spinner class="w-6 h-6"/> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import CloseButton from "@/views/omni/Modals/CloseButton.vue"; | ||
| import TButton from "@/components/common/Button/TButton.vue"; | ||
| import ExtensionsPicker from "@/views/omni/Extensions/ExtensionsPicker.vue"; | ||
| import { computed, ref, toRefs, watch } from "vue"; | ||
| import Watch from "@/api/watch"; | ||
| import { Resource } from "@/api/grpc"; | ||
| import { MachineStatusSpec } from "@/api/omni/specs/omni.pb"; | ||
| import { DefaultNamespace, MachineStatusType } from "@/api/resources"; | ||
| import { Runtime } from "@/api/common/omni.pb"; | ||
| import TSpinner from "@/components/common/Spinner/TSpinner.vue"; | ||
| import { closeModal } from "@/modal"; | ||
|
|
||
| const props = defineProps<{ | ||
| machine: string | ||
| modelValue?: string[] | ||
| onSave: (e?: string[]) => void | ||
| }>(); | ||
|
|
||
| const { | ||
| machine, | ||
| modelValue, | ||
| } = toRefs(props); | ||
|
|
||
| const close = () => { | ||
| closeModal(); | ||
| }; | ||
|
|
||
| const requestedExtensions = ref<Record<string, boolean>>({}); | ||
|
|
||
| if (modelValue.value) { | ||
| for (const key of modelValue.value) { | ||
| requestedExtensions.value[key] = true; | ||
| } | ||
| } | ||
|
|
||
| const machineStatus = ref<Resource<MachineStatusSpec>>(); | ||
| const machineStatusWatch = new Watch(machineStatus); | ||
|
|
||
| watch(machineStatus, () => { | ||
| if (modelValue.value !== undefined) { | ||
| return; | ||
| } | ||
|
|
||
| const extensions = machineStatus.value?.spec.schematic?.extensions; | ||
| if (!extensions) { | ||
| return; | ||
| } | ||
|
|
||
| requestedExtensions.value = {}; | ||
|
|
||
| for (const extension of extensions) { | ||
| requestedExtensions.value[extension] = true; | ||
| } | ||
| }); | ||
|
|
||
| machineStatusWatch.setup(computed(() => { | ||
| return { | ||
| resource: { | ||
| id: machine.value, | ||
| namespace: DefaultNamespace, | ||
| type: MachineStatusType, | ||
| }, | ||
| runtime: Runtime.Omni | ||
| } | ||
| })); | ||
|
|
||
| const updateExtensions = (extensions?: Record<string, boolean>) => { | ||
| if (extensions === undefined) { | ||
| props.onSave(); | ||
| } else { | ||
| const list: string[] = []; | ||
| for (const key in extensions) { | ||
| if (!extensions[key]) { | ||
| continue; | ||
| } | ||
|
|
||
| list.push(key); | ||
| } | ||
|
|
||
| list.sort(); | ||
|
|
||
| props.onSave(list); | ||
| } | ||
|
|
||
| close(); | ||
| } | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| .modal-window { | ||
| @apply w-1/2 h-auto p-8; | ||
| } | ||
|
|
||
| .heading { | ||
| @apply flex justify-between items-center text-xl text-naturals-N14; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.