diff --git a/client/app/scripts/components/plugins.js b/client/app/scripts/components/plugins.js index 572886739..f7b191682 100644 --- a/client/app/scripts/components/plugins.js +++ b/client/app/scripts/components/plugins.js @@ -1,10 +1,19 @@ 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 = `Status: ${status} | Plugin description: ${description}`; + + // Inner span to hold styling so we don't effect the "before:content" return ( - - {plugin.label || plugin.id} + + + {error && } + {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..163465dc2 100644 --- a/client/app/styles/main.less +++ b/client/app/styles/main.less @@ -1007,6 +1007,18 @@ h2 { content: ', '; } + &-plugin-icon { + top: 1px; + position: relative; + font-size: 120%; + margin-right: 2px; + } + + .error { + animation: blinking 2.0s 60 @base-ease; // blink for 2 minute; + color: @text-secondary-color; + } + &-empty { opacity: @text-secondary-color; }