Introduce alerts

frontend/src/blocks/alert.css

@@ -0,0 +1,9 @@
+.alert {
+    overflow: auto;
+    margin: 0 0 20px 0;
+    color: #fff;
+    border-radius: 4px;
+    padding: 10px;
+}
+
+.alert.error { background-color: #f55; }

frontend/src/blocks/alert.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+
+import './alert.css';
+
+export default class Alert extends Component {
+    render() {
+        if (!this.props.message) {
+            return null
+        }
+        return (
+            <div className={"alert "+ this.props.type}>{this.props.message}</div>
+        )
+    }
+}

frontend/src/pages/command.css

@@ -75,12 +75,3 @@ a.history {
     text-align: center;
     border-radius: 4px;
 }
-
-.error {
-    overflow: auto;
-    margin: 0 0 20px 0;
-    background-color: #f55;
-    color: #fff;
-    border-radius: 4px;
-    padding: 10px;
-}

frontend/src/pages/command.js

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom'
 
 import Nav from '../blocks/nav.js'
 import Output from '../blocks/output.js'
+import Alert from '../blocks/alert.js'
 import { api, httpPOST } from '../http.js'
 import './command.css'
 
@@ -43,7 +44,7 @@ export default class Command extends Component {
                     query={this.props.query} onQueryChange={this.props.onQueryChange} />
                 <main>
                     {this.renderForm()}
-                    {this.renderError()}
+                    <Alert type="error" message={this.state.error} />
                     <Output jobID={this.state.jobID} />
                 </main>
             </div>
@@ -110,15 +111,6 @@ export default class Command extends Component {
         }
     }
 
-    renderError() {
-        if (this.state.error === null) {
-            return null
-        }
-        return (
-            <div className="error">{this.state.error}</div>
-        )
-    }
-
     submitHandler(event) {
         event.preventDefault()
         httpPOST(api("/exec"), formQuery(this.state.form),