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 ( - - {plugin.label || plugin.id} + + + {label || id} + ); } 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; }