fix: minor issues

agrrh · Dec 8, 2023 · 1ece36b · 1ece36b
1 parent 895544e
commit 1ece36b
Show file tree

Hide file tree

Showing 9 changed files with 79 additions and 92 deletions.
diff --git a/README.md b/README.md
@@ -21,16 +21,23 @@ Free to use and extend
 
 ### Built With
 
-- Platform
-    - [Docker](https://www.docker.com/)
-    - [Kubernetes](https://kubernetes.io/)
+Platform
 
-- Frontend
-    - [Svelte](https://svelte.dev)
+  - [Docker](https://www.docker.com/)
+  - [Kubernetes](https://kubernetes.io/)
 
-- Backend
-    - [FastAPI](https://fastapi.tiangolo.com/)
-    - [Prometheus](https://prometheus.io)
+Frontend
+
+
+  - [Svelte](https://svelte.dev)
+
+Backend
+
+  - [FastAPI](https://fastapi.tiangolo.com/)
+
+Storage
+
+  - [Prometheus](https://prometheus.io)
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
@@ -92,7 +99,7 @@ Then run backend API:
 ```
 cd backend
 
-docker build . local/pagetron:backend
+docker build . -t local/pagetron:backend
 docker run --rm -ti --network host local/pagetron:backend
 ```
 

diff --git a/backend/lib/db_interface.py b/backend/lib/db_interface.py
@@ -70,27 +70,13 @@ def list_components(self) -> List[str]:
 
     def get_component(self, name: str, view="quarter") -> dict:
         VIEW_PRESETS = {
-            "day": ViewPreset(
-                depth=24,
+            "hours": ViewPreset(
+                depth=6,
                 unit="h",
-                step="15m",
+                step="5m",
                 metric="pagetron:availability:1m",
                 precision="time",
             ),
-            "week": ViewPreset(
-                depth=7,
-                unit="d",
-                step="3h",
-                metric="pagetron:availability:1h",
-                precision="datetime",
-            ),
-            "month": ViewPreset(
-                depth=30,
-                unit="d",
-                step="12h",
-                metric="pagetron:availability:1d",
-                precision="datetime",
-            ),
             "quarter": ViewPreset(
                 depth=90,
                 unit="d",

diff --git a/deploy/prometheus/prometheus.configmap.yaml b/deploy/prometheus/prometheus.configmap.yaml
@@ -69,11 +69,11 @@ data:
         rules:
           - record: pagetron:availability:1h
             expr: |-
-                min_over_time(pagetron:availability:1m[60m:1m])
+                avg_over_time(pagetron:availability:1m[60m:1m])
 
       - name: pagetron_day
         interval: 30m
         rules:
           - record: pagetron:availability:1d
             expr: |-
-                min_over_time(pagetron:availability:1h[24h:30m])
+                avg_over_time(pagetron:availability:1h[24h:30m])
diff --git a/frontend/src/lib/Component.svelte b/frontend/src/lib/Component.svelte
@@ -45,24 +45,16 @@
 
 	let timelineStart = '';
 	switch (view) {
-		case 'day':
-			timelineStart = '24 hours';
-			tickCapacitySeconds = 60 * 15;
-			break;
-		case 'week':
-			timelineStart = '7 days';
-			tickCapacitySeconds = 60 * 60 * 3;
-			break;
-		case 'month':
-			timelineStart = '30 days';
-			tickCapacitySeconds = 60 * 60 * 12;
+		case 'hours':
+			timelineStart = '6 hours';
+			tickCapacitySeconds = 60 * 5;
 			break;
 		case 'quarter':
 			timelineStart = '90 days';
 			tickCapacitySeconds = 60 * 60 * 24;
 			break;
 		case 'year':
-			timelineStart = '1 year';
+			timelineStart = 'year';
 			tickCapacitySeconds = 60 * 60 * 24 * 7;
 			break;
 	}
@@ -79,13 +71,7 @@
 	<div class="header columns is-mobile">
 		<div class="column is-3">
 			<p class="is-size-5 has-text-weight-bold">
-				<a href={name} target="_blank">
-					<span class="has-text-grey">{urlSplit(name)[0]}</span><!--
-					-->{urlSplit(
-						name
-					)[1]}<!--
-		 --></a
-				>
+				<a class="has-text-link-dark" href="{name}" target="_blank">{name}</a>
 			</p>
 		</div>
 		<div class="column has-text-right">

diff --git a/frontend/src/lib/Header.svelte b/frontend/src/lib/Header.svelte
@@ -1,4 +1,6 @@
 <script>
+	import ViewSelector from '$lib/ViewSelector.svelte';
+
 	function toggleMenu() {
 		var burger = document.querySelector('.navbar-burger');
 		var menu = document.querySelector('#' + burger.dataset.target);
@@ -32,7 +34,9 @@
 		</div>
 
 		<div id="navMenu" class="navbar-menu has-background-black">
-			<div class="navbar-start"></div>
+			<div class="navbar-start">
+				<ViewSelector />
+			</div>
 
 			<div class="navbar-end">
 				<div class="navbar-item">

diff --git a/frontend/src/lib/Tick.svelte b/frontend/src/lib/Tick.svelte
@@ -6,6 +6,18 @@
 	export let capacity = 60;
 	export let thresholds = [0.99, 0.95];
 
+	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'];
+	}
+
 	let tickStateClasses = '';
 
 	let downtime = 0.0;
@@ -30,8 +42,10 @@
 		tickStateClasses = 'has-background-danger';
 	}
 
-	if (downtime > 0) {
-		let downtimeHuman = humanizeDuration(downtime, { maxDecimalPoints: 1, units: ['h', 'm', 's'] });
+	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;
 	}
 </script>
@@ -62,6 +76,6 @@
 	}
 
 	div.tick.has-minor-issue {
-		border-top: 2px solid #ffe08a;
+		border-top: 5px solid #ffe08a;
 	}
 </style>
diff --git a/frontend/src/lib/ViewSelector.svelte b/frontend/src/lib/ViewSelector.svelte
@@ -1,57 +1,49 @@
 <script>
 	import { viewStore } from '$lib/stores.js';
 
-	export let view = '';
+	let curViewName = '';
+	let curViewIconClass = '';
 
 	const views = [
-		{ name: 'day', icon: 'fa-calendar-day' },
-		{ name: 'week', icon: 'fa-calendar-week' },
-		{ name: 'month', icon: 'fa-calendar-days' },
-		{ name: 'quarter', icon: 'fa-table-cells-large' },
-		{ name: 'year', icon: 'fa-earth-asia' }
+		{ name: 'hours', icon: 'fa fa-clock' },
+		{ name: 'quarter', icon: 'fa fa-calendar-days' },
+		{ name: 'year', icon: 'fa fa-earth-asia' }
 	];
 
-	function capitalize(string) {
-		return string.charAt(0).toUpperCase() + string.slice(1);
-	}
+	function nextView(e) {
+		let viewsList = views.map((x) => x.name);
+		let i = viewsList.indexOf(view) + 1;
+
+		if (i >= views.length) {
+			i = 0;
+		}
 
-	function setView(e) {
-		let view = e.target.getAttribute('pagetron-data');
 		if (view != null) {
-			viewStore.set(view);
+			viewStore.set(viewsList[i]);
 		}
 	}
 
+	let view = '';
+
 	viewStore.subscribe((value) => (view = value));
+
+	$: view;
+	$: curViewIconClass = views.filter((x) => x.name == view)[0]["icon"];
 </script>
 
-<div class="container block">
-	<nav class="pagination is-centered" role="navigation" aria-label="pagination">
-		<ul class="pagination-list">
-			{#each views as { name, icon }, i}
-				<li>
-					<a
-						class="
-            pagination-link
-            {name == view ? 'is-current' : ''}
-          "
-						aria-label="Goto {name} view"
-						pagetron-data={name}
-						on:click={setView}
-					>
-						<i class="fa {icon}"></i>
-						&nbsp; {capitalize(name)}
-					</a>
-				</li>
-			{/each}
-		</ul>
-	</nav>
+<div class="navbar-item">
+	<a
+		id="viewSelector"
+		class="button is-dark has-text-left"
+		on:click={nextView}
+	>
+		<span class="{curViewIconClass}"></span>
+		<span class="is-capitalized"> &nbsp; {view} </span>
+	</a>
 </div>
 
 <style>
-	ul.pagination-list a.is-current {
-		color: #0a0a0a;
-		background-color: #ffffff;
-		border-color: #7a7a7a;
-	}
+a#viewSelector {
+	width: 120px;
+}
 </style>
diff --git a/frontend/src/lib/stores.js b/frontend/src/lib/stores.js
@@ -1,3 +1,3 @@
 import { writable } from 'svelte/store';
 
-export const viewStore = writable('day');
+export const viewStore = writable('quarter');
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
@@ -3,7 +3,6 @@
 
 	import Header from '$lib/Header.svelte';
 	import Overview from '$lib/Overview.svelte';
-	import ViewSelector from '$lib/ViewSelector.svelte';
 	import ComponentsList from '$lib/ComponentsList.svelte';
 	import Footer from '$lib/Footer.svelte';
 	import Dummy from '$lib/Dummy.svelte';
@@ -39,7 +38,6 @@
 		componentsIssues={data.overview.components_issues}
 		datetimeHuman={data.overview.datetime_human}
 	/>
-	<ViewSelector {view} />
 	<ComponentsList components={data.components} {view} />
 {:catch error}
 	<Dummy error={error.message} />