Moved plugins renderer to the status footer

client/app/scripts/components/app.js

@@ -11,7 +11,6 @@ import HelpPanel from './help-panel';
 import Status from './status.js';
 import Topologies from './topologies.js';
 import TopologyOptions from './topology-options.js';
-import Plugins from './plugins.js';
 import { getApiDetails, getTopologies } from '../utils/web-api-utils';
 import { pinNextMetric, hitEsc, unpinMetric,
   selectMetric, toggleHelp } from '../actions/app-actions';
@@ -180,7 +179,6 @@ export default class App extends React.Component {
           <TopologyOptions options={this.state.currentTopologyOptions}
             topologyId={this.state.currentTopologyId}
             activeOptions={this.state.activeTopologyOptions} />
-          <Plugins plugins={this.state.plugins} />
         </Sidebar>
 
         <Footer {...this.state} />

client/app/scripts/components/footer.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import moment from 'moment';
 
+import Plugins from './plugins.js';
 import { getUpdateBufferSize } from '../utils/update-buffer-utils';
 import { contrastModeUrl, isContrastMode } from '../utils/contrast-utils';
 import { clickDownloadGraph, clickForceRelayout, clickPauseUpdate,
@@ -8,7 +9,7 @@ import { clickDownloadGraph, clickForceRelayout, clickPauseUpdate,
 import { basePathSlash } from '../utils/web-api-utils';
 
 export default function Footer(props) {
-  const { hostname, updatePaused, updatePausedAt, version } = props;
+  const { hostname, plugins, updatePaused, updatePausedAt, version } = props;
   const contrastMode = isContrastMode();
 
   // link url to switch contrast with current UI state
@@ -47,6 +48,10 @@ export default function Footer(props) {
         {hostname}
       </div>
 
+      <div className="footer-plugins">
+        <Plugins plugins={plugins} />
+      </div>
+
       <div className="footer-tools">
         <a className={pauseClassName} onClick={pauseAction} title={pauseTitle}>
           {pauseLabel !== '' && <span className="footer-label">{pauseLabel}</span>}

client/app/scripts/components/plugins.js

@@ -3,19 +3,21 @@ import React from 'react';
 export default class Plugins extends React.Component {
   renderPlugin(plugin) {
     return (
-      <div className="plugin" key={plugin.id} title={plugin.description}>
+      <span className="plugins-plugin" key={plugin.id} title={plugin.description}>
         {plugin.label || plugin.id}
-      </div>
+      </span>
     );
   }
 
   render() {
-    if (!this.props.plugins || this.props.plugins.length === 0) {
-      return <div className="plugins">No plugins loaded</div>;
-    }
+    const hasPlugins = this.props.plugins && this.props.plugins.length > 0;
     return (
       <div className="plugins">
-        Plugins: {this.props.plugins.map(plugin => this.renderPlugin(plugin))}
+        <span className="plugins-label">
+          Plugins:
+        </span>
+        {hasPlugins && this.props.plugins.map((plugin, index) => this.renderPlugin(plugin, index))}
+        {!hasPlugins && <span className="plugins-empty">n/a</span>}
       </div>
     );
   }

client/app/styles/main.less

@@ -995,6 +995,23 @@ h2 {
   }
 }
 
+.plugins {
+  margin-right: 0.5em;
+
+  &-label {
+    text-transform: uppercase;
+    margin-right: 0.25em;
+  }
+
+  &-plugin + &-plugin:before {
+    content: ', ';
+  }
+
+  &-empty {
+    opacity: @text-secondary-color;
+  }
+}
+
 .status {
   text-transform: uppercase;
   padding: 2px 12px;