Skip to content

Commit

Permalink
Refactor summary display components to use SummaryCard for cost, CPU,…
Browse files Browse the repository at this point in the history 
… and memory utilization
  • Loading branch information
@rbjornstad
rbjornstad committed Dec 16, 2024
1 parent d4805f9 commit 2050c10
Show file tree
Hide file tree
Showing 2 changed files with 142 additions and 52 deletions.
81 changes: 81 additions & 0 deletions src/lib/components/SummaryCard.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<script lang="ts">
import { HelpText } from '@nais/ds-svelte-community';
import type { Snippet } from 'svelte';
const colors = {
green: '#91dc75',
blue: '#83bff6'
};
interface Props {
helpText?: string;
title: string;
icon: Snippet<[{ color: string }]>;
children: Snippet;
color: keyof typeof colors;
styled?: boolean;
}
let { helpText, title, icon, children, color: colorName, styled = true }: Props = $props();
let color = $derived(colors[colorName]);
const helpTextTitle = 'Hjelpetekst';
</script>

<div class="summaryCard">
<div
class="summaryIcon"
class:withBorder={styled}
class:withBackground={styled}
style:--bg-color={color}
>
{@render icon({ color })}
</div>
<div class="summary">
<h4>
{title}
{#if helpText}
<HelpText title={helpTextTitle}>{helpText}</HelpText>
{/if}
</h4>
<p class="metric">
{@render children()}
</p>
</div>
</div>

<style>
.summaryCard {
display: grid;
grid-template-columns: 50px 1fr;
align-items: center;
gap: 20px;
}
.summaryIcon {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
}
.withBorder {
border: 2px solid var(--bg-color);
border-radius: 5px;
}
.withBackground {
background-color: color-mix(in srgb, var(--bg-color) 10%, white);
}
.summary {
width: 100%;
}
.summary > h4 {
display: flex;
justify-content: space-between;
margin: 0;
font-size: 1rem;
color: var(--color-text-secondary);
}
.metric {
font-size: 1.5rem;
margin: 0;
}
</style>
113 changes: 61 additions & 52 deletions src/routes/team/[team]/(teamPages)/postgres/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
import { page } from '$app/stores';
import { PendingValue, SqlInstanceOrderField } from '$houdini';
import Card from '$lib/Card.svelte';
import CostIcon from '$lib/icons/CostIcon.svelte';
import {
Button,
HelpText,
Expand All @@ -25,7 +24,9 @@
import CircleProgressBar from '$lib/components/CircleProgressBar.svelte';
import Cost from '$lib/components/Cost.svelte';
import SummaryCard from '$lib/components/SummaryCard.svelte';
import GraphErrors from '$lib/GraphErrors.svelte';
import CostIcon from '$lib/icons/CostIcon.svelte';
import { changeParams } from '$lib/utils/searchparams';
import prettyBytes from 'pretty-bytes';
import type { PageData } from './$houdini';
Expand Down Expand Up @@ -69,57 +70,52 @@

<div class="summary-grid">
<Card columns={3}>
<div class="summaryCard">
<div class="summaryIcon" style="--bg-color: #91dc75">
<CostIcon size="32" color="#91dc75" />
</div>
<div class="summary">
<h4>
Cost
<HelpText title="">Total SQL instance cost for the last 30 days.</HelpText>
</h4>
<p class="metric">
{#if cost !== PendingValue}
<Cost cost={cost.daily.sum} />
{:else}
<Skeleton variant="text" />
{/if}
</p>
</div>
</div>
<!-- TODO: alle de andre i morgen -->
<SummaryCard
title="Cost"
helpText="Total SQL instance cost for the last 30 days"
color="blue"
>
{#snippet icon({ color })}
<CostIcon size="32" {color} />
{/snippet}
{#if cost !== PendingValue}
<Cost cost={cost.daily.sum} />
{:else}
<Skeleton variant="text" />
{/if}
</SummaryCard>
</Card>
<Card columns={3}>
<div class="summaryCard">
<div>
<SummaryCard
title="CPU utilization"
helpText="Current CPU utilization"
color="blue"
styled={false}
>
{#snippet icon()}
{#if utilization.sqlInstances !== PendingValue}
<CircleProgressBar progress={utilization.sqlInstances.cpu.utilization} />
{:else}
<Skeleton height="50px" width="50px" variant="circle" />
{/if}
</div>
<div class="summary">
<h4>
CPU utilization
<HelpText title="Current CPU utilization">
CPU utilization for the last elapsed hour.
</HelpText>
</h4>
{/snippet}

{#if utilization.sqlInstances !== PendingValue}
<p class="metric">
{#if utilization.sqlInstances !== PendingValue}
{(utilization.sqlInstances.cpu.utilization * 100).toFixed(1)}% of
{utilization.sqlInstances.cpu.requested.toFixed(0)} core{utilization.sqlInstances.cpu
.requested > 1
? 's'
: ''}
{:else}
<Skeleton variant="text" />
{/if}
{(utilization.sqlInstances.cpu.utilization * 100).toFixed(1)}% of
{utilization.sqlInstances.cpu.requested.toFixed(0)} core{utilization.sqlInstances.cpu
.requested > 1
? 's'
: ''}
</p>
</div>
</div>
{:else}
<Skeleton variant="text" />
{/if}
</SummaryCard>
</Card>
<Card columns={3}>
<div class="summaryCard">
<!--div class="summaryCard">
<div>
{#if utilization.sqlInstances !== PendingValue}
<CircleProgressBar progress={utilization.sqlInstances.memory.utilization} />
Expand All @@ -143,7 +139,30 @@
{/if}
</p>
</div>
</div>
</div-->
<SummaryCard
title="Memory utilization"
helpText="Memory utilization for the last elapsed hour."
color="blue"
styled={false}
>
{#snippet icon()}
{#if utilization.sqlInstances !== PendingValue}
<CircleProgressBar progress={utilization.sqlInstances.memory.utilization} />
{:else}
<Skeleton height="50px" width="50px" variant="circle" />
{/if}
{/snippet}

{#if utilization.sqlInstances !== PendingValue}
<p class="metric">
{(utilization.sqlInstances.memory.utilization * 100).toFixed(1)}% of
{prettyBytes(utilization.sqlInstances.memory.requested)}
</p>
{:else}
<Skeleton variant="text" />
{/if}
</SummaryCard>
</Card>
<Card columns={3}>
<div class="summaryCard">
Expand Down Expand Up @@ -363,16 +382,6 @@
margin-bottom: 1rem;
}
.summaryIcon {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
border: 1px solid var(--bg-color);
border-radius: 5px;
}
.summary {
width: 100%;
}
Expand Down

0 comments on commit 2050c10

Please sign in to comment.