19675: Sort instance types panel by price then by ProviderType

[arvados.git] / services / workbench2 / src / views / instance-types-panel / instance-types-panel.tsx

diff --git a/services/workbench2/src/views/instance-types-panel/instance-types-panel.tsx b/services/workbench2/src/views/instance-types-panel/instance-types-panel.tsx
index 006a119797cbaa47218a7822244aca8093ba3423..0aa287e24ed3adf016c5f75ca749aad015a7e352 100644 (file)
--- a/services/workbench2/src/views/instance-types-panel/instance-types-panel.tsx
+++ b/services/workbench2/src/views/instance-types-panel/instance-types-panel.tsx
@@ -5,7 +5,7 @@
 import React from 'react';
 import { StyleRulesCallback, WithStyles, withStyles, Card, CardContent, Typography, Grid } from '@material-ui/core';
 import { ArvadosTheme } from 'common/custom-theme';
-import { InstanceTypeIcon } from 'components/icon/icon';
+import { ResourceIcon } from 'components/icon/icon';
 import { RootState } from 'store/store';
 import { connect } from 'react-redux';
 import { ClusterConfigJSON } from 'common/config';
@@ -41,7 +41,16 @@ export const InstanceTypesPanel = withStyles(styles)(connect(mapStateToProps)(
             <CardContent>
                 <Grid container direction="row">
                     {Object.keys(instances).length > 0 ?
-                        Object.keys(instances).map((instanceKey) => {
+                        Object.keys(instances).sort((a, b) => {
+                            const typeA = instances[a];
+                            const typeB = instances[b];
+
+                            if (typeA.Price !== typeB.Price) {
+                                return typeA.Price - typeB.Price;
+                            } else {
+                                return typeA.ProviderType.localeCompare(typeB.ProviderType);
+                            }
+                        }).map((instanceKey) => {
                             const instanceType = instances[instanceKey];
                             const diskRequest = instanceType.IncludedScratch;
                             const ramRequest = instanceType.RAM - config.Containers.ReserveExtraRAM;
@@ -88,7 +97,7 @@ export const InstanceTypesPanel = withStyles(styles)(connect(mapStateToProps)(
                             </Grid>
                         }) :
                         <NotFoundView
-                            icon={InstanceTypeIcon}
+                            icon={ResourceIcon}
                             messages={["No instances found"]}
                         />
                     }