-
Notifications
You must be signed in to change notification settings - Fork 268
/
ContainerDetails.svelte
136 lines (122 loc) · 4.95 KB
/
ContainerDetails.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
<script lang="ts">
import { ContainerGroupInfoTypeUI, type ContainerInfoUI } from './ContainerInfoUI';
import Route from '../../Route.svelte';
import ContainerIcon from '../images/ContainerIcon.svelte';
import StatusIcon from '../images/StatusIcon.svelte';
import 'xterm/css/xterm.css';
import ContainerDetailsTerminal from './ContainerDetailsTerminal.svelte';
import ContainerDetailsLogs from './ContainerDetailsLogs.svelte';
import ContainerActions from './ContainerActions.svelte';
import { onMount } from 'svelte';
import { containersInfos } from '../../stores/containers';
import { ContainerUtils } from './container-utils';
import ContainerDetailsSummary from './ContainerDetailsSummary.svelte';
import ContainerDetailsInspect from './ContainerDetailsInspect.svelte';
import ContainerDetailsKube from './ContainerDetailsKube.svelte';
import ContainerStatistics from './ContainerStatistics.svelte';
import DetailsPage from '../ui/DetailsPage.svelte';
import Tab from '../ui/Tab.svelte';
import ErrorMessage from '../ui/ErrorMessage.svelte';
import ContainerDetailsTtyTerminal from './ContainerDetailsTtyTerminal.svelte';
import { router } from 'tinro';
import StateChange from '../ui/StateChange.svelte';
export let containerID: string;
let container: ContainerInfoUI;
let detailsPage: DetailsPage;
let displayTty = false;
// update current route scheme
let currentRouterPath: string;
onMount(() => {
const containerUtils = new ContainerUtils();
router.subscribe(route => {
currentRouterPath = route.path;
});
// loading container info
return containersInfos.subscribe(containers => {
const matchingContainer = containers.find(c => c.Id === containerID);
if (matchingContainer) {
container = containerUtils.getContainerInfoUI(matchingContainer);
// look if tty is supported by this container
window.getContainerInspect(container.engineId, container.id).then(inspect => {
displayTty = (inspect.Config.Tty || false) && (inspect.Config.OpenStdin || false);
// if we comes with a / redirect to /logs or to /tty if tty is supported
if (currentRouterPath.endsWith('/')) {
if (displayTty) {
router.goto(`${currentRouterPath}tty`);
} else {
router.goto(`${currentRouterPath}logs`);
}
}
});
} else if (detailsPage) {
// the container has been deleted
detailsPage.close();
}
});
});
function inProgressCallback(inProgress: boolean, state: string | undefined): void {
container.actionInProgress = inProgress;
if (state && inProgress) {
container.state = state;
}
}
function errorCallback(errorMessage: string): void {
container.actionError = errorMessage;
container.state = 'ERROR';
}
</script>
{#if container}
<DetailsPage title="{container.name}" subtitle="{container.shortImage}" bind:this="{detailsPage}">
<StatusIcon slot="icon" icon="{ContainerIcon}" status="{container.state}" />
<svelte:fragment slot="actions">
<div class="flex items-center w-5">
{#if container.actionError}
<ErrorMessage error="{container.actionError}" icon />
{:else}
<div> </div>
{/if}
</div>
<ContainerActions
inProgressCallback="{(flag, state) => inProgressCallback(flag, state)}"
errorCallback="{error => errorCallback(error)}"
container="{container}"
detailed="{true}" />
</svelte:fragment>
<div slot="detail" class="flex py-2 w-full justify-end text-sm text-gray-700">
<StateChange state="{container.state}" />
<ContainerStatistics container="{container}" />
</div>
<svelte:fragment slot="tabs">
<Tab title="Summary" url="summary" />
<Tab title="Logs" url="logs" />
<Tab title="Inspect" url="inspect" />
{#if container.engineType === 'podman' && container.groupInfo.type === ContainerGroupInfoTypeUI.STANDALONE}
<Tab title="Kube" url="kube" />
{/if}
<Tab title="Terminal" url="terminal" />
{#if displayTty}
<Tab title="Tty" url="tty" />
{/if}
</svelte:fragment>
<svelte:fragment slot="content">
<Route path="/summary" breadcrumb="Summary" navigationHint="tab">
<ContainerDetailsSummary container="{container}" />
</Route>
<Route path="/logs" breadcrumb="Logs" navigationHint="tab">
<ContainerDetailsLogs container="{container}" />
</Route>
<Route path="/inspect" breadcrumb="Inspect" navigationHint="tab">
<ContainerDetailsInspect container="{container}" />
</Route>
<Route path="/kube" breadcrumb="Kube" navigationHint="tab">
<ContainerDetailsKube container="{container}" />
</Route>
<Route path="/terminal" breadcrumb="Terminal" navigationHint="tab">
<ContainerDetailsTerminal container="{container}" />
</Route>
<Route path="/tty" breadcrumb="Tty" navigationHint="tab">
<ContainerDetailsTtyTerminal container="{container}" />
</Route>
</svelte:fragment>
</DetailsPage>
{/if}