From dd66be1d75c422dc74d5cea745f5b782e10d16b0 Mon Sep 17 00:00:00 2001
From: Gregory Eremin <g@erem.in>
Date: Sat, 4 Nov 2017 21:49:53 +0100
Subject: [PATCH] Introduce alerts

---
 frontend/src/blocks/alert.css  |  9 +++++++++
 frontend/src/blocks/alert.js   | 14 ++++++++++++++
 frontend/src/pages/command.css |  9 ---------
 frontend/src/pages/command.js  | 12 ++----------
 4 files changed, 25 insertions(+), 19 deletions(-)
 create mode 100644 frontend/src/blocks/alert.css
 create mode 100644 frontend/src/blocks/alert.js

diff --git a/frontend/src/blocks/alert.css b/frontend/src/blocks/alert.css
new file mode 100644
index 0000000..524e196
--- /dev/null
+++ b/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; }
diff --git a/frontend/src/blocks/alert.js b/frontend/src/blocks/alert.js
new file mode 100644
index 0000000..6a81160
--- /dev/null
+++ b/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>
+        )
+    }
+}
diff --git a/frontend/src/pages/command.css b/frontend/src/pages/command.css
index 97636cf..1aa64ab 100644
--- a/frontend/src/pages/command.css
+++ b/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;
-}
diff --git a/frontend/src/pages/command.js b/frontend/src/pages/command.js
index aba5e50..9431216 100644
--- a/frontend/src/pages/command.js
+++ b/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),