ui: Add a diff summary

This commit is contained in:
nemunaire 2023-11-23 17:43:13 +01:00
parent 5b2b8143fb
commit ba2c004b00
2 changed files with 125 additions and 26 deletions

View File

@ -0,0 +1,67 @@
<script lang="ts">
import { t } from '$lib/translations';
export let zoneDiff: Array<string>;
let zoneDiffCreated = 0;
let zoneDiffDeleted = 0;
let zoneDiffModified = 0;
let zoneDiffOther = 0;
$: {
zoneDiffCreated = 0;
zoneDiffDeleted = 0;
zoneDiffModified = 0;
zoneDiffOther = 0;
if (zoneDiff && zoneDiff.length) {
zoneDiff.forEach(
(msg: string) => {
if (/^± MODIFY/.test(msg)) {
zoneDiffModified += 1;
} else if (/^\+ CREATE/.test(msg)) {
zoneDiffCreated += 1;
} else if (/^- DELETE/.test(msg)) {
zoneDiffDeleted += 1;
} else if (/^REFRESH/.test(msg)) {
zoneDiffOther += 1;
}
}
);
}
}
</script>
{#if zoneDiff}
{#if zoneDiffCreated}
<span class="text-success">
{$t('domains.apply.additions', {count: zoneDiffCreated})}
</span>
{/if}
{#if zoneDiffCreated && zoneDiffDeleted}
&ndash;
{/if}
{#if zoneDiffDeleted}
<span class="text-danger">
{$t('domains.apply.deletions', {count: zoneDiffDeleted})}
</span>
{/if}
{#if (zoneDiffCreated || zoneDiffDeleted) && zoneDiffModified}
&ndash;
{/if}
{#if zoneDiffModified}
<span class="text-warning">
{$t('domains.apply.modifications', {count: zoneDiffModified})}
</span>
{/if}
{#if (zoneDiffCreated || zoneDiffDeleted || zoneDiffModified) && (zoneDiff.length - zoneDiffCreated - zoneDiffDeleted - zoneDiffModified !== 0)}
&ndash;
{/if}
{#if zoneDiff.length - zoneDiffCreated - zoneDiffDeleted - zoneDiffModified !== 0}
<span class="text-info">
{$t('domains.apply.others', {count: zoneDiff.length - zoneDiffCreated - zoneDiffDeleted - zoneDiffModified})}
</span>
{/if}
{:else}
{$t('domains.apply.modifications', {count: 0})}
{/if}

View File

@ -24,6 +24,10 @@
getDomain as APIGetDomain,
deleteDomain as APIDeleteDomain,
} from '$lib/api/domains';
import {
diffZone as APIDiffZone,
} from '$lib/api/zone';
import DiffSummary from '$lib/components/DiffSummary.svelte';
import ModalDiffZone, { controls as ctrlDiffZone } from '$lib/components/ModalDiffZone.svelte';
import ModalDomainDelete, { controls as ctrlDomainDelete } from '$lib/components/ModalDomainDelete.svelte';
import ModalUploadZone, { controls as ctrlUploadZone } from '$lib/components/ModalUploadZone.svelte';
@ -238,32 +242,60 @@
<div class="flex-fill" />
{#if $page.data.isZonePage && data.domain.zone_history && $domains_idx[selectedDomain] && data.domain.id === $domains_idx[selectedDomain].id}
<ButtonGroup class="mt-2 w-100">
{#if $domains_idx[selectedDomain].zone_history && selectedHistory === $domains_idx[selectedDomain].zone_history[0]}
<Button
size="lg"
color="success"
title={$t('domains.actions.propagate')}
on:click={showDiff}
>
<Icon name="cloud-upload" aria-hidden="true" />
{$t('domains.actions.propagate')}
</Button>
{:else}
<Button
size="lg"
color="warning"
title={$t('domains.actions.rollback')}
on:click={showDiff}
>
<Icon name="cloud-upload" aria-hidden="true" />
{$t('domains.actions.rollback')}
</Button>
{/if}
</ButtonGroup>
<p class="mt-2 mb-1 text-center">
X changes
</p>
{#if $domains_idx[selectedDomain].zone_history && selectedHistory === $domains_idx[selectedDomain].zone_history[0]}
<Button
size="lg"
color="success"
title={$t('domains.actions.propagate')}
on:click={showDiff}
>
<Icon name="cloud-upload" aria-hidden="true" />
{$t('domains.actions.propagate')}
</Button>
<p class="mt-2 mb-1 text-center">
{#key $thisZone}
{#await APIDiffZone(data.domain, '@', selectedHistory)}
{$t('wait.wait')}
{:then zoneDiff}
<DiffSummary
{zoneDiff}
/>
{/await}
{/key}
</p>
{:else}
<Button
size="lg"
color="warning"
title={$t('domains.actions.rollback')}
on:click={showDiff}
>
<Icon name="cloud-upload" aria-hidden="true" />
{$t('domains.actions.rollback')}
</Button>
<p class="mt-2 mb-1 text-center">
{#await getDomain(data.domain.id)}
Chargement des informations de l'historique
{:then domain}
{#each domain.zone_history.filter((e) => e.id === selectedHistory) as history}
{#if history.published}
Publiée le
{new Intl.DateTimeFormat(undefined, {dateStyle: "long", timeStyle: "long"}).format(new Date(history.published))}
{:else if history.commit_date}
Enregistrée le
{new Intl.DateTimeFormat(undefined, {dateStyle: "long", timeStyle: "long"}).format(new Date(history.commit_date))}
{:else}
Dernière modification le
{new Intl.DateTimeFormat(undefined, {dateStyle: "long", timeStyle: "long"}).format(new Date(history.last_modified))}
{/if}
{#if history.commit_message}
<br>
{history.commit_message}
{/if}
{/each}
{/await}
</p>
{/if}
{/if}
{:else}
<div class="mt-4 text-center">