Minor refactoring, improve UI styling and add UI header bar

ui/components/chart.component.js

@@ -2,7 +2,7 @@ import * as html from '@hyperapp/html'
 import Highcharts from 'highcharts'
 
 
-export function ChartComponent({id, label, data})
+export default function ChartComponent({id, label, data})
 {
   return html.div(
     {

ui/components/header.component.js

@@ -0,0 +1,26 @@
+import * as html from '@hyperapp/html'
+
+
+export default function view(hostname)
+{
+  return html.nav(
+    {
+      className: 'header'
+    },
+    [
+      html.div({className: 'header-logo'},
+        [
+        html.img({src: '/static/assets/logo.png'})
+        ]
+      ),
+      html.div({className: 'header-hostname'}, [hostname]),
+      html.div({className: 'header-datetime'},
+        [
+          html.div({style: {textAlign: 'end'}}, [new Date().toLocaleTimeString()]),
+          html.div({style: {textAlign: 'end'}}, [new Date().toLocaleDateString()])
+        ]
+      ),
+      html.div({className: 'header-datetime'}, [])
+    ]
+  )
+}

ui/components/scalar.component.js

@@ -1,7 +1,7 @@
 import * as html from '@hyperapp/html'
 
 
-export function ScalarComponent({label, data})
+export default function ScalarComponent({label, data})
 {
   return html.div(
     {className: 'card scalar-container'},

ui/main.js

@@ -2,31 +2,42 @@ import { app } from 'hyperapp'
 import * as html from '@hyperapp/html'
 
 import * as models from './models.js';
-import { ChartComponent } from './components/chart.component.js'
-import { ScalarComponent } from './components/scalar.component.js'
+import ChartComponent from './components/chart.component.js'
+import ScalarComponent from './components/scalar.component.js'
+import HeaderComponent from './components/header.component.js'
 
 
 main()
 
 
 async function main()
 {
-  let plugins = await getPlugins()
+  let plugins = await get_plugins()
+  let config = await get_config()
 
   const state = {plugins}
 
   const actions = {}
 
   const view = (state, actions) =>
       html.div(
-      {
-        className: 'app-container',
-        oncreate: async _ => plugins = await getPlugins()
-      },
-      [
-        ...Object.keys(plugins).map(key =>
-          create_plugin_element(plugins[key]))
-      ])
+        {
+          className: 'app',
+        },
+        [
+          HeaderComponent(config.hostname),
+          html.div(
+            {
+              className: 'main-content',
+              oncreate: async _ => plugins = await get_plugins()
+            },
+            [
+              ...Object.keys(plugins).map(key =>
+                create_plugin_element(plugins[key]))
+            ]
+          )
+        ]
+      )
 
   app(state, actions, view, document.querySelector('#root'))
 }
@@ -63,6 +74,12 @@ function create_chart_element(plugin)
 }
 
 
+async function get_config()
+{
+  return await (await fetch('/api/config')).json()
+}
+
+
 async function get_schemas()
 {
   const schemas = await (await fetch('/api/plugin/schemas')).json()
@@ -85,7 +102,7 @@ async function get_stats()
 }
 
 
-async function getPlugins()
+async function get_plugins()
 {
   let stats
   let schemas

zoidboard/app.py

@@ -19,7 +19,11 @@ def create_app(plugins):
 
     @app.route('/')
     def route_index():
-        return render_template('index.html')
+        return render_template('index.html', hostname=config['hostname'])
+
+    @app.route('/api/config')
+    def route_api_config():
+        return json.dumps(config)
 
     @app.route('/api/plugin/registered')
     def rotue_api_registered_plugins():

zoidboard/config.py

@@ -11,10 +11,9 @@
 _DEFAULT_CONFIG = {
     'hostname': None,
     'plugins': [
-        'hostname',
         'ip',
         'uptime',
-	'load',
+        'load',
         'mem_usage',
         'swap_usage',
     ]

zoidboard/static/css/main.css

@@ -1,16 +1,23 @@
 @import url('https://unpkg.com/picnic');
 
 #root {
+  font-size: 1em;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   margin: 0 auto;
+  color: #383838;
 }
 
-.app-container {
+.app {
+  width: 100%;
+}
+
+.main-content {
   width: 100%;
   max-width: 67%;
+  margin: 0 auto;
 }
 
 .chart-container {
@@ -27,6 +34,35 @@
   margin: 1em;
 }
 
+.header {
+  position: relative;
+  display: flex;
+  padding: 0.5em;
+  align-items: center;
+  background: linear-gradient(165deg, rgba(249,249,249,1) 0%,rgb(255, 241, 241) 100%);
+}
+
+.header-logo {
+  height: 100%;
+  margin-right: 0.67em;
+}
+.header-logo > img {
+  height: 100%;
+}
+
+.header-hostname {
+  color: #a4a4a4;
+  font-weight: 600;
+  font-size: 1.5em;
+}
+
+.header-datetime {
+  position: absolute;
+  right: 0.5em;
+  color: #595959;
+  font-size: 80%;
+}
+
 .scalar-value {
   font-family: monospace;
 }
@@ -37,7 +73,7 @@ pre {
 }
 
 @media (max-width: 1024px) {
-  .app-container {
+  .main-content {
     max-width: 786px;
   }
 }

zoidboard/templates/index.html

@@ -3,7 +3,8 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>zoidboard</title>
+  <link rel="shortcut icon" type="image/png" href="{{ url_for('static', filename='./assets/logo.png') }}"/>
+  <title>{{ hostname }} | Zoidboard</title>
 
   <link rel="stylesheet" href="{{ url_for('static', filename='./css/main.css') }}">
 </head>