weave-scope/client/app/scripts/components/node-details/node-details-controls.js

import React from 'react';
import { sortBy } from 'lodash';

import NodeDetailsControlButton from './node-details-control-button';

export default function NodeDetailsControls({
  controls, error, nodeId, pending
}) {
  let spinnerClassName = 'fa fa-circle-o-notch fa-spin';
  if (pending) {
    spinnerClassName += ' node-details-controls-spinner';
  } else {
    spinnerClassName += ' node-details-controls-spinner hide';
  }

  return (
    <div className="node-details-controls">
      {error &&
        <div className="node-details-controls-error" title={error}>
          <span className="node-details-controls-error-icon fa fa-warning" />
          <span className="node-details-controls-error-messages">{error}</span>
        </div>
      }
      <span className="node-details-controls-buttons">
        {sortBy(controls, 'rank').map(control => (<NodeDetailsControlButton
          nodeId={nodeId}
          control={control}
          pending={pending}
          key={control.id} />))}
      </span>
      {controls && <span title="Applying..." className={spinnerClassName} />}
    </div>
  );
}