ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2024-09-20 11:27:26 +02:00
Code Issues Packages Releases Activity

rework tagManagement modal render

Browse Source
This commit is contained in:
Christoph Kluge 2024-09-11 11:28:11 +02:00
parent 64cc19b252
commit f0de422c6e
2 changed files with 131 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/frontend/src/Job.root.svelte
View File

@ -326,13 +326,13 @@
<Card class="mb-3"> <Card class="mb-3">
<CardBody> <CardBody>
<Row class="mb-2"> <Row class="mb-2">
<Col xs="auto"> {#if $initq.data}
{#if $initq.data} <Col xs="auto">
<Button outline on:click={() => (isMetricsSelectionOpen = true)} color="primary"> <Button outline on:click={() => (isMetricsSelectionOpen = true)} color="primary">
Select Metrics Select Metrics
</Button> </Button>
{/if} </Col>
</Col> {/if}
</Row> </Row>
<hr/> <hr/>
<Row> <Row>

195
web/frontend/src/job/TagManagement.svelte
View File

@ -186,81 +186,130 @@
{/if} {/if}
</ModalHeader> </ModalHeader>
<ModalBody> <ModalBody>
<Input <InputGroup class="mb-3">
style="width: 100%;" <Input
type="text" type="text"
placeholder="Search Tags" placeholder="Search Tags"
bind:value={filterTerm} bind:value={filterTerm}
/> />
<InputGroupText id={`tag-management-info-modal`} style="cursor:help; font-size:larger;align-content:center;">
<Icon name=info-circle/>
</InputGroupText>
<Tooltip
target={`tag-management-info-modal`}
placement="right">
Search using "type: name". If no tag matches your search, a
button for creating a new one will appear.
</Tooltip>
</InputGroup>
<Alert color="info"> <div class="mb-3 scroll-group">
Search using "<code>type: name</code>". If no tag matches your search, a {#if usedTagsFiltered.length > 0}
button for creating a new one will appear. <ListGroup class="mb-3">
</Alert> {#each usedTagsFiltered as utag}
<br /> <ListGroupItem color="primary">
<ul class="list-group"> <Tag tag={utag} />
{#each allTagsFiltered as tag}
<ListGroupItem>
<Tag {tag} />
<span style="float: right;"> <span style="float: right;">
{#if pendingChange === tag.id} {#if pendingChange === utag.id}
<Spinner size="sm" secondary /> <Spinner size="sm" secondary />
{:else if job.tags.find((t) => t.id == tag.id)} {:else}
<Button <Button
size="sm" size="sm"
outline color="danger"
color="danger" on:click={() => removeTagFromJob(utag)}
on:click={() => removeTagFromJob(tag)} >
> <Icon name="x" />
<Icon name="x" /> </Button>
</Button> {/if}
{:else} </span>
<Button </ListGroupItem>
size="sm" {/each}
outline </ListGroup>
color="success" {:else if filterTerm !== ""}
on:click={() => addTagToJob(tag)} <ListGroup class="mb-3">
> <ListGroupItem disabled>
<Icon name="plus" /> <i>No attached tags matching.</i>
</Button> </ListGroupItem>
{/if} </ListGroup>
</span>
</ListGroupItem>
{:else} {:else}
<ListGroupItem disabled> <ListGroup class="mb-3">
<i>No tags matching</i> <ListGroupItem disabled>
</ListGroupItem> <i>Job has no attached tags.</i>
{/each} </ListGroupItem>
</ul> </ListGroup>
<br /> {/if}
{#if unusedTagsFiltered.length > 0}
<ListGroup class="">
{#each unusedTagsFiltered as uutag}
<ListGroupItem color="dark">
<Tag tag={uutag} />
<span style="float: right;">
{#if pendingChange === uutag.id}
<Spinner size="sm" secondary />
{:else}
<Button
size="sm"
color="success"
on:click={() => addTagToJob(uutag)}
>
<Icon name="plus" />
</Button>
{/if}
</span>
</ListGroupItem>
{/each}
</ListGroup>
{:else if filterTerm !== ""}
<ListGroup class="">
<ListGroupItem disabled>
<i>No unused tags matching.</i>
</ListGroupItem>
</ListGroup>
{:else}
<ListGroup class="">
<ListGroupItem disabled>
<i>No unused tags available.</i>
</ListGroupItem>
</ListGroup>
{/if}
</div>
{#if newTagType && newTagName && isNewTag(newTagType, newTagName)} {#if newTagType && newTagName && isNewTag(newTagType, newTagName)}
<div class="d-flex"> <Row>
<Button <Col xs={isAdmin ? 7 : 12} md={12} lg={isAdmin ? 7 : 12} xl={12} xxl={isAdmin ? 7 : 12} class="mb-2">
style="margin-right: 10px;" <Button
outline outline
color="success" style="width:100%;"
on:click={(e) => ( color="success"
e.preventDefault(), createTag(newTagType, newTagName, newTagScope) on:click={(e) => (
)} e.preventDefault(), createTag(newTagType, newTagName, newTagScope)
> )}
Create & Add Tag:
<Tag tag={{ type: newTagType, name: newTagName, scope: newTagScope }} clickable={false}/>
</Button>
{#if roles && authlevel >= roles.admin}
<select
style="max-width: 175px;"
class="form-select"
bind:value={newTagScope}
> >
<option value={username}>Scope: Private</option> Add new tag:
<option value={"global"}>Scope: Global</option> <Tag tag={{ type: newTagType, name: newTagName, scope: newTagScope }} clickable={false}/>
<option value={"admin"}>Scope: Admin</option> </Button>
</select> </Col>
{#if isAdmin}
<Col xs={5} md={12} lg={5} xl={12} xxl={5} class="mb-2" style="align-content:center;">
<Input type="select" bind:value={newTagScope}>
<option value={username}>Scope: Private</option>
<option value={"global"}>Scope: Global</option>
<option value={"admin"}>Scope: Admin</option>
</Input>
</Col>
{/if} {/if}
</div> </Row>
{:else if allTagsFiltered.length == 0} {:else if filterTerm !== "" && allTagsFiltered.length == 0}
<Alert>Search Term is not a valid Tag (<code>type: name</code>)</Alert> <Alert color="info">
Search Term is not a valid Tag (<code>type: name</code>)
</Alert>
{:else if filterTerm == "" && unusedTagsFiltered.length == 0}
<Alert color="info">
Type "<code>type: name</code>" into the search field to create a new tag.
</Alert>
{/if} {/if}
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
@ -271,6 +320,7 @@
<Button outline on:click={() => (isOpen = true)}> <Button outline on:click={() => (isOpen = true)}>
Manage Tags <Icon name="tags" /> Manage Tags <Icon name="tags" />
</Button> </Button>
{:else} {:else}
<InputGroup class="mb-3"> <InputGroup class="mb-3">
@ -399,9 +449,8 @@
{/if} {/if}
<style> <style>
ul.list-group { .scroll-group {
max-height: 450px; max-height: 500px;
margin-bottom: 10px; overflow-y: auto;
overflow: scroll;
} }
</style> </style>