1
0
mirror of https://github.com/garraflavatra/rolens.git synced 2025-07-19 06:14:04 +00:00
Files
rolens/frontend/src/organisms/connection/host/index.svelte
2023-08-07 18:21:45 +02:00

69 lines
1.6 KiB
Svelte

<script>
import BlankState from '$components/blankstate.svelte';
import TabBar from '$components/tabbar.svelte';
import { EventsOn } from '$wails/runtime/runtime.js';
import Logs from './logs.svelte';
import Shell from '../shell.svelte';
import Status from './status.svelte';
import SystemInfo from './systeminfo.svelte';
export let host;
export let tab = 'status';
const tabs = {
status: { icon: 'chart', title: 'Host status', component: Status },
shell: { icon: 'shell', title: 'Shell', component: Shell },
logs: { icon: 'doc', title: 'Logs', component: Logs },
systemInfo: { icon: 'server', title: 'System info', component: SystemInfo },
};
for (const key of Object.keys(tabs)) {
tabs[key].key = key;
}
EventsOn('OpenStatusTab', name => (tab = name || tab));
</script>
<div class="view" class:empty={!host}>
{#if host}
{#key host}
<TabBar tabs={Object.values(tabs)} bind:selectedKey={tab} />
{#each Object.values(tabs) as view}
<div class="container" class:hidden={tab !== view.key}>
<svelte:component this={view.component} visible={tab === view.key} {host} />
</div>
{/each}
{/key}
{:else}
<BlankState label="Select a host to continue" />
{/if}
</div>
<style>
.view {
height: 100%;
display: grid;
grid-template: auto 1fr / 1fr;
}
.view.empty {
grid-template: 1fr / 1fr;
}
.container {
padding: 0.5rem;
display: flex;
align-items: stretch;
overflow: auto;
min-height: 0;
min-width: 0;
}
.container.hidden {
display: none;
}
.container > :global(*) {
width: 100%;
}
</style>