add guppe server status to web views and explain active groups

index.js

@@ -49,7 +49,8 @@ const apex = ActivitypubExpress({
   actorParam: 'actor',
   objectParam: 'id',
   itemsPerPage: 100,
-  offlineMode: true, // delivery done in workers only
+  // delivery done in workers only in production
+  offlineMode: process.env.NODE_ENV === 'production',
   routes
 })
 
@@ -174,6 +175,16 @@ app.get('/groups', (req, res, next) => {
       return res.status(500).send()
     })
 })
+app.get('/stats', async (req, res, next) => {
+  try {
+    const queueSize = await apex.store.db.collection('deliveryQueue')
+      .countDocuments({ attempt: 0 })
+    const uptime = process.uptime()
+    res.json({ queueSize, uptime })
+  } catch (err) {
+    next(err)
+  }
+})
 
 app.use(function (err, req, res, next) {
   console.error(err.message, req.body, err.stack)

web/src/App.vue

@@ -1,8 +1,12 @@
 <template>
   <div id="app">
     <div class="w3-bar w3-black w3-card">
-      <div class="w3-container w3-section">
+      <div class="w3-section flex">
         <router-link to="/"><i class="fas fa-home" title="home"></i></router-link>
+        <div v-if="stats" class="flex">
+          <div>Uptime: {{ uptime }}</div>
+          <div>Backlog: {{ queueSize }}</div>
+        </div>
       </div>
     </div>
     <div class="w3-row">
@@ -18,6 +22,38 @@
   </div>
 </template>
 
+<script>
+export default {
+  data () {
+    return {
+      stats: undefined
+    }
+  },
+  mounted () {
+    window.fetch('/stats', { headers: { Accept: 'application/json' } })
+      .then(res => res.json())
+      .then(data => (this.stats = data))
+      .catch(err => console.warn('Error fetching stats', err))
+  },
+  computed: {
+    uptime () {
+      if (!this.stats) {
+        return
+      }
+      const fmtd = (this.stats.uptime / 3600)
+        .toLocaleString(undefined, { maximumFractionDigits: 1, minimumFractionDigits: 1 })
+      return `${fmtd} hours`
+    },
+    queueSize () {
+      if (!this.stats) {
+        return
+      }
+      return `${this.stats.queueSize.toLocaleString()} posts`
+    }
+  }
+}
+</script>
+
 <style>
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
@@ -25,4 +61,12 @@
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
 }
+.flex {
+  display: flex;
+  justify-content: space-between;
+}
+.flex > * {
+  padding-left: 16px;
+  padding-right: 16px;
+}
 </style>

web/src/views/Home.vue

@@ -22,6 +22,7 @@
       <li>Visit a @{{ domain }} group profile to see the group history</li>
     </ol>
     <h2 class="w3-center">Active Groups</h2>
+    <p class="w3-center">Top 50 groups with the most recent posts</p>
     <div class="profile-grid w3-margin-bottom w3-mobile">
       <div v-for="group of groups" class="w3-card w3-container w3-section" :key="group._id">
         <profile-summary :actor="group" class="profile"/>