fix(ui): correct upstream error handling

ui/src/Components/Grid/BlankPage/__snapshots__/index.test.js.snap

@@ -1,33 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<BlankPage /> matches snapshot 1`] = `
-<div
-  className="jumbotron text-center bg-primary my-4"
->
-  <h1
-    className="display-1 my-5"
-  >
-    <svg
-      aria-hidden="true"
-      className="svg-inline--fa fa-trophy fa-w-18 text-success"
-      data-icon="trophy"
-      data-prefix="fas"
-      role="img"
-      style={Object {}}
-      viewBox="0 0 576 512"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M552 64H448V24c0-13.3-10.7-24-24-24H152c-13.3 0-24 10.7-24 24v40H24C10.7 64 0 74.7 0 88v56c0 35.7 22.5 72.4 61.9 100.7 31.5 22.7 69.8 37.1 110 41.7C203.3 338.5 240 360 240 360v72h-48c-35.3 0-64 20.7-64 56v12c0 6.6 5.4 12 12 12h296c6.6 0 12-5.4 12-12v-12c0-35.3-28.7-56-64-56h-48v-72s36.7-21.5 68.1-73.6c40.3-4.6 78.6-19 110-41.7 39.3-28.3 61.9-65 61.9-100.7V88c0-13.3-10.7-24-24-24zM99.3 192.8C74.9 175.2 64 155.6 64 144v-16h64.2c1 32.6 5.8 61.2 12.8 86.2-15.1-5.2-29.2-12.4-41.7-21.4zM512 144c0 16.1-17.7 36.1-35.3 48.8-12.5 9-26.7 16.2-41.8 21.4 7-25 11.8-53.6 12.8-86.2H512v16z"
-        fill="currentColor"
-        style={Object {}}
-      />
-    </svg>
-  </h1>
-  <p
-    className="lead text-muted"
-  >
-    Nothing to show
-  </p>
-</div>
-`;

ui/src/Components/Grid/BlankPage/index.js

@@ -1,19 +0,0 @@
-import React, { Component } from "react";
-
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faTrophy } from "@fortawesome/free-solid-svg-icons/faTrophy";
-
-class BlankPage extends Component {
-  render() {
-    return (
-      <div className="jumbotron text-center bg-primary my-4">
-        <h1 className="display-1 my-5">
-          <FontAwesomeIcon className="text-success" icon={faTrophy} />
-        </h1>
-        <p className="lead text-muted">Nothing to show</p>
-      </div>
-    );
-  }
-}
-
-export { BlankPage };

ui/src/Components/Grid/BlankPage/index.test.js

@@ -1,11 +0,0 @@
-import React from "react";
-import renderer from "react-test-renderer";
-
-import { BlankPage } from ".";
-
-describe("<BlankPage />", () => {
-  it("matches snapshot", () => {
-    const tree = renderer.create(<BlankPage />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});

ui/src/Components/Grid/UpstreamError/__snapshots__/index.test.js.snap

@@ -2,14 +2,20 @@
 
 exports[`<UpstreamError /> matches snapshot 1`] = `
 <div
-  className="alert alert-danger text-center rounded-0"
+  className="alert alert-danger text-center"
   role="alert"
 >
-  <span
-    className="badge badge-warning mr-2"
+  <h4
+    className="alert-heading mb-0"
   >
-    foo
-  </span>
-  bar
+    Alertmanager 
+    <span
+      className="font-weight-bold"
+    >
+      foo
+    </span>
+     raised an error: 
+    bar
+  </h4>
 </div>
 `;

ui/src/Components/Grid/UpstreamError/index.js

@@ -10,13 +10,11 @@ class UpstreamError extends Component {
   render() {
     const { name, message } = this.props;
     return (
-      <div
-        key={name}
-        className="alert alert-danger text-center rounded-0"
-        role="alert"
-      >
-        <span className="badge badge-warning mr-2">{name}</span>
-        {message}
+      <div className="alert alert-danger text-center" role="alert">
+        <h4 className="alert-heading mb-0">
+          Alertmanager <span className="font-weight-bold">{name}</span> raised
+          an error: {message}
+        </h4>
       </div>
     );
   }

ui/src/Components/Grid/index.js

@@ -5,7 +5,6 @@ import { observer } from "mobx-react";
 
 import { AlertStore } from "Stores/AlertStore";
 import { AlertGrid } from "./AlertGrid";
-import { BlankPage } from "./BlankPage";
 import { FatalError } from "./FatalError";
 import { UpstreamError } from "./UpstreamError";
 
@@ -22,10 +21,6 @@ const Grid = observer(
         return <FatalError message={alertStore.status.error} />;
       }
 
-      if (Object.keys(alertStore.data.groups).length === 0) {
-        return <BlankPage />;
-      }
-
       return (
         <React.Fragment>
           {alertStore.data.upstreams.instances