-
Notifications
You must be signed in to change notification settings - Fork 268
/
ImageDetails.svelte
102 lines (94 loc) · 3.02 KB
/
ImageDetails.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<script lang="ts">
import type { ImageInfoUI } from './ImageInfoUI';
import Route from '../../Route.svelte';
import { onMount } from 'svelte';
import { imagesInfos } from '../../stores/images';
import ImageIcon from '../images/ImageIcon.svelte';
import StatusIcon from '../images/StatusIcon.svelte';
import ImageActions from './ImageActions.svelte';
import { ImageUtils } from './image-utils';
import ImageDetailsInspect from './ImageDetailsInspect.svelte';
import ImageDetailsHistory from './ImageDetailsHistory.svelte';
import ImageDetailsSummary from './ImageDetailsSummary.svelte';
import PushImageModal from './PushImageModal.svelte';
import RenameImageModal from './RenameImageModal.svelte';
import DetailsPage from '../ui/DetailsPage.svelte';
import Tab from '../ui/Tab.svelte';
export let imageID: string;
export let engineId: string;
export let base64RepoTag: string;
let pushImageModal = false;
function handlePushImageModal() {
pushImageModal = true;
}
let renameImageModal = false;
function handleRenameImageModal() {
renameImageModal = true;
}
function closeModals() {
pushImageModal = false;
renameImageModal = false;
}
let image: ImageInfoUI;
let detailsPage: DetailsPage;
onMount(() => {
const imageUtils = new ImageUtils();
// loading image info
return imagesInfos.subscribe(images => {
const matchingImage = images.find(c => c.Id === imageID && c.engineId === engineId);
let tempImage;
if (matchingImage) {
tempImage = imageUtils.getImageInfoUI(matchingImage, base64RepoTag);
}
if (tempImage) {
image = tempImage;
} else {
// the image has been deleted
detailsPage.close();
}
});
});
</script>
{#if image}
<DetailsPage title="{image.name}" titleDetail="{image.shortId}" subtitle="{image.tag}" bind:this="{detailsPage}">
<StatusIcon slot="icon" icon="{ImageIcon}" status="{image.inUse ? 'USED' : 'UNUSED'}" />
<ImageActions
slot="actions"
image="{image}"
onPushImage="{handlePushImageModal}"
onRenameImage="{handleRenameImageModal}"
detailed="{true}"
dropdownMenu="{false}" />
<svelte:fragment slot="tabs">
<Tab title="Summary" url="summary" />
<Tab title="History" url="history" />
<Tab title="Inspect" url="inspect" />
</svelte:fragment>
<svelte:fragment slot="content">
<Route path="/summary" breadcrumb="Summary" navigationHint="tab">
<ImageDetailsSummary image="{image}" />
</Route>
<Route path="/history" breadcrumb="History" navigationHint="tab">
<ImageDetailsHistory image="{image}" />
</Route>
<Route path="/inspect" breadcrumb="Inspect" navigationHint="tab">
<ImageDetailsInspect image="{image}" />
</Route>
</svelte:fragment>
</DetailsPage>
{/if}
{#if pushImageModal}
<PushImageModal
imageInfoToPush="{image}"
closeCallback="{() => {
closeModals();
}}" />
{/if}
{#if renameImageModal}
<RenameImageModal
imageInfoToRename="{image}"
detailed="{true}"
closeCallback="{() => {
closeModals();
}}" />
{/if}