system check & setting_secret

ui/misc/typography.styl

@@ -105,6 +105,21 @@ blockquote
     &:before
       content: 'WARNING:'
       color: red
+  
+  &.red
+    border-color: red
+    background: #F8F8F8
+    color: lighten($text-1-color, 10%)
+
+  &.yellow
+    border-color: yellow
+    background: #F8F8F8
+    color: lighten($text-1-color, 10%)
+
+  &.blue
+    border-color: blue
+    background: #F8F8F8
+    color: lighten($text-1-color, 10%)
 
 acronym, abbr
   border-bottom: 1px dotted

ui/pages/manage_dashboard.page.js

@@ -0,0 +1,34 @@
+import { NamedPage } from 'vj/misc/PageLoader';
+
+const page = new NamedPage('manage_dashboard', async () => {
+  const { default: SockJs } = await import('sockjs-client');
+
+  const sock = new SockJs(Context.socketUrl);
+  sock.onopen = () => {
+    $('<blockquote class="blue"><p>Connection opened.</p></blockquote>').appendTo('#messages');
+  };
+
+  sock.onmessage = (message) => {
+    const msg = JSON.parse(message.data);
+    if (msg.type === 'log') {
+      const div = $('<blockquote class="blue">').appendTo('#messages');
+      $(`<p>${msg.payload}</p>`).appendTo(div);
+    } else if (msg.type === 'warn') {
+      const div = $('<blockquote class="yellow">').appendTo('#messages');
+      $(`<p>${msg.payload}</p>`).appendTo(div);
+    } else if (msg.type === 'error') {
+      const div = $('<blockquote class="red">').appendTo('#messages');
+      $(`<p>${msg.payload}</p>`).appendTo(div);
+    }
+  };
+
+  sock.onclose = (message) => {
+    $(`
+    <blockquote class="yellow">
+      <p>Connection closed,reason=${JSON.stringify(message.reason)}</p>
+    </blockquote>
+    `).appendTo('#messages');
+  };
+});
+
+export default page;