-
Notifications
You must be signed in to change notification settings - Fork 268
/
ComposeActions.svelte
128 lines (114 loc) · 3.92 KB
/
ComposeActions.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
<script lang="ts">
import { faFileCode, faTrash, faPlay, faStop, faArrowsRotate, faRocket } from '@fortawesome/free-solid-svg-icons';
import type { ComposeInfoUI } from './ComposeInfoUI';
import { router } from 'tinro';
import ListItemButtonIcon from '../ui/ListItemButtonIcon.svelte';
import DropdownMenu from '../ui/DropdownMenu.svelte';
import FlatMenu from '../ui/FlatMenu.svelte';
export let compose: ComposeInfoUI;
export let dropdownMenu = false;
export let detailed = false;
export let inProgressCallback: (inProgress: boolean, state?: string) => void = () => {};
export let errorCallback: (erroMessage: string) => void = () => {};
const composeLabel = 'com.docker.compose.project';
async function startCompose(composeInfoUI: ComposeInfoUI) {
inProgressCallback(true, 'STARTING');
try {
await window.startContainersByLabel(composeInfoUI.engineId, composeLabel, composeInfoUI.name);
} catch (error) {
errorCallback(error);
} finally {
inProgressCallback(false, 'RUNNING');
}
}
async function stopCompose(composeInfoUI: ComposeInfoUI) {
inProgressCallback(true, 'STOPPING');
try {
await window.stopContainersByLabel(composeInfoUI.engineId, composeLabel, composeInfoUI.name);
} catch (error) {
errorCallback(error);
} finally {
inProgressCallback(false, 'STOPPED');
}
}
async function deleteCompose(composeInfoUI: ComposeInfoUI) {
inProgressCallback(true, 'DELETING');
try {
await window.deleteContainersByLabel(composeInfoUI.engineId, composeLabel, composeInfoUI.name);
} catch (error) {
errorCallback(error);
} finally {
inProgressCallback(false, 'STOPPED');
}
}
async function restartCompose(composeInfoUI: ComposeInfoUI) {
inProgressCallback(true, 'RESTARTING');
try {
await window.restartContainersByLabel(composeInfoUI.engineId, composeLabel, composeInfoUI.name);
} catch (error) {
errorCallback(error);
} finally {
inProgressCallback(false);
}
}
function deployToKubernetes(): void {
router.goto(`/compose/deploy-to-kube/${compose.name}/${compose.engineId}`);
}
function openGenerateKube(): void {
router.goto(`/compose/${encodeURI(compose.name)}/${encodeURI(compose.engineId)}/kube`);
}
// If dropdownMenu = true, we'll change style to the imported dropdownMenu style
// otherwise, leave blank.
let actionsStyle;
if (dropdownMenu) {
actionsStyle = DropdownMenu;
} else {
actionsStyle = FlatMenu;
}
console.log('compose: ', compose);
</script>
<ListItemButtonIcon
title="Start Compose"
onClick="{() => startCompose(compose)}"
hidden="{compose.status === 'RUNNING' || compose.status === 'STOPPING'}"
detailed="{detailed}"
inProgress="{compose.actionInProgress && compose.status === 'STARTING'}"
icon="{faPlay}"
iconOffset="pl-[0.15rem]" />
<ListItemButtonIcon
title="Stop Compose"
onClick="{() => stopCompose(compose)}"
hidden="{!(compose.status === 'RUNNING' || compose.status === 'STOPPING')}"
detailed="{detailed}"
inProgress="{compose.actionInProgress && compose.status === 'STOPPING'}"
icon="{faStop}" />
<ListItemButtonIcon
title="Delete Compose"
onClick="{() => deleteCompose(compose)}"
icon="{faTrash}"
detailed="{detailed}"
inProgress="{compose.actionInProgress && compose.status === 'DELETING'}" />
<!-- If dropdownMenu is true, use it, otherwise just show the regular buttons -->
<svelte:component this="{actionsStyle}">
{#if !detailed}
<ListItemButtonIcon
title="Generate Kube"
onClick="{() => openGenerateKube()}"
menu="{dropdownMenu}"
detailed="{detailed}"
icon="{faFileCode}" />
{/if}
<ListItemButtonIcon
title="Deploy to Kubernetes"
onClick="{() => deployToKubernetes()}"
menu="{dropdownMenu}"
hidden="{!(compose.engineType === 'podman')}"
detailed="{detailed}"
icon="{faRocket}" />
<ListItemButtonIcon
title="Restart Compose"
onClick="{() => restartCompose(compose)}"
menu="{dropdownMenu}"
detailed="{detailed}"
icon="{faArrowsRotate}" />
</svelte:component>