164 lines
2.8 KiB
Svelte
164 lines
2.8 KiB
Svelte
<script lang="ts">
|
|
import type { ContainerInfo } from '$lib/server/containers';
|
|
|
|
export let info: ContainerInfo;
|
|
</script>
|
|
|
|
<section class="scroll info">
|
|
<dl class="info-set">
|
|
<dt>ID</dt>
|
|
<dd>{info.id}</dd>
|
|
<dt>Status</dt>
|
|
<dd
|
|
class="status"
|
|
class:running={info.state === 'running'}
|
|
class:exited={info.state === 'exited' || info.state === 'dead'}
|
|
>
|
|
{info.state}
|
|
</dd>
|
|
<dt>Image</dt>
|
|
<dd>{info.image}</dd>
|
|
<dt>Image ID</dt>
|
|
<dd>{info.image_id}</dd>
|
|
<dt>Created</dt>
|
|
<dd>{info.created_at}</dd>
|
|
</dl>
|
|
{#if info.volumes}
|
|
<header>Volumes</header>
|
|
<dl class="volume-list">
|
|
{#each info.volumes as volume}
|
|
<dt>{volume.Source}</dt>
|
|
<dd>
|
|
⤷ <b title={[volume.Type, volume.Mode, volume.Name].filter(Boolean).join(' ')}
|
|
>{volume.Destination}</b
|
|
>
|
|
</dd>
|
|
{/each}
|
|
</dl>
|
|
{/if}
|
|
{#if info.env}
|
|
<header>Environment</header>
|
|
<ul class="env">
|
|
{#each info.env as env}
|
|
<li>{env}</li>
|
|
{/each}
|
|
</ul>
|
|
{/if}
|
|
{#if info.labels}
|
|
<header>Labels</header>
|
|
<dl class="label-list">
|
|
{#each Object.entries(info.labels) as [key, value]}
|
|
<dt>{key}</dt>
|
|
<dd>
|
|
{#if value}{value}{:else}<i>[empty]</i>{/if}
|
|
</dd>
|
|
{/each}
|
|
</dl>
|
|
{/if}
|
|
</section>
|
|
|
|
<style scoped>
|
|
header:not(:first-child) {
|
|
padding-top: var(--padding-normal);
|
|
font-weight: bold;
|
|
font-size: 0.8rem;
|
|
text-transform: uppercase;
|
|
margin: var(--padding-normal) 0;
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
dl,
|
|
ul {
|
|
margin: var(--padding-normal) 0;
|
|
}
|
|
|
|
.info-set {
|
|
display: grid;
|
|
gap: var(--padding-normal);
|
|
|
|
grid-template-columns: 80px 1fr;
|
|
|
|
& dt {
|
|
font-weight: bold;
|
|
font-size: 0.8rem;
|
|
text-transform: uppercase;
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
& dd {
|
|
margin: 0;
|
|
word-break: break-all;
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.volume-list,
|
|
.label-list {
|
|
& dd,
|
|
& dt {
|
|
word-break: break-word;
|
|
display: flex;
|
|
gap: 1rem;
|
|
|
|
& b {
|
|
white-space: nowrap;
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.label-list {
|
|
margin: 0;
|
|
& dt {
|
|
font-weight: bold;
|
|
color: var(--text-bright);
|
|
}
|
|
& dd {
|
|
margin: var(--padding-narrow) 0;
|
|
word-break: break-all;
|
|
padding-bottom: var(--padding-normal);
|
|
font-family: var(--font-monospace);
|
|
}
|
|
}
|
|
|
|
.env {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
& li {
|
|
word-break: break-all;
|
|
padding: var(--padding-narrow);
|
|
|
|
&:nth-child(odd) {
|
|
background-color: var(--table-bg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.scroll {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
padding-right: var(--padding-normal);
|
|
}
|
|
|
|
.status {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
color: white;
|
|
padding: var(--padding-narrow) var(--padding-normal);
|
|
border-radius: 5px;
|
|
|
|
&.running {
|
|
background-color: var(--success-bg);
|
|
color: var(--success-text);
|
|
}
|
|
|
|
&.exited {
|
|
background-color: var(--danger-bg);
|
|
color: var(--danger-text);
|
|
}
|
|
}
|
|
</style>
|