Uptime (sandwichfarm#190)

* heartbeat functionality

* small improvements to uptime

* add refreshtask back in

* added uptime to lists

* latency gauge and dynamic refresh

* add average latency, needs work and preferences to turn off.

* bump nostr-relay-inspector version

* sort and display average in table

* change table header for latency > avg latency

* fix single page loading issue

* cleanup

* fix undiscovered on single

* remove debugging

* adjust heartbeat provider

* fix conditional on time and fix uptime header text

* add color and height normalization to uptime

* fix contrast in both modes

* start adding in stats again, debug display issues from changes

* begin clean up of single pages, make prettier

* final cleanup before notes and log inclusion

* fix theme bugs and policy indicator alignment on themes

* fix column visibility on mobile

* finish cleaning up statistics in dark

* reoslve first launch issues + merge left on update so uptime data isn't lost

* clean up stats for light and fix fav

* almost there

* fix profile dropdown

* turn off debugging

* fix race condition

* fix uptime colors

* single page on mobile

Co-authored-by: dskvr <[email protected]>

package.json

@@ -32,7 +32,7 @@
     "node-emoji": "1.11.0",
     "node-fetch": "3.3.0",
     "nostr": "0.2.5",
-    "nostr-relay-inspector": "0.0.25",
+    "nostr-relay-inspector": "0.0.26",
     "nostr-tools": "1.1.1",
     "object-hash": "3.0.0",
     "object-sizeof": "1.6.3",
@@ -44,7 +44,9 @@
     "postcss-import": "15.1.0",
     "requests": "0.3.0",
     "stream-browserify": "3.0.0",
+    "unescape-json": "1.0.3",
     "vue": "^3.2.45",
+    "vue-gauge": "1.0.3",
     "vue-grid-responsive": "1.3.0",
     "vue-meta": "3.0.0-alpha.8",
     "vue-router": "4.1.6",
@@ -58,6 +60,7 @@
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
     "@babel/plugin-syntax-top-level-await": "7.14.5",
+    "@fullhuman/postcss-purgecss": "5.0.0",
     "@tailwindcss/forms": "0.5.3",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",

src/components/layout/HeaderComponent.vue

@@ -20,7 +20,7 @@
             <div class="flex space-x-4">
 
             <router-link 
-              to="/relays/find"
+              to="/relays"
               :active-class="`bg-white/25`"
               class="text-white hover:bg-white/25 px-3 py-2 rounded-md text-sm font-medium"
               >
@@ -63,7 +63,7 @@
               <transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
               <MenuItems 
                 style="z-index:9000 !important;" 
-                class="absolute right-0 z-9000 mt-2 w-64 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                class="absolute right-0 z-9000 mt-2 w-64 origin-top-right rounded-md bg-white dark:bg-slate-800 dark:border dark:border-slate-600 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                   <span v-if="store.user.getName" class="block text-ellipsis text-sm w-full font-extrabold mt-2">
                     {{ store.user.getName  }}
                   </span>  
@@ -89,8 +89,8 @@
               <div class="flex space-x-4"> -->
 
               <router-link 
-                to="/relays/find"
-                :active-class="`bg-white/25`"
+                to="/relays"
+
                 class="block text-white hover:bg-white/25 px-3 py-2 rounded-md text-sm font-medium"
                 >
                 Relays

src/components/relays/nav/RelaysFindNav.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-  <Disclosure as="nav" id="subsection_nav" class="bg-white mb-5" v-slot="{ open }">
+  <Disclosure as="nav" id="subsection_nav" class="bg-white dark:bg-transparent mb-5 dark:text-white" v-slot="{ open }">
   <div class="mx-auto max-w-7xl px-0">
     <div class="flex h-12 justify-center md:justify-between">
       <div class="flex px-2 lg:px-0">

src/components/relays/nav/RelaysNav.vue

@@ -1,12 +1,26 @@
+<style scoped>
+.router-link-active {
+  @apply bg-black/30 rounded-t-md mt-2 font-bold
+}
+</style>
+
 <template>
   <div class="bg-slate-700 px-2 sm:px-4 lg:px-8 ">
     <div class="lg:flex lg:h-8 mx-auto max-w-7xl h-8">
-      <div class="flex lg:w-32 lg:px-8 lg:ml-8 sm:hidden sm:w-0 md:w-0"></div>
+      <div class="flex md:w-0 lg:w-32 lg:px-8 lg:ml-8 sm:hidden sm:w-0 ">&nbsp;</div>
       <div class="lg:flex lg:px-0">
-        <div class="lg:ml-6 lg:flex lg:space-x-8">
-          <!-- <router-link to="/relays/find" :class="isActive ? 'bg-color-white-100 text-white' : inactiveClass" class="inline-flex items-center mx-1 text-sm font-medium text-white">Relays</router-link> -->
+        <div class="lg:ml-48 lg:flex lg:space-x-2">
+          <router-link 
+            :to="{name: 'relaysFind'}" 
+            class="inline-flex items-center mx-1 text-sm font-medium text-white my-1 rounded-md px-3">
+            Browse
+          </router-link>
           <!-- <router-link to="/relays/map" class="inline-flex items-center mx-1 text-sm font-medium text-white">Map</router-link> -->
-          <!-- <router-link to="/relays/statistics" class="inline-flex items-center mx-1 text-sm font-medium text-white">Go to Foo</router-link> -->
+          <router-link 
+            :to="{name: 'relaysStats'}" 
+            class="inline-flex items-center mx-1 text-sm font-medium text-white my-1 rounded-md px-3">
+            Statistics
+          </router-link>
           <!-- <a v-for="item in store.layout.getNavGroup(this.navSlug)"
               :key="`subnav-${item.slug}`"
               :href="item.href"
@@ -79,4 +93,5 @@ export default defineComponent({
   methods: Object.assign(RelaysLib, setupNavData, mountNav, setActiveContent, loadNavContent, routeValid, parseHash, contentIsActive),
   computed: SharedComputed,
 });
-</script>
+</script>
+

src/components/relays/pages/RelaysFind.vue

@@ -15,13 +15,13 @@
       style="z-index:9999">
       <div class="sm:flex sm:items-center">
         <div class="sm:flex-auto text-left">
-            <h1 class="text-4xl capitalize font-semibold text-gray-900">
+            <h1 class="text-4xl capitalize font-semibold text-gray-900 dark:text-white/90">
                 <span class="inline-flex rounded bg-green-800 text-sm px-2 py-1 text-white relative -top-2">
                     {{ getRelaysCount(activeSubsection) }}
                 </span>
                 {{ activeSubsection }} Relays
             </h1>
-            <p class="mt-2 text-xl text-gray-700">
+            <p class="mt-2 text-xl text-gray-700 dark:text-white/60">
                 <!-- {{ store.layout.getActiveItem('relays/find') }} -->
                 {{ store.layout.getActiveItem('relays/find')?.description }}
             </p>
@@ -145,7 +145,7 @@ export default defineComponent({
     this.store.relays.setRelays(relays)
     this.store.relays.setGeo(geo)
     
-    this.relays = this.store.relays.getAll
+    this.relays = this.store.relays.getAll?.length ? this.store.relays.getAll : relays
     this.lastUpdate = this.store.tasks.getLastUpdate('relays')
     this.preferences = this.store.prefs.get
   },

src/components/relays/pages/RelaysHome.vue

@@ -12,7 +12,7 @@
 
   <RelayStatistics
     :resultsProp="results"
-    v-if="this.path.startsWith('/relays/statistics') /> 
+    v-if="this.path.startsWith('/relays/statistics')" /> 
 
   <div id="footer">
     <span class="credit">