-
Notifications
You must be signed in to change notification settings - Fork 268
/
ImageActions.svelte
167 lines (147 loc) · 4.85 KB
/
ImageActions.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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<script lang="ts">
import {
faArrowUp,
faLayerGroup,
faPlay,
faTrash,
faEdit,
faExclamationCircle,
faTimes,
} from '@fortawesome/free-solid-svg-icons';
import type { ImageInfoUI } from './ImageInfoUI';
import { router } from 'tinro';
import ListItemButtonIcon from '../ui/ListItemButtonIcon.svelte';
import { runImageInfo } from '../../stores/run-image-store';
import type { Menu } from '../../../../main/src/plugin/menu-registry';
import ContributionActions from '/@/lib/actions/ContributionActions.svelte';
import { ImageUtils } from './image-utils';
import { onDestroy, onMount } from 'svelte';
import { MenuContext } from '../../../../main/src/plugin/menu-registry';
import ActionsWrapper from './ActionsMenu.svelte';
import type { Unsubscriber } from 'svelte/motion';
import type { ContextUI } from '../context/context';
import { context } from '/@/stores/context';
import Fa from 'svelte-fa';
import Button from '../ui/Button.svelte';
export let onPushImage: (imageInfo: ImageInfoUI) => void;
export let onRenameImage: (imageInfo: ImageInfoUI) => void;
export let image: ImageInfoUI;
export let dropdownMenu = false;
export let detailed = false;
let errorTitle: string | undefined = undefined;
let errorMessage: string | undefined = undefined;
let isAuthenticatedForThisImage = false;
const imageUtils = new ImageUtils();
let contributions: Menu[] = [];
let globalContext: ContextUI;
let contextsUnsubscribe: Unsubscriber;
onMount(async () => {
contributions = await window.getContributedMenus(MenuContext.DASHBOARD_IMAGE);
contextsUnsubscribe = context.subscribe(value => {
globalContext = value;
});
});
onDestroy(() => {
// unsubscribe from the store
if (contextsUnsubscribe) {
contextsUnsubscribe();
}
});
async function runImage(imageInfo: ImageInfoUI) {
runImageInfo.set(imageInfo);
router.goto('/images/run/basic');
}
$: window.hasAuthconfigForImage(image.name).then(result => (isAuthenticatedForThisImage = result));
async function deleteImage(): Promise<void> {
try {
await imageUtils.deleteImage(image);
} catch (error) {
errorTitle = 'Error while deleting image';
errorMessage = String(error);
}
}
async function renameImage(imageInfo: ImageInfoUI): Promise<void> {
onRenameImage(imageInfo);
}
async function pushImage(imageInfo: ImageInfoUI): Promise<void> {
onPushImage(imageInfo);
}
async function showLayersImage(): Promise<void> {
router.goto(`/images/${image.id}/${image.engineId}/${image.base64RepoTag}/history`);
}
function onError(error: string): void {
errorTitle = 'Something went wrong.';
errorMessage = error;
}
</script>
<ListItemButtonIcon title="Run Image" onClick="{() => runImage(image)}" detailed="{detailed}" icon="{faPlay}" />
<ListItemButtonIcon
title="Delete Image"
onClick="{() => deleteImage()}"
detailed="{detailed}"
icon="{faTrash}"
enabled="{!image.inUse}" />
<!-- If dropdownMenu is true, use it, otherwise just show the regular buttons -->
<ActionsWrapper
dropdownMenu="{dropdownMenu}"
onBeforeToggle="{() => {
globalContext?.setValue('selectedImageId', image.id);
}}">
{#if isAuthenticatedForThisImage}
<ListItemButtonIcon
title="Push Image"
onClick="{() => pushImage(image)}"
menu="{dropdownMenu}"
detailed="{detailed}"
icon="{faArrowUp}" />
{/if}
<ListItemButtonIcon
title="Edit Image"
onClick="{() => renameImage(image)}"
menu="{dropdownMenu}"
detailed="{detailed}"
icon="{faEdit}" />
{#if !detailed}
<ListItemButtonIcon
title="Show History"
onClick="{() => showLayersImage()}"
menu="{dropdownMenu}"
detailed="{detailed}"
icon="{faLayerGroup}" />
{/if}
<ContributionActions
args="{[image]}"
dropdownMenu="{dropdownMenu}"
contributions="{contributions}"
contextPrefix="imageItem"
detailed="{detailed}"
onError="{onError}" />
{#if errorMessage}
<div class="modal fixed w-full h-full top-0 left-0 flex items-center justify-center p-8 lg:p-0 z-50" tabindex="-1">
<div class="border-t-red-600 border-t-2 p-4 bg-charcoal-600" aria-label="Success alert">
<div class="flex flex-row justify-center items-center pb-2">
<Fa icon="{faExclamationCircle}" class="text-red-500 mr-2" />
<div class="text-red-500 font-bold text-sm">
{errorTitle}
</div>
<Fa
icon="{faTimes}"
class="text-gray-900 pl-2 cursor-pointer"
on:click="{() => {
errorMessage = undefined;
}}" />
</div>
<div class="flex justify-center break-words whitespace-normal text-xs pb-2">
{errorMessage}
</div>
<div class="flex flex-row justify-center">
<Button
type="link"
on:click="{() => {
errorMessage = undefined;
}}">Ignore</Button>
</div>
</div>
</div>
{/if}
</ActionsWrapper>