Merge pull request #236 from 3pillarlabs/develop

Merge PR #235
3pillarlabs · Mar 30, 2021 · fe275b3 · fe275b3
2 parents 9f23985 + cc80a86
commit fe275b3
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 10 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -1,7 +1,7 @@
 version: '3.2'
 services:
   web:
-    image: "hailstorm3/hailstorm-web-client:1.7.9"
+    image: "hailstorm3/hailstorm-web-client:1.7.10"
     ports:
       - "8080:80"
     networks:

diff --git a/hailstorm-web-client/package-lock.json b/hailstorm-web-client/package-lock.json
diff --git a/hailstorm-web-client/package.json b/hailstorm-web-client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hailstorm-web-client",
-  "version": "1.7.9",
+  "version": "1.7.10",
   "private": true,
   "dependencies": {
     "date-fns": "^2.6.0",

diff --git a/hailstorm-web-client/src/ClusterConfiguration/AWSInstanceChoice.test.tsx b/hailstorm-web-client/src/ClusterConfiguration/AWSInstanceChoice.test.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { render, mount } from 'enzyme';
-import { AWSInstanceChoice } from './AWSInstanceChoice';
+import { AWSInstanceChoice, InstanceTypeMeter } from './AWSInstanceChoice';
 import { AWSInstanceChoiceOption } from './domain';
 import { render as renderComponent, fireEvent } from '@testing-library/react';
 import { Form, Formik } from 'formik';
-import { AppNotificationProviderWithProps } from '../AppNotificationProvider/AppNotificationProvider';
+import { AppNotificationProviderWithProps } from '../AppNotificationProvider';
 
 jest.mock('./NonLinearSlider', () => ({
   __esModule: true,
@@ -244,4 +244,17 @@ describe('<AWSInstanceChoice />', () => {
     fireEvent.change(maxThreadsByInst, {target: {value: ''}});
     expect(maxThreadsByInst.getAttribute('value')).toEqual(presetValue);
   });
+
+  it('show an indicator before price update', async () => {
+    const component = mount(
+      <InstanceTypeMeter
+        instanceType="m1.small"
+        numInstances={2}
+      />
+    );
+
+    expect(component).toContainExactlyOneMatchingElement('LoadingMessage');
+    component.setProps({hourlyCostByCluster: 0.12});
+    expect(component).not.toContain('LoadingMessage');
+  });
 });
diff --git a/hailstorm-web-client/src/ClusterConfiguration/AWSInstanceChoice.tsx b/hailstorm-web-client/src/ClusterConfiguration/AWSInstanceChoice.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { NonLinearSlider } from './NonLinearSlider';
 import { computeChoice, maxThreadsByCluster } from './AWSInstanceCalculator';
 import { AWSInstanceChoiceOption } from './domain';
-import { Loader } from '../Loader/Loader';
+import { Loader, LoadingMessage } from '../Loader';
 import { Field } from 'formik';
 import { useNotifications } from '../app-notifications';
 
@@ -46,6 +46,7 @@ export function AWSInstanceChoice({
     console.debug('AWSInstanceChoice#useEffect(regionCode)');
     if (!quickMode) return;
 
+    setHourlyCostByCluster && setHourlyCostByCluster(undefined);
     fetchPricing(regionCode)
       .then((data) => {
         setPricingData(data);
@@ -253,7 +254,7 @@ function InstanceTypeInput({
   )
 }
 
-function InstanceTypeMeter({
+export function InstanceTypeMeter({
   instanceType,
   numInstances,
   hourlyCostByCluster
@@ -270,9 +271,15 @@ function InstanceTypeMeter({
       <CenteredLevelItem title="# Instances">
         {numInstances}
       </CenteredLevelItem>
-      {hourlyCostByCluster && (<CenteredLevelItem title="Hourly Cluster Cost" starred={true}>
-        ${hourlyCostByCluster.toFixed(4)}
-      </CenteredLevelItem>)}
+      {hourlyCostByCluster ? (
+        <CenteredLevelItem title="Hourly Cluster Cost" starred={true}>
+          ${hourlyCostByCluster.toFixed(4)}
+        </CenteredLevelItem>
+      ):(
+        <CenteredLevelItem title="Hourly Cluster Cost" starred={true}>
+          <LoadingMessage />
+        </CenteredLevelItem>
+      )}
     </div>
   );
 }