feat: ui helper for workspaced worker tags (#3595)

* feat: ui helper for workspaced worker tags

* fix: add red border when required
This commit is contained in:
HugoCasa
2024-04-23 23:10:29 +02:00
committed by GitHub
parent ba4efb7b7e
commit 358e2d5a49
4 changed files with 74 additions and 20 deletions

View File

@@ -5,6 +5,8 @@
import DefaultTagsInner from './DefaultTagsInner.svelte'
export let defaultTagPerWorkspace: boolean | undefined = undefined
let placement: 'bottom-end' | 'top-end' = 'bottom-end'
</script>
@@ -22,5 +24,5 @@
>
</Button>
</svelte:fragment>
<DefaultTagsInner />
</Popup>
<DefaultTagsInner bind:defaultTagPerWorkspace />
</Popup>

View File

@@ -9,15 +9,7 @@
import Toggle from './Toggle.svelte'
let defaultTags: string[] | undefined = undefined
let defaultTagPerWorkspace: boolean | undefined = undefined
async function loadDefaultTagsPerWorkspace() {
try {
defaultTagPerWorkspace = await WorkerService.isDefaultTagsPerWorkspace()
} catch (err) {
sendUserToast(`Could not load default tag per workspace setting: ${err}`, true)
}
}
export let defaultTagPerWorkspace: boolean | undefined = undefined
async function loadDefaultTags() {
try {
@@ -28,7 +20,6 @@
}
loadDefaultTags()
loadDefaultTagsPerWorkspace()
</script>
<div class="flex flex-col w-80 p-2 gap-2">

View File

@@ -4,7 +4,7 @@
import Multiselect from 'svelte-multiselect'
import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
import { ConfigService } from '$lib/gen'
import { ConfigService, WorkspaceService, type Workspace } from '$lib/gen'
import ConfirmationModal from './common/confirmationModal/ConfirmationModal.svelte'
import { createEventDispatcher } from 'svelte'
import { sendUserToast } from '$lib/toast'
@@ -130,6 +130,15 @@
}
}
let workspaceTag = ''
export let defaultTagPerWorkspace: boolean | undefined = undefined
let workspaces: Workspace[] = []
async function listWorkspaces() {
workspaces = await WorkspaceService.listWorkspacesAsSuperAdmin()
}
$: $superadmin && listWorkspaces()
const dispatch = createEventDispatcher()
async function deleteWorkerGroup() {
@@ -317,12 +326,21 @@
size="xs"
on:click={() => {
if (nconfig != undefined) {
nconfig.worker_tags = defaultTags.concat(nativeTags)
nconfig.worker_tags = defaultTagPerWorkspace
? defaultTags.concat(nativeTags).map((nt) => `${nt}-${workspaceTag}`)
: defaultTags.concat(nativeTags)
dirty = true
}
}}
disabled={defaultTagPerWorkspace && !workspaceTag}
>
Reset to all tags <Tooltip>{defaultTags.concat(nativeTags).join(', ')}</Tooltip>
Reset to all tags <Tooltip
>{(defaultTagPerWorkspace
? defaultTags.concat(nativeTags).map((nt) => `${nt}-${workspaceTag}`)
: defaultTags.concat(nativeTags)
).join(', ')}</Tooltip
>
</Button>
<Button
variant="contained"
@@ -330,12 +348,20 @@
size="xs"
on:click={() => {
if (nconfig != undefined) {
nconfig.worker_tags = defaultTags
nconfig.worker_tags = defaultTagPerWorkspace
? defaultTags.map((nt) => `${nt}-${workspaceTag}`)
: defaultTags
dirty = true
}
}}
disabled={defaultTagPerWorkspace && !workspaceTag}
>
Reset to all tags minus native ones <Tooltip>{defaultTags.join(', ')}</Tooltip>
Reset to all tags minus native ones <Tooltip
>{(defaultTagPerWorkspace
? defaultTags.map((nt) => `${nt}-${workspaceTag}`)
: defaultTags
).join(', ')}</Tooltip
>
</Button>
<Button
variant="contained"
@@ -343,13 +369,37 @@
size="xs"
on:click={() => {
if (nconfig != undefined) {
nconfig.worker_tags = nativeTags
nconfig.worker_tags = defaultTagPerWorkspace
? nativeTags.map((nt) => `${nt}-${workspaceTag}`)
: nativeTags
dirty = true
}
}}
disabled={defaultTagPerWorkspace && !workspaceTag}
>
Reset to native tags <Tooltip>{nativeTags.join(', ')}</Tooltip>
Reset to native tags <Tooltip
>{(defaultTagPerWorkspace
? nativeTags.map((nt) => `${nt}-${workspaceTag}`)
: nativeTags
).join(', ')}</Tooltip
>
</Button>
{#if defaultTagPerWorkspace}
<AutoComplete
bind:selectedItem={workspaceTag}
noInputStyles
hideArrow={true}
items={workspaces.map((w) => w.id)}
inputClassName={'flex !font-gray-600 !font-primary !bg-surface-primary ' +
(!workspaceTag ? '!border-red-600/60 !dark:border-red-400/70' : '')}
dropdownClassName="!text-sm !py-2 !rounded-sm !border-gray-200 !border !shadow-md"
className="!font-gray-600 !font-primary !bg-surface-primary"
create
onCreate={(c) => c}
placeholder="Workspace ID"
/>
{/if}
</div>
<div class="max-w mt-2 items-center gap-1 pt-2">
{#if nconfig?.worker_tags !== undefined && nconfig?.worker_tags.length > 0}

View File

@@ -65,6 +65,15 @@
}
}
let defaultTagPerWorkspace: boolean | undefined = undefined
async function loadDefaultTagsPerWorkspace() {
try {
defaultTagPerWorkspace = await WorkerService.isDefaultTagsPerWorkspace()
} catch (err) {
sendUserToast(`Could not load default tag per workspace setting: ${err}`, true)
}
}
onMount(() => {
intervalId = setInterval(() => {
loadWorkers()
@@ -78,6 +87,7 @@
loadWorkers()
loadWorkerGroups()
loadCustomTags()
$: $superadmin && loadDefaultTagsPerWorkspace()
onDestroy(() => {
if (intervalId) {
@@ -111,7 +121,7 @@
}}
/>
</div>
<div><DefaultTags /> </div>
<div><DefaultTags bind:defaultTagPerWorkspace /> </div>
</div>
{/if}
</PageHeader>
@@ -180,6 +190,7 @@
activeWorkers={worker_group?.[1].flatMap((x) =>
x[1]?.filter((y) => (y.last_ping ?? 0) < 15)
)?.length ?? 0}
{defaultTagPerWorkspace}
/>
<DataTable>