From 7e5302afbb16872a971abbf025754106d550484b Mon Sep 17 00:00:00 2001
From: Simon Howe <footless@gmail.com>
Date: Wed, 13 Apr 2016 10:26:48 +0200
Subject: [PATCH 1/2] Nice and red and blinky ui label for broken plugins

---
 client/app/scripts/components/plugins.js | 16 +++++++++++++---
 client/app/scripts/stores/app-store.js   |  2 +-
 client/app/styles/main.less              |  5 +++++
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/client/app/scripts/components/plugins.js b/client/app/scripts/components/plugins.js
index 572886739..5b58324ef 100644
--- a/client/app/scripts/components/plugins.js
+++ b/client/app/scripts/components/plugins.js
@@ -1,10 +1,20 @@
 import React from 'react';
+import classNames from 'classnames';
 
 export default class Plugins extends React.Component {
-  renderPlugin(plugin) {
+  renderPlugin({id, label, description, status}) {
+    const error = status !== 'ok';
+    const className = classNames({ error });
+    const title = error ?
+      `Status: ${status}. (Plugin description: ${description})` :
+      description;
+
+    // Inner span to hold styling so we don't effect the "before:content"
     return (
-      <span className="plugins-plugin" key={plugin.id} title={plugin.description}>
-        {plugin.label || plugin.id}
+      <span className="plugins-plugin" key={id}>
+        <span className={className} title={title}>
+          {label || id}
+        </span>
       </span>
     );
   }
diff --git a/client/app/scripts/stores/app-store.js b/client/app/scripts/stores/app-store.js
index 0b00441fa..bbe0f33af 100644
--- a/client/app/scripts/stores/app-store.js
+++ b/client/app/scripts/stores/app-store.js
@@ -46,7 +46,7 @@ let highlightedEdgeIds = makeSet();
 let highlightedNodeIds = makeSet();
 let hostname = '...';
 let version = '...';
-let plugins = null;
+let plugins = [];
 let mouseOverEdgeId = null;
 let mouseOverNodeId = null;
 let nodeDetails = makeOrderedMap(); // nodeId -> details
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index 45afb9a05..f1b7c753e 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -1007,6 +1007,11 @@ h2 {
     content: ', ';
   }
 
+  .error {
+    animation: blinking 2.0s 30 @base-ease; // blink for 1 minute;
+    color: darkred;
+  }
+
   &-empty {
     opacity: @text-secondary-color;
   }

From 948459f773d46c2d9e91f0cd6cf805724ee44410 Mon Sep 17 00:00:00 2001
From: Simon Howe <footless@gmail.com>
Date: Wed, 13 Apr 2016 16:29:25 +0200
Subject: [PATCH 2/2] Use an icon rather than color to draw attention to broken
 plugin

---
 client/app/scripts/components/plugins.js |  5 ++---
 client/app/styles/main.less              | 11 +++++++++--
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/client/app/scripts/components/plugins.js b/client/app/scripts/components/plugins.js
index 5b58324ef..f7b191682 100644
--- a/client/app/scripts/components/plugins.js
+++ b/client/app/scripts/components/plugins.js
@@ -5,14 +5,13 @@ export default class Plugins extends React.Component {
   renderPlugin({id, label, description, status}) {
     const error = status !== 'ok';
     const className = classNames({ error });
-    const title = error ?
-      `Status: ${status}. (Plugin description: ${description})` :
-      description;
+    const title = `Status: ${status} | Plugin description: ${description}`;
 
     // Inner span to hold styling so we don't effect the "before:content"
     return (
       <span className="plugins-plugin" key={id}>
         <span className={className} title={title}>
+          {error && <span className="plugins-plugin-icon fa fa-exclamation-circle" />}
           {label || id}
         </span>
       </span>
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index f1b7c753e..163465dc2 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -1007,9 +1007,16 @@ h2 {
     content: ', ';
   }
 
+  &-plugin-icon {
+    top: 1px;
+    position: relative;
+    font-size: 120%;
+    margin-right: 2px;
+  }
+
   .error {
-    animation: blinking 2.0s 30 @base-ease; // blink for 1 minute;
-    color: darkred;
+    animation: blinking 2.0s 60 @base-ease; // blink for 2 minute;
+    color: @text-secondary-color;
   }
 
   &-empty {