mirror of
https://github.com/KevinMidboe/infra-map.git
synced 2026-01-12 04:06:26 +00:00
source, static files & Dockerfile
This commit is contained in:
49
src/lib/components/Daemon.svelte
Normal file
49
src/lib/components/Daemon.svelte
Normal file
@@ -0,0 +1,49 @@
|
||||
<script lang="ts">
|
||||
import Pod from './Pod.svelte';
|
||||
import type { V1DaemonSet } from '@kubernetes/client-node';
|
||||
|
||||
export let daemon: V1DaemonSet;
|
||||
|
||||
let { metadata, status, pods } = daemon;
|
||||
|
||||
const healthy =
|
||||
status?.desiredNumberScheduled && status?.desiredNumberScheduled === status?.numberReady;
|
||||
</script>
|
||||
|
||||
<div class="card-container">
|
||||
<div class="namespace">
|
||||
<h2>{pods?.length} of {metadata?.name} in {metadata?.namespace}</h2>
|
||||
</div>
|
||||
|
||||
<p>heatlthy: {healthy}</p>
|
||||
|
||||
<div class="card-wrapper">
|
||||
{#each daemon?.pods as pod, i (pod)}
|
||||
<Pod parent={daemon} {pod} {i} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.card-container {
|
||||
background-color: #cab2aa40;
|
||||
border-radius: 0.5rem;
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
|
||||
.namespace {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.positive {
|
||||
color: #077c35;
|
||||
}
|
||||
</style>
|
||||
41
src/lib/components/Deploy.svelte
Normal file
41
src/lib/components/Deploy.svelte
Normal file
@@ -0,0 +1,41 @@
|
||||
<script lang="ts">
|
||||
import Pod from './Pod.svelte';
|
||||
|
||||
import type { V1Deployment } from '@kubernetes/client-node';
|
||||
|
||||
export let deploy: V1Deployment;
|
||||
|
||||
let { metadata, pods } = deploy;
|
||||
</script>
|
||||
|
||||
<div class="card-container">
|
||||
<div class="namespace">
|
||||
<h2>{metadata?.name} in {metadata?.namespace}</h2>
|
||||
</div>
|
||||
|
||||
<div class="card-wrapper">
|
||||
{#each pods as pod, i (pod)}
|
||||
<Pod parent={deploy} {pod} {i} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.card-container {
|
||||
background-color: #cab2aa40;
|
||||
border-radius: 0.5rem;
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
|
||||
.namespace {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
115
src/lib/components/Header.svelte
Normal file
115
src/lib/components/Header.svelte
Normal file
@@ -0,0 +1,115 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { derived } from 'svelte/store';
|
||||
|
||||
// Create a derived store to extract breadcrumb data
|
||||
const breadcrumbs = derived(page, ($page) => {
|
||||
const segments = $page.url.pathname.split('/').filter(Boolean); // Remove empty segments
|
||||
|
||||
return segments.map((segment, index) => {
|
||||
let label = decodeURI(segment);
|
||||
|
||||
// if not uuid pattern, this is weird order of ops
|
||||
/*
|
||||
if (!segment.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/)) {
|
||||
label = label.replace(/-/g, ' ')
|
||||
}
|
||||
*/
|
||||
|
||||
return {
|
||||
label,
|
||||
path: '/' + segments.slice(0, index + 1).join('/')
|
||||
};
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="header">
|
||||
<div class="left">
|
||||
<!-- <img src="/logo.png" /> -->
|
||||
<h1>schleppe.cloud</h1>
|
||||
</div>
|
||||
|
||||
<div class="middle crumbs">
|
||||
<a href="/">Home</a>
|
||||
{#each $breadcrumbs as crumb (crumb.label)}
|
||||
<span class="seperator">/</span>
|
||||
<a href={crumb.path}>{crumb.label}</a>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<span>User profile</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.header {
|
||||
position: sticky;
|
||||
top: 1rem;
|
||||
left: 0;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 240px 1fr auto;
|
||||
grid-template-areas: 'logoSection siteAndEnvironment profileAndHelp';
|
||||
align-items: center;
|
||||
background: #1c1819;
|
||||
padding: 0 1rem;
|
||||
border-radius: 6px;
|
||||
color: white;
|
||||
margin: 1rem 0.5rem 0 0.5rem;
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
z-index: 100;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1rem;
|
||||
top: -1rem;
|
||||
background-color: var(--bg);
|
||||
/* opacity: 0.6; */
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
padding: 0;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
img {
|
||||
padding: 0rem 0;
|
||||
max-height: 2.5rem;
|
||||
}
|
||||
|
||||
a,
|
||||
span {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.left,
|
||||
.middle,
|
||||
.right {
|
||||
min-height: 3.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
}
|
||||
|
||||
.crumbs {
|
||||
margin-left: 0.6rem;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.seperator {
|
||||
color: #7d6665;
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
63
src/lib/components/Lifecycle.svelte
Normal file
63
src/lib/components/Lifecycle.svelte
Normal file
@@ -0,0 +1,63 @@
|
||||
<script lang="ts">
|
||||
export let conditions: any;
|
||||
|
||||
const dict = {
|
||||
Initialized: 'Initialized',
|
||||
PodScheduled: 'Scheduled',
|
||||
Ready: 'Ready',
|
||||
ContainersReady: 'AllReady'
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="lifecycle-container">
|
||||
{#each conditions as condition (condition)}
|
||||
<div class="step" title={`Date: ${condition.lastTransitionTime}`}>
|
||||
<span class="type">{dict[condition.type]}</span>
|
||||
<span class="status">{condition.status === 'True' ? 'yes' : 'no'}</span>
|
||||
</div>
|
||||
<span class="divider"></span>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.lifecycle-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: calc(100% - 1.5rem);
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.divider:not(:last-of-type) {
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
top: 2rem;
|
||||
margin-top: auto;
|
||||
margin-bottom: 0.5rem;
|
||||
background-color: var(--positive);
|
||||
opacity: 0.6;
|
||||
/*background-color: #0A7C35;*/
|
||||
}
|
||||
|
||||
.step {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
.type {
|
||||
margin-bottom: 0.3rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status {
|
||||
background-color: var(--positive);
|
||||
opacity: 0.6;
|
||||
/*background-color: #0a7c35;*/
|
||||
border-radius: 0.4rem;
|
||||
padding: 0.2rem;
|
||||
padding-bottom: 0.3rem;
|
||||
text-align: center;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
150
src/lib/components/Logs.svelte
Normal file
150
src/lib/components/Logs.svelte
Normal file
@@ -0,0 +1,150 @@
|
||||
<script lang="ts">
|
||||
const logs1 = `+ yarn build
|
||||
yarn run v1.22.22
|
||||
$ vite build
|
||||
▲ [WARNING] Cannot find base config file "./.svelte-kit/tsconfig.json" [tsconfig.json]
|
||||
|
||||
tsconfig.json:2:12:
|
||||
2 │ "extends": "./.svelte-kit/tsconfig.json",
|
||||
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||
|
||||
|
||||
vite v4.4.7 building SSR bundle for production...
|
||||
transforming...
|
||||
"swipe" is imported from external module "svelte-gestures" but never used in "src/lib/components/Modal.svelte".
|
||||
✓ 139 modules transformed.
|
||||
rendering chunks...
|
||||
|
||||
vite v4.4.7 building for production...
|
||||
transforming...
|
||||
✓ 136 modules transformed.
|
||||
rendering chunks...
|
||||
computing gzip size...
|
||||
.svelte-kit/output/client/_app/version.json 0.03 kB │ gzip: 0.05 kB
|
||||
.svelte-kit/output/client/vite-manifest.json 6.06 kB │ gzip: 0.82 kB
|
||||
.svelte-kit/output/client/_app/immutable/assets/2.797db896.css 0.56 kB │ gzip: 0.21 kB
|
||||
.svelte-kit/output/client/_app/immutable/assets/LowBattery.3e0e6805.css 1.34 kB │ gzip: 0.50 kB
|
||||
.svelte-kit/output/client/_app/immutable/assets/0.4ae3ad4f.css 1.40 kB │ gzip: 0.54 kB
|
||||
.svelte-kit/output/client/_app/immutable/assets/4.d8e69ad3.css 3.84 kB │ gzip: 0.99 kB
|
||||
.svelte-kit/output/client/_app/immutable/assets/Graph.833c02c6.css 6.60 kB │ gzip: 1.42 kB
|
||||
.svelte-kit/output/client/_app/immutable/chunks/each.e59479a4.js 0.09 kB │ gzip: 0.10 kB
|
||||
.svelte-kit/output/client/_app/immutable/chunks/store.9bf92701.js 0.19 kB │ gzip: 0.16 kB
|
||||
.svelte-kit/output/client/_app/immutable/chunks/stores.458b7cfe.js 0.24 kB │ gzip: 0.17 kB
|
||||
.svelte-kit/output/client/_app/immutable/nodes/5.f2fe2a9e.js 0.44 kB │ gzip: 0.32 kB
|
||||
.svelte-kit/output/client/_app/immutable/nodes/1.03b18b61.js 0.84 kB │ gzip: 0.52 kB
|
||||
.svelte-kit/output/client/_app/immutable/chunks/index.4b915d9e.js 0.93 kB │ gzip: 0.58 kB
|
||||
.svelte-kit/output/client/_app/immutable/nodes/3.60efb886.js 1.89 kB │ gzip: 0.89 kB
|
||||
.svelte-kit/output/client/_app/immutable/chunks/index.e50902ae.js 2.29 kB │ gzip: 1.20 kB
|
||||
.svelte-kit/output/client/_app/immutable/chunks/singletons.69e9afd3.js 2.46 kB │ gzip: 1.26 kB
|
||||
.svelte-kit/output/client/_app/immutable/chunks/hive.5645a370.js 4.68 kB │ gzip: 2.37 kB
|
||||
.svelte-kit/output/client/_app/immutable/chunks/scheduler.d05fc3de.js 6.27 kB │ gzip: 2.52 kB
|
||||
.svelte-kit/output/client/_app/immutable/entry/app.566aae85.js 7.82 kB │ gzip: 2.59 kB
|
||||
.svelte-kit/output/client/_app/immutable/chunks/WeightChanged.86ed6639.js 9.66 kB │ gzip: 3.58 kB
|
||||
.svelte-kit/output/client/_app/immutable/nodes/4.9e87f003.js 12.31 kB │ gzip: 4.21 kB
|
||||
.svelte-kit/output/client/_app/immutable/nodes/0.0875ba29.js 16.68 kB │ gzip: 6.97 kB
|
||||
.svelte-kit/output/client/_app/immutable/chunks/LowBattery.ced8ef00.js 18.26 kB │ gzip: 5.97 kB
|
||||
.svelte-kit/output/client/_app/immutable/entry/start.cf058992.js 24.06 kB │ gzip: 9.55 kB
|
||||
.svelte-kit/output/client/_app/immutable/nodes/2.02031f29.js 24.52 kB │ gzip: 7.00 kB
|
||||
.svelte-kit/output/client/_app/immutable/chunks/Graph.ed26d13c.js 238.67 kB │ gzip: 81.35 kB
|
||||
✓ built in 4.13s
|
||||
.svelte-kit/output/server/vite-manifest.json 3.81 kB
|
||||
.svelte-kit/output/server/_app/immutable/assets/_page.797db896.css 0.56 kB
|
||||
.svelte-kit/output/server/_app/immutable/assets/LowBattery.3e0e6805.css 1.34 kB
|
||||
.svelte-kit/output/server/_app/immutable/assets/_layout.4ae3ad4f.css 1.40 kB
|
||||
.svelte-kit/output/server/_app/immutable/assets/_page.d8e69ad3.css 3.84 kB
|
||||
.svelte-kit/output/server/_app/immutable/assets/Graph.d70e5aa3.css 6.58 kB
|
||||
.svelte-kit/output/server/internal.js 0.19 kB
|
||||
.svelte-kit/output/server/chunks/store.js 0.19 kB
|
||||
.svelte-kit/output/server/entries/pages/settings/_page.svelte.js 0.26 kB
|
||||
.svelte-kit/output/server/entries/fallbacks/error.svelte.js 0.47 kB
|
||||
.svelte-kit/output/server/chunks/stores.js 0.52 kB
|
||||
.svelte-kit/output/server/entries/pages/alarms/_page.svelte.js 1.14 kB
|
||||
.svelte-kit/output/server/chunks/index.js 2.58 kB
|
||||
.svelte-kit/output/server/chunks/hive.js 4.23 kB
|
||||
.svelte-kit/output/server/chunks/ssr.js 5.07 kB
|
||||
.svelte-kit/output/server/chunks/internal.js 5.52 kB
|
||||
.svelte-kit/output/server/chunks/WeightChanged.js 8.14 kB
|
||||
.svelte-kit/output/server/entries/pages/dashboard/_page.svelte.js 10.25 kB
|
||||
.svelte-kit/output/server/entries/pages/_layout.svelte.js 12.09 kB
|
||||
.svelte-kit/output/server/chunks/LowBattery.js 15.20 kB
|
||||
.svelte-kit/output/server/entries/pages/_page.svelte.js 15.97 kB
|
||||
.svelte-kit/output/server/chunks/Graph.js 28.69 kB
|
||||
.svelte-kit/output/server/index.js 87.83 kB
|
||||
|
||||
Run npm run preview to preview your production build locally.
|
||||
|
||||
> Using @sveltejs/adapter-static
|
||||
Wrote site to "build"
|
||||
✔ done
|
||||
✓ built in 11.35s
|
||||
Done in 13.18s.`;
|
||||
|
||||
export let logs: string[] = logs1.split('\n');
|
||||
export let lineNumbers = true;
|
||||
export let stream = false;
|
||||
|
||||
let codeElement: HTMLElement;
|
||||
|
||||
$: {
|
||||
console.log(logs.length);
|
||||
if (codeElement) {
|
||||
codeElement.scroll({
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="parent" style="margin-bottom: 2rem">
|
||||
<div class="header"><button>follow</button></div>
|
||||
<div class="code" bind:this={codeElement}>
|
||||
<code>
|
||||
{#each logs as log, i (log + i)}
|
||||
<pre>{#if lineNumbers}<span class="line-number">{i + 1}</span>{/if}{log}</pre>
|
||||
{/each}
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.parent {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.code {
|
||||
background-color: var(--color);
|
||||
max-height: calc(90vh - 10rem);
|
||||
color: white;
|
||||
border-radius: var(--border-radius, 1rem);
|
||||
padding: 1rem;
|
||||
overflow: scroll;
|
||||
|
||||
code {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
scroll-margin: 1rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
line-height: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.line-number {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
|
||||
display: inline-block;
|
||||
min-width: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
text-align: right;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
201
src/lib/components/Node.svelte
Normal file
201
src/lib/components/Node.svelte
Normal file
@@ -0,0 +1,201 @@
|
||||
<script lang="ts">
|
||||
import Connection from '$lib/icons/connection.svelte';
|
||||
import Network from '$lib/icons/network.svelte';
|
||||
import Layers from '$lib/icons/layers.svelte';
|
||||
import Clock from '$lib/icons/clock.svelte';
|
||||
import { convertKiToHumanReadable } from '$lib/utils/conversion';
|
||||
|
||||
export let node;
|
||||
|
||||
let { metadata, pods, status } = node;
|
||||
</script>
|
||||
|
||||
<div class="card">
|
||||
<div class="header">
|
||||
<div class="icon"><Connection /></div>
|
||||
<span class="name">{metadata.name}</span>
|
||||
|
||||
<!--
|
||||
<span class={`status ${node?.online === 1 ? 'ok' : 'error'}`}></span>
|
||||
-->
|
||||
</div>
|
||||
|
||||
<div class="resource">
|
||||
<div class="title">
|
||||
<Network />
|
||||
<span>Status</span>
|
||||
</div>
|
||||
<span>{status.phase}</span>
|
||||
|
||||
<div class="title">
|
||||
<Network />
|
||||
<span>IP address</span>
|
||||
</div>
|
||||
<span>{status.addresses[0].address}</span>
|
||||
|
||||
<div class="title">
|
||||
<Layers />
|
||||
<span>Pods</span>
|
||||
</div>
|
||||
<span>{pods.length}</span>
|
||||
|
||||
<div class="title">
|
||||
<Connection />
|
||||
<span>CPUs allocated</span>
|
||||
</div>
|
||||
<span>{status.capacity.cpu}</span>
|
||||
|
||||
<div class="title">
|
||||
<Clock />
|
||||
<span>Memory allocaed</span>
|
||||
</div>
|
||||
<span>{convertKiToHumanReadable(status.capacity.memory)}</span>
|
||||
<!--
|
||||
<span>{uptime}</span>
|
||||
|
||||
<Lifecycle {conditions} />
|
||||
-->
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<div class="footer">
|
||||
{#each buttons as btn (btn)}
|
||||
<button on:click={() => console.log(node)}>
|
||||
<span>{btn}</span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.card {
|
||||
flex-grow: 1;
|
||||
max-width: 550px;
|
||||
|
||||
background: #fbf6f4;
|
||||
box-shadow: var(
|
||||
--str-shadow-s,
|
||||
0px 0px 2px #22242714,
|
||||
0px 1px 4px #2224271f,
|
||||
0px 4px 8px #22242729
|
||||
);
|
||||
pointer-events: all;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
padding: 0.75rem;
|
||||
background-color: white;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
|
||||
.icon {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
.status {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
border-radius: 50%;
|
||||
margin-left: auto;
|
||||
position: relative;
|
||||
|
||||
&.ok {
|
||||
background-color: var(--positive);
|
||||
}
|
||||
&.warning {
|
||||
background-color: var(--warning);
|
||||
}
|
||||
&.error {
|
||||
background-color: var(--negative);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 0.5rem;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.resource {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
padding: 0.5rem;
|
||||
background-color: var(--bg);
|
||||
|
||||
row-gap: 6px;
|
||||
column-gap: 20px;
|
||||
|
||||
> div,
|
||||
span {
|
||||
display: flex;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.resource .title svg) {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
|
||||
margin-top: auto;
|
||||
background: white;
|
||||
padding: 0.5rem;
|
||||
border-bottom-left-radius: 0.25rem;
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
|
||||
button {
|
||||
border: none;
|
||||
position: relative;
|
||||
background: transparent;
|
||||
height: unset;
|
||||
border-radius: 0.5rem;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
padding: 0 0.5rem;
|
||||
flex: 1;
|
||||
|
||||
span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 1.5rem;
|
||||
padding: 0 0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
border: 1px solid #eaddd5;
|
||||
border-radius: inherit;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
border-radius: 0.5rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: transform 0.1s ease;
|
||||
will-change: box-shadow 0.25s;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.positive {
|
||||
color: #077c35;
|
||||
}
|
||||
</style>
|
||||
16
src/lib/components/PageHeader.svelte
Normal file
16
src/lib/components/PageHeader.svelte
Normal file
@@ -0,0 +1,16 @@
|
||||
<h1><slot></slot></h1>
|
||||
|
||||
<style lang="scss">
|
||||
@font-face {
|
||||
font-family: 'Reckless Neue';
|
||||
font-style: normal;
|
||||
src: url('/fonts/RecklessNeue-Regular.woff2') format('woff2');
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Reckless Neue';
|
||||
font-weight: 400;
|
||||
font-size: 2.3rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
203
src/lib/components/Pod.svelte
Normal file
203
src/lib/components/Pod.svelte
Normal file
@@ -0,0 +1,203 @@
|
||||
<script lang="ts">
|
||||
import Connection from '$lib/icons/connection.svelte';
|
||||
import Network from '$lib/icons/network.svelte';
|
||||
import Layers from '$lib/icons/layers.svelte';
|
||||
import Clock from '$lib/icons/clock.svelte';
|
||||
import { formatDuration } from '$lib/utils/conversion';
|
||||
|
||||
import { onMount } from 'svelte';
|
||||
import type { V1DaemonSet, V1Deployment, V1Pod } from '@kubernetes/client-node';
|
||||
import { writable } from 'svelte/store';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
export let pod: V1Pod;
|
||||
export let parent: V1Deployment | V1DaemonSet;
|
||||
export let i: number;
|
||||
|
||||
let { metadata, spec, status } = pod;
|
||||
|
||||
// set name
|
||||
const name =
|
||||
metadata?.name || metadata?.labels?.app || metadata?.labels?.['app.kubernetes.io/app'];
|
||||
|
||||
// set replicas
|
||||
let replicas = -1;
|
||||
if (parent.spec?.['replicas'] !== undefined) {
|
||||
parent = parent as V1Deployment;
|
||||
replicas = parent.spec?.replicas || replicas;
|
||||
} else if (parent.status?.['currentNumberScheduled'] !== undefined) {
|
||||
parent = parent as V1DaemonSet;
|
||||
replicas = parent.status?.currentNumberScheduled || replicas;
|
||||
}
|
||||
|
||||
// set uptime
|
||||
let uptime = writable(new Date().getTime() - new Date(status?.startTime || 0).getTime());
|
||||
|
||||
onMount(() => {
|
||||
setInterval(() => uptime.update((n) => n + 1000), 1000);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="card">
|
||||
<div class="header">
|
||||
<div class="icon"><Layers /></div>
|
||||
<span class="name">{name}</span>
|
||||
|
||||
<!--
|
||||
<span class={`status ${node?.online === 1 ? 'ok' : 'error'}`}></span>
|
||||
-->
|
||||
</div>
|
||||
|
||||
<div class="resource">
|
||||
<div class="title">
|
||||
<Network />
|
||||
<span>Status</span>
|
||||
</div>
|
||||
<span>{status?.phase}</span>
|
||||
|
||||
<div class="title">
|
||||
<Network />
|
||||
<span>Pod IP address</span>
|
||||
</div>
|
||||
<span>{status?.podIP}</span>
|
||||
|
||||
<div class="title">
|
||||
<Layers />
|
||||
<span>Instances</span>
|
||||
</div>
|
||||
<span>{i + 1} of {replicas}</span>
|
||||
|
||||
<div class="title">
|
||||
<Connection />
|
||||
<span>Running on Node</span>
|
||||
</div>
|
||||
<span>{spec?.nodeName}</span>
|
||||
|
||||
<div class="title">
|
||||
<Clock />
|
||||
<span>Uptime</span>
|
||||
</div>
|
||||
<span>{formatDuration($uptime / 1000)}</span>
|
||||
<!--
|
||||
<span>{uptime}</span>
|
||||
|
||||
<Lifecycle {conditions} />
|
||||
-->
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<button on:click={() => goto(`/cluster/pod/${pod.metadata?.uid}`)}>
|
||||
<span>Pod details</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.card-container {
|
||||
background-color: #cab2aa40;
|
||||
border-radius: 0.5rem;
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
|
||||
.namespace {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
flex-grow: 1;
|
||||
max-width: 550px;
|
||||
|
||||
background: #fbf6f4;
|
||||
box-shadow: var(
|
||||
--str-shadow-s,
|
||||
0px 0px 2px #22242714,
|
||||
0px 1px 4px #2224271f,
|
||||
0px 4px 8px #22242729
|
||||
);
|
||||
pointer-events: all;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
padding: 0.75rem;
|
||||
background-color: white;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
|
||||
.icon {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
.status {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
border-radius: 50%;
|
||||
margin-left: auto;
|
||||
position: relative;
|
||||
|
||||
&.ok {
|
||||
background-color: var(--positive);
|
||||
}
|
||||
&.warning {
|
||||
background-color: var(--warning);
|
||||
}
|
||||
&.error {
|
||||
background-color: var(--negative);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 0.5rem;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.resource {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
padding: 0.5rem;
|
||||
background-color: var(--bg);
|
||||
|
||||
row-gap: 6px;
|
||||
column-gap: 20px;
|
||||
|
||||
> div,
|
||||
span {
|
||||
display: flex;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.resource .title svg) {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
|
||||
margin-top: auto;
|
||||
background: white;
|
||||
padding: 0.5rem;
|
||||
border-bottom-left-radius: 0.25rem;
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.positive {
|
||||
color: #077c35;
|
||||
}
|
||||
</style>
|
||||
75
src/lib/components/Progress.svelte
Normal file
75
src/lib/components/Progress.svelte
Normal file
@@ -0,0 +1,75 @@
|
||||
<script lang="ts">
|
||||
export let value: number | string;
|
||||
export let max: number = 100;
|
||||
</script>
|
||||
|
||||
<label for="file">Print progress</label>
|
||||
|
||||
<progress id="file" class="completed" {max} {value}>{value}%</progress>
|
||||
|
||||
<style lang="scss">
|
||||
label {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
progress {
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
border: 1px solid #ced7e6;
|
||||
opacity: 0.6;
|
||||
z-index: 1;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
margin-top: 0.5rem;
|
||||
|
||||
&.completed::-webkit-progress-value {
|
||||
background: unset !important;
|
||||
animation: unset !important;
|
||||
background-size: unset !important;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
rgb(255 80 24 / 48%),
|
||||
rgb(255 80 24 / 92%)
|
||||
) !important;
|
||||
}
|
||||
|
||||
&,
|
||||
&::-webkit-progress-inner-element,
|
||||
&::-webkit-progress-value,
|
||||
&::-webkit-progress-bar {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
&::-webkit-progress-value {
|
||||
border: 1px solid #a92200;
|
||||
margin-left: -1px;
|
||||
height: calc(100% + 2px);
|
||||
transform: translateY(-1px);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
|
||||
--width: 12px;
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
rgb(255, 80, 24),
|
||||
rgb(255, 80, 24) var(--width),
|
||||
rgb(255 80 24 / 48%) var(--width),
|
||||
rgb(255 80 24 / 48%) calc(var(--width) * 2)
|
||||
);
|
||||
|
||||
background-size: 200% 100%;
|
||||
animation: progress-animation 14s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes progress-animation {
|
||||
0% {
|
||||
background-position: -100% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 100% 0;
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
background: #f9f5f3;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
29
src/lib/components/Section.svelte
Normal file
29
src/lib/components/Section.svelte
Normal file
@@ -0,0 +1,29 @@
|
||||
<script lang="ts">
|
||||
export let title: string;
|
||||
export let description: string;
|
||||
</script>
|
||||
|
||||
<article class="main-container">
|
||||
<div class="header">
|
||||
<h2>{title}</h2>
|
||||
<label>{description}</label>
|
||||
</div>
|
||||
|
||||
<slot></slot>
|
||||
</article>
|
||||
|
||||
<style lang="scss">
|
||||
article {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: unset;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
259
src/lib/components/Server.svelte
Normal file
259
src/lib/components/Server.svelte
Normal file
@@ -0,0 +1,259 @@
|
||||
<script lang="ts">
|
||||
import ServerIcon from '$lib/icons/server.svelte';
|
||||
import CPU from '$lib/icons/cpu.svelte';
|
||||
import Shield from '$lib/icons/shield.svelte';
|
||||
import Floppy from '$lib/icons/floppy-disk.svelte';
|
||||
import Box from '$lib/icons/box.svelte';
|
||||
import LXC from '$lib/icons/cube-side.svelte';
|
||||
import Network from '$lib/icons/network.svelte';
|
||||
import Clock from '$lib/icons/clock.svelte';
|
||||
|
||||
import { formatBytes, formatDuration } from '$lib/utils/conversion';
|
||||
import type { Node } from '$lib/interfaces/proxmox';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let node: Node;
|
||||
|
||||
const buttons = ['View logs', 'Web terminal', 'graphs'];
|
||||
|
||||
let { cpuinfo, memory, uptime, loadavg } = node.info;
|
||||
|
||||
const vmsRunning = node.vms.filter((v) => v?.template !== 1 && v.status === 'running');
|
||||
const vmsTotal = node.vms.filter((v) => v?.template !== 1);
|
||||
const lxcsRunning = node.lxcs.filter((l) => l?.template !== 1 && l.status === 'running');
|
||||
const lxcsTotal = node.lxcs.filter((l) => l?.template !== 1);
|
||||
|
||||
onMount(() => {
|
||||
setInterval(() => (uptime += 1), 1000);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="card">
|
||||
<div class="header">
|
||||
<div class="icon"><ServerIcon /></div>
|
||||
<span class="name">{node?.name}</span>
|
||||
|
||||
<span class={`status ${node?.online === 1 ? 'ok' : 'error'}`}></span>
|
||||
</div>
|
||||
|
||||
<div class="resource">
|
||||
<div class="title">
|
||||
<Network />
|
||||
<span>Load</span>
|
||||
</div>
|
||||
<span>{loadavg}</span>
|
||||
|
||||
<div class="title">
|
||||
<CPU />
|
||||
<span>CPU cores</span>
|
||||
</div>
|
||||
<span
|
||||
>{cpuinfo.cpus} Cores on {cpuinfo.sockets} {cpuinfo.sockets > 1 ? 'Sockets' : 'Socket'}</span
|
||||
>
|
||||
|
||||
<div class="title">
|
||||
<Shield />
|
||||
<span>DDoS protection</span>
|
||||
</div>
|
||||
<span class="positive">Enabled</span>
|
||||
|
||||
<div class="title">
|
||||
<Network />
|
||||
<span>IPs</span>
|
||||
</div>
|
||||
<span>{node?.ip}</span>
|
||||
|
||||
<div class="title">
|
||||
<Floppy />
|
||||
<span>Memory</span>
|
||||
</div>
|
||||
<span>{formatBytes(memory?.total)}</span>
|
||||
|
||||
<div class="title">
|
||||
<Box />
|
||||
<span>VMs</span>
|
||||
</div>
|
||||
<span>{vmsRunning.length} / {vmsTotal.length}</span>
|
||||
|
||||
<div class="title">
|
||||
<LXC />
|
||||
<span>LXCs</span>
|
||||
</div>
|
||||
<span>{lxcsRunning.length} / {lxcsTotal.length}</span>
|
||||
|
||||
<div class="title">
|
||||
<Clock />
|
||||
<span>Uptime</span>
|
||||
</div>
|
||||
<span>{formatDuration(uptime)}</span>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
{#each buttons as btn (btn)}
|
||||
<button on:click={() => console.log(node)}>
|
||||
<span>{btn}</span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@keyframes pulse-live {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(0, 212, 57, 0.7);
|
||||
box-shadow: 0 0 0 0 rgba(0, 212, 57, 0.7);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 10px rgba(0, 212, 57, 0);
|
||||
box-shadow: 0 0 0 10px rgba(0, 212, 57, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(0, 212, 57, 0);
|
||||
box-shadow: 0 0 0 0 rgba(0, 212, 57, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin pulse-dot {
|
||||
&::after {
|
||||
content: '';
|
||||
top: 50%;
|
||||
margin-left: 0.4rem;
|
||||
position: absolute;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color);
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: pulse-live 2s infinite;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
background: #fbf6f4;
|
||||
box-shadow: var(
|
||||
--str-shadow-s,
|
||||
0px 0px 2px #22242714,
|
||||
0px 1px 4px #2224271f,
|
||||
0px 4px 8px #22242729
|
||||
);
|
||||
pointer-events: all;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
padding: 0.75rem;
|
||||
background-color: white;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
|
||||
.icon {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
.status {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
border-radius: 50%;
|
||||
margin-left: auto;
|
||||
position: relative;
|
||||
|
||||
&.ok {
|
||||
--color: var(--positive);
|
||||
@include pulse-dot;
|
||||
}
|
||||
&.warning {
|
||||
background-color: var(--warning);
|
||||
}
|
||||
&.error {
|
||||
background-color: var(--negative);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 0.5rem;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.resource {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
padding: 0.5rem;
|
||||
background-color: var(--bg);
|
||||
|
||||
row-gap: 6px;
|
||||
column-gap: 20px;
|
||||
|
||||
> div,
|
||||
span {
|
||||
display: flex;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.resource .title svg) {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
|
||||
margin-top: auto;
|
||||
background: white;
|
||||
padding: 0.5rem;
|
||||
border-bottom-left-radius: 0.25rem;
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
|
||||
button {
|
||||
border: none;
|
||||
position: relative;
|
||||
background: transparent;
|
||||
height: unset;
|
||||
border-radius: 0.5rem;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
padding: 0 0.5rem;
|
||||
flex: 1;
|
||||
|
||||
span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 1.5rem;
|
||||
padding: 0 0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
border: 1px solid #eaddd5;
|
||||
border-radius: inherit;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
border-radius: 0.5rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: transform 0.1s ease;
|
||||
will-change: box-shadow 0.25s;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.positive {
|
||||
color: #077c35;
|
||||
}
|
||||
</style>
|
||||
112
src/lib/components/Sidebar.svelte
Normal file
112
src/lib/components/Sidebar.svelte
Normal file
@@ -0,0 +1,112 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { derived } from 'svelte/store';
|
||||
|
||||
const pages = [
|
||||
{
|
||||
name: 'Home',
|
||||
path: '/'
|
||||
},
|
||||
{
|
||||
name: 'Sites',
|
||||
path: '/sites'
|
||||
},
|
||||
{
|
||||
name: 'Servers',
|
||||
path: '/servers'
|
||||
},
|
||||
{
|
||||
name: 'Printer',
|
||||
path: '/printer'
|
||||
},
|
||||
{
|
||||
name: 'Network',
|
||||
path: '/network'
|
||||
},
|
||||
{
|
||||
name: 'Cluster',
|
||||
path: '/cluster'
|
||||
},
|
||||
{
|
||||
name: 'Health',
|
||||
path: '/health'
|
||||
}
|
||||
];
|
||||
|
||||
const activePage = derived(page, ($page) => $page.url.pathname);
|
||||
</script>
|
||||
|
||||
<div class="nav-wrapper">
|
||||
<nav>
|
||||
{#each pages as page, i (page.name)}
|
||||
{#if i === 0}
|
||||
<a class={$activePage === page.path ? 'highlight' : ''} href={page.path}>{page.name}</a>
|
||||
{:else}
|
||||
<a
|
||||
class={`${$activePage !== page.path && $activePage.startsWith(page.path) ? 'child' : ''} ${$activePage.startsWith(page.path) ? 'highlight' : ''}`}
|
||||
href={page.path}>{page.name}</a
|
||||
>
|
||||
{/if}
|
||||
{/each}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.nav-wrapper {
|
||||
--nav-width: 240px;
|
||||
top: 72px;
|
||||
left: 0;
|
||||
min-width: var(--nav-width);
|
||||
margin-right: 1rem;
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
--nav-width: 100px;
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
width: var(--nav-width);
|
||||
gap: 4px;
|
||||
margin-top: 1rem;
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: 0.75rem 1rem;
|
||||
font-weight: 600;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 0.5rem;
|
||||
transition: 0.3s ease all;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover,
|
||||
&.highlight {
|
||||
background-color: var(--highlight);
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
transition: inherit;
|
||||
left: -2rem;
|
||||
opacity: 0;
|
||||
content: '->';
|
||||
}
|
||||
|
||||
&.child {
|
||||
padding-left: 2.5rem;
|
||||
|
||||
&::after {
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
content: '->';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
136
src/lib/components/Table.svelte
Normal file
136
src/lib/components/Table.svelte
Normal file
@@ -0,0 +1,136 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
export let title = '';
|
||||
export let description = '';
|
||||
export let columns: Array<string> | object;
|
||||
export let data: Array<unknown> = [];
|
||||
export let links: Array<string> = [];
|
||||
export let footer = '';
|
||||
|
||||
const hasLinks = links?.length > 0;
|
||||
let displayColumns: string[] = [];
|
||||
if (typeof columns === 'object' && !Array.isArray(columns)) {
|
||||
displayColumns = Object.values(columns);
|
||||
columns = Object.keys(columns);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="main-container">
|
||||
<div class="header">
|
||||
<h2>{title}</h2>
|
||||
<div class="description">{description}</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
{#if displayColumns.length > 0}
|
||||
{#each displayColumns as column (column)}
|
||||
<th>{column}</th>
|
||||
{/each}
|
||||
{:else}
|
||||
{#each columns as column (column)}
|
||||
<th>{column}</th>
|
||||
{/each}
|
||||
{/if}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each data as row, i (row)}
|
||||
<tr on:click={() => hasLinks && goto(links[i])} class={hasLinks ? 'link' : ''}>
|
||||
{#each columns as column (column)}
|
||||
{#if column === 'Link'}
|
||||
<td><a href={row[column]}>Link</a></td>
|
||||
{:else if column === 'Hex'}
|
||||
<td><span class="color" style={`background: ${row[column]}`} /></td>
|
||||
{:else if Array.isArray(row[column])}
|
||||
<td>{row[column].join(', ')}</td>
|
||||
{:else}
|
||||
<td>{row[column]}</td>
|
||||
{/if}
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{#if footer?.length}
|
||||
<footer>{footer}</footer>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.header {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 0.875rem;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-family: sans-serif;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
transition: background-color 0.25s;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: 500;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 14px;
|
||||
font-stretch: 2px;
|
||||
border-bottom: 1px solid #eaddd5;
|
||||
}
|
||||
|
||||
tr {
|
||||
&:not(&:last-of-type) {
|
||||
border-bottom: 1px solid #eaddd5;
|
||||
}
|
||||
|
||||
&:hover > td {
|
||||
background-color: var(--highlight);
|
||||
background-color: #f5ede9;
|
||||
}
|
||||
|
||||
&.link {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.color {
|
||||
--size: 2rem;
|
||||
display: block;
|
||||
width: calc(var(--size) * 2);
|
||||
height: var(--size);
|
||||
margin-top: -calc(var(--size / 2));
|
||||
margin-bottom: -calc(var(--size / 2));
|
||||
border-radius: var(--border-radius, 1rem);
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
</style>
|
||||
49
src/lib/components/navigation/Tab.svelte
Normal file
49
src/lib/components/navigation/Tab.svelte
Normal file
@@ -0,0 +1,49 @@
|
||||
<script>
|
||||
import { getContext } from 'svelte';
|
||||
import { TABS } from './Tabs.svelte';
|
||||
|
||||
const tab = {};
|
||||
const { registerTab, selectTab, selectedTab } = getContext(TABS);
|
||||
|
||||
registerTab(tab);
|
||||
</script>
|
||||
|
||||
<div class="tab">
|
||||
<button class:selected={$selectedTab === tab} on:click={() => selectTab(tab)}>
|
||||
<slot></slot>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
letter-spacing: 0.2px;
|
||||
|
||||
&.selected {
|
||||
opacity: 1;
|
||||
letter-spacing: unset;
|
||||
border-bottom-color: var(--color) !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tab {
|
||||
&:not(&:first-of-type) {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
opacity: 0.7;
|
||||
padding-bottom: 0.3rem;
|
||||
transition: 0.3s ease-in-out all;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
11
src/lib/components/navigation/TabList.svelte
Normal file
11
src/lib/components/navigation/TabList.svelte
Normal file
@@ -0,0 +1,11 @@
|
||||
<div class="tab-list">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.tab-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
29
src/lib/components/navigation/TabView.svelte
Normal file
29
src/lib/components/navigation/TabView.svelte
Normal file
@@ -0,0 +1,29 @@
|
||||
<script lang="ts">
|
||||
import { getContext } from 'svelte';
|
||||
import { fly, scale, slide, crossfade } from 'svelte/transition';
|
||||
import { TABS } from './Tabs.svelte';
|
||||
|
||||
const panel = {
|
||||
id: Math.random() * 100
|
||||
};
|
||||
const { registerPanel, selectedPanel } = getContext(TABS);
|
||||
|
||||
registerPanel(panel);
|
||||
|
||||
const [send, receive] = crossfade({ duration: 800 });
|
||||
</script>
|
||||
|
||||
{#if $selectedPanel === panel}
|
||||
<div in:fly={{ x: 200, duration: 500 }} out:fly={{ x: -50, duration: 300 }}>
|
||||
<!-- <div in:send="{{key: panel}}" out:receive="{{key: panel}}"> -->
|
||||
<slot></slot>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
div {
|
||||
position: absolute;
|
||||
top: calc(3.25rem);
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
63
src/lib/components/navigation/Tabs.svelte
Normal file
63
src/lib/components/navigation/Tabs.svelte
Normal file
@@ -0,0 +1,63 @@
|
||||
<script context="module">
|
||||
export const TABS = {};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { setContext, onDestroy } from 'svelte';
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
const tabs = [];
|
||||
const panels = [];
|
||||
const selectedTab = writable(null);
|
||||
const selectedPanel = writable(null);
|
||||
|
||||
setContext(TABS, {
|
||||
registerTab: (tab) => {
|
||||
tabs.push(tab);
|
||||
selectedTab.update((current) => current || tab);
|
||||
|
||||
onDestroy(() => {
|
||||
const i = tabs.indexOf(tab);
|
||||
tabs.splice(i, 1);
|
||||
selectedTab.update((current) =>
|
||||
current === tab ? tabs[i] || tabs[tabs.length - 1] : current
|
||||
);
|
||||
});
|
||||
},
|
||||
|
||||
registerPanel: (panel) => {
|
||||
panels.push(panel);
|
||||
selectedPanel.update((current) => current || panel);
|
||||
|
||||
onDestroy(() => {
|
||||
const i = panels.indexOf(panel);
|
||||
panels.splice(i, 1);
|
||||
selectedPanel.update((current) =>
|
||||
current === panel ? panels[i] || panels[panels.length - 1] : current
|
||||
);
|
||||
});
|
||||
},
|
||||
|
||||
selectTab: (tab) => {
|
||||
const i = tabs.indexOf(tab);
|
||||
selectedTab.set(tab);
|
||||
selectedPanel.set(panels[i]);
|
||||
},
|
||||
|
||||
selectedTab,
|
||||
selectedPanel
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="tabs">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.tabs {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user