KevinMidboe/infra-map
1
0
Fork 0
mirror of https://github.com/KevinMidboe/infra-map.git synced 2026-01-11 11:45:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

source, static files & Dockerfile

Browse Source
This commit is contained in:
Kevin
2025-04-08 21:47:35 +02:00
parent 24ab595ab3
commit 68ebc7568e
92 changed files with 4348 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
src/lib/components/Pod.svelte Normal file
View 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>