fix: switch time scale (#58)

* refactor(backend): save idea for future getFullData handler

* fix(frontend): reactivity

* chore(dev): disable s3 by default

* chore(chart): bump version

backend/main.py

@@ -58,3 +58,25 @@ def get_components_or_details(name: str | None = None, view: str = "quarter"):
 
     component = db.get_component(name=name, view=view)
     return component
+
+
+# @app.get("/full/")
+# @ttl_cache(CACHE_TTL_DEFAULT)
+# def get_full():
+#     views = ("quarter", "hours", "year")
+#
+#     data = {}
+#
+#     data["overview"] = db.get_overview()
+#     data["components"] = db.list_components()
+#
+#     data["data"] = {}
+#
+#     for component in data["components"]:
+#         data["data"][component] = {}
+#
+#     for component in data["components"]:
+#         for view in views:
+#             data["data"][component][view] = db.get_component(name=component, view=view)
+#
+#     return data

charts/pagetron/Chart.yaml

@@ -8,4 +8,4 @@ type: application
 
 version: 0.1.0
 
-appVersion: "0.2.1"
+appVersion: "0.2.2"

charts/pagetron/values.dev.yaml

@@ -14,7 +14,7 @@ publicAccess:
     class: traefik
 
   s3:
-    enabled: true
+    enabled: false
 
     secretName: s3-publish-credentials
     bucketName: pagetron-status-page

frontend/src/lib/Component.svelte

@@ -1,6 +1,9 @@
 <script>
 	import humanizeDuration from 'humanize-duration';
 
+	import { get } from 'svelte/store';
+	import { viewStore } from '$lib/stores.js';
+
 	import Tick from '$lib/Tick.svelte';
 
 	export let dummy = false;
@@ -11,7 +14,6 @@
 	export let observations = [];
 	export let tickCapacitySeconds = 60;
 
-	let thresholds = [0.99, 0.95];
 	let uptimeStateClasses = '';
 
 	if (dummy) {
@@ -39,38 +41,69 @@
 		return url.startsWith('http') ? url : 'http://' + url;
 	}
 
-	if (dummy) {
-		uptimeStateClasses = 'has-text-grey';
-	} else if (uptime > thresholds[0]) {
-		uptimeStateClasses = 'has-text-success';
-	} else if (uptime > thresholds[1]) {
-		uptimeStateClasses = 'has-text-warning-dark';
-	} else {
-		uptimeStateClasses = 'has-text-danger-dark';
+	function getUptimeStateClasses(uptime) {
+		let thresholds = [0.99, 0.95];
+
+		if (dummy) {
+			uptimeStateClasses = 'has-text-grey';
+		} else if (uptime > thresholds[0]) {
+			uptimeStateClasses = 'has-text-success';
+		} else if (uptime > thresholds[1]) {
+			uptimeStateClasses = 'has-text-warning-dark';
+		} else {
+			uptimeStateClasses = 'has-text-danger-dark';
+		}
+
+		return uptimeStateClasses;
+	}
+
+	function getTimelineStart(view) {
+		let timelineStart = '';
+
+		switch (view) {
+			case 'hours':
+				timelineStart = '6 hours';
+				break;
+			case 'quarter':
+				timelineStart = '90 days';
+				break;
+			case 'year':
+				timelineStart = 'year';
+				break;
+		}
+
+		return timelineStart;
 	}
 
-	let timelineStart = '';
-	switch (view) {
-		case 'hours':
-			timelineStart = '6 hours';
-			tickCapacitySeconds = 60 * 5;
-			break;
-		case 'quarter':
-			timelineStart = '90 days';
-			tickCapacitySeconds = 60 * 60 * 24;
-			break;
-		case 'year':
-			timelineStart = 'year';
-			tickCapacitySeconds = 60 * 60 * 24 * 7;
-			break;
+	function getTickCapacitySeconds(view) {
+		let tickCapacitySeconds = 60;
+
+		switch (view) {
+			case 'hours':
+				tickCapacitySeconds = 60 * 5;
+				break;
+			case 'quarter':
+				tickCapacitySeconds = 60 * 60 * 24;
+				break;
+			case 'year':
+				tickCapacitySeconds = 60 * 60 * 24 * 7;
+				break;
+		}
+
+		return tickCapacitySeconds;
 	}
 
-	let tickCapacityHuman = humanizeDuration(tickCapacitySeconds * 1000, {
+	viewStore.subscribe((value) => (view = value));
+
+	$: view = get(viewStore);
+	$: uptimeStateClasses = getUptimeStateClasses(uptime);
+	$: timelineStart = getTimelineStart(view);
+	$: tickCapacitySeconds = getTickCapacitySeconds(view);
+	$: tickCapacityHuman = humanizeDuration(tickCapacitySeconds * 1000, {
 		maxDecimalPoints: 1,
 		units: ['w', 'd', 'h', 'm', 's']
 	});
-
-	let uptimeHuman = (uptime * 100.0).toFixed(2);
+	$: uptimeHuman = (uptime * 100.0).toFixed(2);
 </script>
 
 <div class="box">

frontend/src/lib/ComponentsList.svelte

@@ -1,29 +1,26 @@
 <script>
 	import Component from '$lib/Component.svelte';
 
-	/** @type {import('./$types').PageData} */
+	import { get } from 'svelte/store';
+	import { viewStore } from '$lib/stores.js';
+
 	export let components = [];
 	export let componentsData = {};
 	export let view = 'day';
 
-	$: components;
+	function getDataForView(c, v) {
+		return componentsData[c][v];
+	}
+
+	viewStore.subscribe((value) => (view = value));
+
+	$: view = get(viewStore);
 </script>
 
 <section>
 	<div class="container">
 		{#each components as c}
-			{#await c}
-				<Component name={c} dummy="true" />
-			{:then c}
-				<Component
-					name={componentsData[c][view].name}
-					observations={componentsData[c][view].observations}
-					uptime={componentsData[c][view].uptime}
-					{view}
-				/>
-			{:catch error}
-				<Component name="..." dummy="true" />
-			{/await}
+			<Component {view} {...getDataForView(c, view)} />
 		{/each}
 	</div>
 </section>

frontend/src/lib/Overview.svelte

@@ -1,9 +1,9 @@
 <script>
 	export let status = false;
-	export let componentsCount = 0;
-	export let issuesCount = 0;
-	export let componentsIssues = [];
-	export let datetimeHuman = 'Dec 01 at 00:01';
+	export let components_count = 0;
+	export let issues_count = 0;
+	export let components_issues = [];
+	export let datetime_human = 'Dec 01 at 00:01';
 
 	let statusClass = '';
 	let statusText = 'Unknown';
@@ -12,20 +12,20 @@
 		statusClass = 'is-success';
 		statusText = 'All components online';
 	} else {
-		if (issuesCount == componentsCount) {
+		if (issues_count == components_count) {
 			statusClass = 'is-danger';
 			statusText = 'All components down!';
 		} else {
 			statusClass = 'is-warning';
-			statusText = `${issuesCount} component(s) unavailable`;
+			statusText = `${issues_count} component(s) unavailable`;
 		}
 	}
 </script>
 
 <div class="container status">
 	<div class="notification has-text-centered {statusClass}">
 		<p class="title">{statusText}</p>
-		<p class="subtitle is-size-6">Last updated on {datetimeHuman} UTC</p>
+		<p class="subtitle is-size-6">Last updated on {datetime_human} UTC</p>
 	</div>
 </div>
 

frontend/src/lib/Tick.svelte

@@ -8,46 +8,75 @@
 
 	let units = [];
 
-	if (capacity <= 60 * 5) {
-		units = ['m', 's'];
-	} else if (capacity <= 60 * 60 * 24) {
-		units = ['d', 'h', 'm'];
-	} else if (capacity <= 60 * 60 * 24 * 7) {
-		units = ['w', 'd', 'h'];
-	} else {
-		units = ['w', 'd'];
+	function getUnits(capacity) {
+		let units = [];
+
+		if (capacity <= 60 * 5) {
+			units = ['m', 's'];
+		} else if (capacity <= 60 * 60 * 24) {
+			units = ['d', 'h', 'm'];
+		} else if (capacity <= 60 * 60 * 24 * 7) {
+			units = ['w', 'd', 'h'];
+		} else {
+			units = ['w', 'd'];
+		}
+
+		return units;
 	}
 
 	let tickStateClasses = '';
 
 	let downtime = 0.0;
 	let downtimeHumanText = '';
 
-	if (uptime == -1.0) {
-		downtime = 1.0 * capacity * 1000; // no data
-	} else {
-		downtime = Math.round((1.0 - uptime) * capacity) * 1000;
+	function getDowntime(uptime) {
+		if (uptime == -1.0) {
+			downtime = 1.0 * capacity * 1000; // no data
+		} else {
+			downtime = Math.round((1.0 - uptime) * capacity) * 1000;
+		}
+
+		return downtime;
 	}
 
-	if (uptime == -1.0) {
-		tickStateClasses = 'has-background-grey';
-	} else if (uptime > thresholds[0]) {
-		tickStateClasses = 'has-background-success';
-		if (downtime > 0) {
-			tickStateClasses += ' ' + 'has-minor-issue';
+	function getTickStateClass(uptime) {
+		let tickStateClasses;
+
+		if (uptime == -1.0) {
+			tickStateClasses = 'has-background-grey';
+		} else if (uptime > thresholds[0]) {
+			tickStateClasses = 'has-background-success';
+			if (downtime > 0) {
+				tickStateClasses += ' ' + 'has-minor-issue';
+			}
+		} else if (uptime > thresholds[1]) {
+			tickStateClasses = 'has-background-warning';
+		} else {
+			tickStateClasses = 'has-background-danger';
 		}
-	} else if (uptime > thresholds[1]) {
-		tickStateClasses = 'has-background-warning';
-	} else {
-		tickStateClasses = 'has-background-danger';
+
+		return tickStateClasses;
 	}
 
-	if (uptime == -1.0) {
-		downtimeHumanText = '\n' + 'no data';
-	} else if (downtime > 0) {
-		let downtimeHuman = humanizeDuration(downtime, { maxDecimalPoints: 0, units: units });
-		downtimeHumanText = '\n' + 'down for ' + downtimeHuman;
+	function getDowntimeText(uptime) {
+		let getDowntimeText;
+
+		if (uptime == 1) {
+			downtimeHumanText = '';
+		} else if (uptime == -1.0) {
+			downtimeHumanText = '\n' + 'no data';
+		} else if (downtime > 0) {
+			let downtimeHuman = humanizeDuration(downtime, { maxDecimalPoints: 0, units: units });
+			downtimeHumanText = '\n' + 'down for ' + downtimeHuman;
+		}
+
+		return downtimeHumanText;
 	}
+
+	$: downtime = getDowntime(uptime);
+	$: units = getUnits(capacity);
+	$: downtimeHumanText = getDowntimeText(uptime);
+	$: tickStateClasses = getTickStateClass(uptime);
 </script>
 
 <div

frontend/src/routes/+page.server.js

@@ -9,8 +9,8 @@ export async function load({ fetch, params }) {
 	let componentsData = {};
 
 	if (isBuildingSnapshot) {
-    return getAllData();
+		return getAllData();
 	}
 
-  return { overview, components, componentsData };
+	return { overview, components, componentsData };
 }

frontend/src/routes/+page.svelte

@@ -1,7 +1,8 @@
 <script>
-	import { apiUrl, getAllData } from '$lib/api.js';
+	import { getAllData } from '$lib/api.js';
 	import { isBuildingSnapshot } from '$lib/utils.js';
 
+	import { get } from 'svelte/store';
 	import { viewStore } from '$lib/stores.js';
 
 	import Header from '$lib/Header.svelte';
@@ -21,21 +22,15 @@
 
 	viewStore.subscribe((value) => (view = value));
 
-	$: view;
+	$: view = get(viewStore);
 </script>
 
 <Header />
 
 {#await data}
 	<Dummy />
 {:then data}
-	<Overview
-		status={data.overview.status}
-		componentsCount={data.overview.components_count}
-		issuesCount={data.overview.issues_count}
-		componentsIssues={data.overview.components_issues}
-		datetimeHuman={data.overview.datetime_human}
-	/>
+	<Overview {...data.overview} />
 	<ComponentsList components={data.components} componentsData={data.componentsData} {view} />
 {:catch error}
 	<Dummy error={error.message} />