Add spartan status page for simple debugging

src/app.js

@@ -13,6 +13,7 @@ const profile = require('./routes/profile')
 const raw = require('./routes/raw')
 const thread = require('./routes/thread')
 const like = require('./routes/like')
+const status = require('./routes/status')
 
 module.exports = (options) => {
   const assets = new Koa()
@@ -29,10 +30,11 @@ module.exports = (options) => {
   router
     .get('/', home)
     .get('/author/:id', author)
+    .get('/status/', status)
     .get('/hashtag/:id', hashtag)
     .get('/profile/', profile)
-    .get('/thread/:id', thread)
     .get('/raw/:id', raw)
+    .get('/thread/:id', thread)
     .post('/like/:id', koaBody(), like)
 
   app.use(router.routes())

src/assets/style.css

@@ -166,3 +166,8 @@ ul, ol {
 a {
   color: hsl(240, 66%, 50%);
 }
+
+progress {
+  display: block;
+  width: 100%;
+}

src/routes/models/meta.js

@@ -12,5 +12,9 @@ module.exports = {
       meta: true,
       private: true
     })
+  },
+  status: async () => {
+    const ssb = await cooler.connect()
+    return cooler.get(ssb.status)
   }
 }

src/routes/status.js

@@ -0,0 +1,8 @@
+const meta = require('./models/meta')
+const statusView = require('./views/status')
+
+module.exports = async function hashtag (ctx) {
+  const status = await meta.status()
+
+  ctx.body = statusView({ status })
+}

src/routes/views/components/template.js

@@ -22,6 +22,7 @@ module.exports = (...elements) => {
       nav(
         a({ href: '/' }, 'home'),
         a({ href: '/profile' }, 'profile'),
+        a({ href: '/status' }, 'status'),
         a({ href: 'https://github.com/fraction/oasis' }, 'source'),
         a({ href: 'https://github.com/fraction/oasis/issues/new' }, 'help')
       ),

src/routes/views/status.js

@@ -0,0 +1,29 @@
+const template = require('./components/template')
+const { h1, h2, label, progress, ul, li, section } = require('hyperaxe')
+
+module.exports = ({ status }) => {
+  const max = status.sync.since
+
+  const progressElements = Object.entries(status.sync.plugins).map(e => {
+    const [ key, val ] = e
+    const id = `progress-${key}`
+    return [
+      label({ for: id }, key),
+      progress({ id, value: val, max }, val)
+    ]
+  })
+
+  const gossipElements = Object.keys(status.gossip).map(key => {
+    return li(key)
+  })
+
+  return template(
+    section({ class: 'message' },
+      h1('Status'),
+      h2('Indexes'),
+      progressElements,
+      h2('Peers'),
+      ul(gossipElements)
+    )
+  )
+}