Sort controls by rank in the UI

weaveworks · Apr 21, 2016 · eda2a20 · eda2a20
1 parent 8b06f6c
commit eda2a20
Showing 1 changed file with 2 additions and 1 deletion.
diff --git a/client/app/scripts/components/node-details/node-details-controls.js b/client/app/scripts/components/node-details/node-details-controls.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import _ from 'lodash';
 
 import NodeDetailsControlButton from './node-details-control-button';
 
@@ -17,7 +18,7 @@ export default function NodeDetailsControls({controls, error, nodeId, pending})
         <span className="node-details-controls-error-messages">{error}</span>
       </div>}
       <span className="node-details-controls-buttons">
-        {controls && controls.map(control => <NodeDetailsControlButton
+        {_.sortBy(controls, 'rank').map(control => <NodeDetailsControlButton
           nodeId={nodeId} control={control} pending={pending} key={control.id} />)}
       </span>
       {controls && <span title="Applying..." className={spinnerClassName}></span>}