Add latency indicator tooltip

Closes #467

app/src/lang/en-US/index.json

@@ -28,6 +28,11 @@
 	"create_user": "Create User",
 	"create_webhook": "Create Webhook",
 
+	"connection_excellent": "Excellent Connection",
+	"connection_good": "Good Connection",
+	"connection_fair": "Fair Connection",
+	"connection_poor": "Poor Connection",
+
 	"rename_folder": "Rename Folder",
 	"delete_folder": "Delete Folder",
 	"reset_bookmark": "Reset Bookmark",

app/src/views/private/components/latency-indicator/latency-indicator.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="latency-indicator">
+	<div class="latency-indicator" v-tooltip.bottom.end="latencyTooltip">
 		<v-progress-circular indeterminate v-if="!lastLatency" />
 		<v-icon v-else :name="icon" />
 	</div>
@@ -9,6 +9,8 @@
 import { defineComponent, computed } from '@vue/composition-api';
 import { useLatencyStore } from '@/stores';
 import { sortBy } from 'lodash';
+import { i18n } from '@/lang';
+import ms from 'ms';
 
 export default defineComponent({
 	setup() {
@@ -19,15 +21,52 @@ export default defineComponent({
 			return sorted[sorted.length - 1];
 		});
 
-		const icon = computed<string>(() => {
-			const { latency } = lastLatency.value;
-			if (latency <= 750) return 'signal_wifi_4_bar';
-			else if (latency > 750 && latency <= 1250) return 'signal_wifi_3_bar';
-			else if (latency > 1250 && latency <= 2000) return 'signal_wifi_2_bar';
-			return 'signal_wifi_1_bar';
+		const avgLatency = computed(() => {
+			const sorted = sortBy(latencyStore.state.latency, ['timestamp']);
+			const lastFive = sorted.slice(Math.max(sorted.length - 5, 0));
+			let total = 0;
+
+			for (const { latency } of lastFive) {
+				total += latency;
+			}
+
+			return Math.round(total / lastFive.length);
 		});
 
-		return { icon, lastLatency };
+		const connectionStrength = computed(() => {
+			if (avgLatency.value <= 250) return 4;
+			else if (avgLatency.value > 250 && avgLatency.value <= 500) return 3;
+			else if (avgLatency.value > 500 && avgLatency.value <= 750) return 2;
+			return 1;
+		});
+
+		const latencyTooltip = computed(() => {
+			switch (connectionStrength.value) {
+				case 4:
+					return `${i18n.t('connection_excellent')}\n(${ms(avgLatency.value)} ${i18n.t('latency')})`;
+				case 3:
+					return `${i18n.t('connection_good')}\n(${ms(avgLatency.value)} ${i18n.t('latency')})`;
+				case 2:
+					return `${i18n.t('connection_fair')}\n(${ms(avgLatency.value)} ${i18n.t('latency')})`;
+				case 1:
+					return `${i18n.t('connection_poor')}\n(${ms(avgLatency.value)} ${i18n.t('latency')})`;
+			}
+		});
+
+		const icon = computed<string>(() => {
+			switch (connectionStrength.value) {
+				case 4:
+					return 'signal_wifi_4_bar';
+				case 3:
+					return 'signal_wifi_3_bar';
+				case 2:
+					return 'signal_wifi_2_bar';
+				case 1:
+					return 'signal_wifi_1_bar';
+			}
+		});
+
+		return { icon, lastLatency, latencyTooltip };
 	},
 });
 </script>

app/src/views/private/components/project-chooser/index.ts

@@ -1,4 +0,0 @@
-import ProjectChooser from './project-chooser.vue';
-
-export { ProjectChooser };
-export default ProjectChooser;

app/src/views/private/components/project-info/index.ts

@@ -0,0 +1,4 @@
+import ProjectInfo from './project-info.vue';
+
+export { ProjectInfo };
+export default ProjectInfo;

app/src/views/private/components/project-info/project-info.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="project-chooser">
+	<div class="project-info">
 		<latency-indicator />
 		<span class="name">{{ name }}</span>
 	</div>
@@ -8,12 +8,15 @@
 <script lang="ts">
 import { defineComponent, computed } from '@vue/composition-api';
 import LatencyIndicator from '../latency-indicator';
-import { useSettingsStore } from '@/stores/';
+import { useSettingsStore, useLatencyStore } from '@/stores/';
+import { sortBy } from 'lodash';
 
 export default defineComponent({
 	components: { LatencyIndicator },
 	setup() {
+		const latencyStore = useLatencyStore();
 		const settingsStore = useSettingsStore();
+
 		const name = computed(() => settingsStore.state.settings?.project_name);
 
 		return { name };
@@ -22,7 +25,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.project-chooser {
+.project-info {
 	position: relative;
 	display: flex;
 	align-items: center;
@@ -33,12 +36,9 @@ export default defineComponent({
 	text-align: left;
 	background-color: var(--background-normal-alt);
 
-	.latency-indicator {
-		margin-right: 12px;
-	}
-
 	.name {
 		flex-grow: 1;
+		margin-left: 12px;
 	}
 }
 </style>

app/src/views/private/private-view.vue

@@ -3,7 +3,7 @@
 		<aside role="navigation" aria-label="Module Navigation" class="navigation" :class="{ 'is-open': navOpen }">
 			<module-bar />
 			<div class="module-nav alt-colors">
-				<project-chooser />
+				<project-info />
 
 				<div class="module-nav-content">
 					<slot name="navigation" />
@@ -58,7 +58,7 @@ import { defineComponent, ref, provide, toRefs, computed } from '@vue/compositio
 import ModuleBar from './components/module-bar/';
 import DrawerDetailGroup from './components/drawer-detail-group/';
 import HeaderBar from './components/header-bar';
-import ProjectChooser from './components/project-chooser';
+import ProjectInfo from './components/project-info';
 import DrawerButton from './components/drawer-button/';
 import NotificationsGroup from './components/notifications-group/';
 import NotificationsPreview from './components/notifications-preview/';
@@ -74,7 +74,7 @@ export default defineComponent({
 		ModuleBar,
 		DrawerDetailGroup,
 		HeaderBar,
-		ProjectChooser,
+		ProjectInfo,
 		DrawerButton,
 		NotificationsGroup,
 		NotificationsPreview,