feat(VariantDb): kids-first#2468 refactoring and error handeling

src/App.js

@@ -129,8 +129,6 @@ const App = compose(
               Component: VariantDb,
               loggedInUser,
               WrapperPage: FixedFooterPage,
-              isAdmin: state.isAdmin,
-              loggedInUserToken: state.loggedInUserToken,
               ...props,
             })
           }

src/common/injectGlobals.ts

@@ -92,6 +92,7 @@ export const reactApiDataVersionApi: string = getApplicationEnvVar('DATA_VERSION
 export const reactApiDataVersionFallback: string =
   getApplicationEnvVar('DATA_VERSION_FALLBACK') || '';
 export const reactApiSearchMembersApi = getApplicationEnvVar('SEARCH_MEMBERS_API') || null;
+export const kfVariantCluster = getApplicationEnvVar('VARIANT_CLUSTER_API') || null;
 
 // Public Stats
 export const publicStatsApiRoot = getApplicationEnvVar('PUBLIC_STATS_ROOT') || '';

src/components/VariantDb/LaunchClusterCard.tsx

@@ -0,0 +1,91 @@
+import azicon from '../../assets/appache-zeppelin.png';
+import { Button, Col, Modal, Row } from 'antd';
+import { DeleteOutlined, LoadingOutlined, RocketOutlined, ToolOutlined } from '@ant-design/icons';
+import * as React from 'react';
+import { clusterStatus, isInterimState, canBeDeleted } from './store';
+
+interface Props {
+  status: string;
+  modalVisible: boolean;
+  hideModalOk: (e: React.MouseEvent<HTMLElement>) => void;
+  hideModal: (e: React.MouseEvent<HTMLElement>) => void;
+  showModal: (e: React.MouseEvent<HTMLElement>) => void;
+  handleClick: (e: React.MouseEvent<HTMLElement>) => void;
+}
+
+const LaunchClusterCard = (props: Props) => {
+  const { status, modalVisible, hideModalOk, hideModal, showModal, handleClick } = props;
+
+  let buttonText;
+  let buttonIcon;
+  switch (status) {
+    case clusterStatus.createComplete:
+      buttonText = 'Launch your SPARK cluster';
+      buttonIcon = <RocketOutlined />;
+      break;
+    case clusterStatus.createInProgress:
+      buttonText = 'Building your SPARK cluster';
+      buttonIcon = <LoadingOutlined />;
+      break;
+    case clusterStatus.deleteInProgress:
+      buttonText = 'Deleting your SPARK cluster';
+      buttonIcon = <LoadingOutlined />;
+      break;
+    case clusterStatus.rollback:
+      buttonText = 'Error, please delete the cluster';
+      buttonIcon = <LoadingOutlined />;
+      break;
+    default:
+      buttonText = 'Build a SPARK cluster';
+      buttonIcon = <ToolOutlined />;
+  }
+  return (
+    <div
+      className={'white-background middle-align'}
+      style={{ height: '100%', paddingTop: 24, paddingBottom: 24 }}
+    >
+      <img alt="AppacheZeppelin" src={azicon} />
+      <div style={{ paddingTop: 24, paddingBottom: 24 }}>
+        Kids First is providing members with their own SPARK cluster running a web-based Zeppelin
+        notrebooks dansbox to explore, query and visualize its germline variant datasets. Using
+        Zeppelin, bioinformaticians can create interactive data analytics and collaborative
+        documents with SQL, Scala, Python, and more..
+      </div>
+      <Row justify={'center'} gutter={24}>
+        <Col>
+          <Button
+            type={status === clusterStatus.createComplete ? 'primary' : 'default'}
+            icon={buttonIcon}
+            onClick={handleClick}
+            disabled={isInterimState(status)}
+          >
+            {buttonText}
+          </Button>
+        </Col>
+        <Col>
+          {canBeDeleted(status) ? (
+            <div>
+              <Button type={'primary'} danger icon={<DeleteOutlined />} onClick={showModal}>
+                Delete Cluster
+              </Button>
+              <Modal
+                title="Delete Cluster"
+                visible={modalVisible}
+                onOk={hideModalOk}
+                onCancel={hideModal}
+                okText="OK"
+                cancelText="Cancel"
+              >
+                <p>You want to delete this cluster?</p>
+              </Modal>
+            </div>
+          ) : (
+            ''
+          )}
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default LaunchClusterCard;

src/components/VariantDb/fetchVariantCluster.tsx

@@ -1,36 +1,20 @@
-export const launchCluster = async (api: Function) => {
-  let response;
-  const url = 'https://kf-api-variant-cluster-qa.kidsfirstdrc.org/stack';
+import { kfVariantCluster } from 'common/injectGlobals';
 
-  try {
-    response = await api({
-      method: 'POST',
-      url: url,
-      headers: {
-        Authorization:
-          'Bearer eyJhbGciOiJSUzI1NiJ9.eyJpYXQiOjE1ODg1OTYzODEsImV4cCI6MTU4ODY4Mjc4MSwic3ViIjoiYWRkNzQxMDItMjRmOS00YTZjLThjYzEtZWRlMTM5NGQ3MGJmIiwiaXNzIjoiZWdvIiwiYXVkIjpbXSwianRpIjoiNmUyYjE4MzEtOTdlMi00MTI0LWE0MGItYTVkMjFhNDg3MDE2IiwiY29udGV4dCI6eyJ1c2VyIjp7Im5hbWUiOiJhZHJpYW5wYXVsY2h1QGdtYWlsLmNvbSIsImVtYWlsIjoiYWRyaWFucGF1bGNodUBnbWFpbC5jb20iLCJzdGF0dXMiOiJBcHByb3ZlZCIsImZpcnN0TmFtZSI6IkFkcmlhbiIsImxhc3ROYW1lIjoiUGF1bCIsImNyZWF0ZWRBdCI6IjIwMTktMTItMDYgMDg6MTg6MTUiLCJsYXN0TG9naW4iOiIyMDIwLTA1LTA0IDEyOjQ2OjIxIiwicHJlZmVycmVkTGFuZ3VhZ2UiOm51bGwsInJvbGVzIjpbIkFETUlOIl0sImdyb3VwcyI6W10sInBlcm1pc3Npb25zIjpbXX19fQ.dWcmQRe2Fw95k7FMxjSOaPO29_wot6f8Olvm53PpXTFTtQ3VyzlbUHgQCX6-ZAmsppPQ1vJQz7ucFcQDFkNofbjyyyouqNZyO5URHes2LnzNj8pq1C8RwusstLSvToSprujQkiHFEFLMHyAAJdGZz11rzWVHQb8ZlDvqPcwArCX_f8oh9-K_TQKnkHsME16Bld4opm3WQR7sTe23-pgOc_dFn4mFEgzx2VFw2q4yDoXXmN89MXo7a3chXLvqsvAnz9wb9iKjhAPTHxOW9NMjqSjurYak16031BKkkELhju5jxGkh-YxsiPBp6VBPYSkdKiOitOxQK1JWqQz-TgBJaQ',
-      },
-    });
-  } catch (err) {
-    throw new Error(err);
-  }
-  return response;
-};
+export const launchCluster = async (api: Function) =>
+  await api({
+    method: 'POST',
+    url: kfVariantCluster,
+  });
 
-export const getStatus = async (api: Function) => {
-  let response;
-  const url = 'https://kf-api-variant-cluster-qa.kidsfirstdrc.org/stack';
-  try {
-    response = await api({
-      method: 'GET',
-      url: url,
-      headers: {
-        Authorization:
-          'Bearer eyJhbGciOiJSUzI1NiJ9.eyJpYXQiOjE1ODg1OTYzODEsImV4cCI6MTU4ODY4Mjc4MSwic3ViIjoiYWRkNzQxMDItMjRmOS00YTZjLThjYzEtZWRlMTM5NGQ3MGJmIiwiaXNzIjoiZWdvIiwiYXVkIjpbXSwianRpIjoiNmUyYjE4MzEtOTdlMi00MTI0LWE0MGItYTVkMjFhNDg3MDE2IiwiY29udGV4dCI6eyJ1c2VyIjp7Im5hbWUiOiJhZHJpYW5wYXVsY2h1QGdtYWlsLmNvbSIsImVtYWlsIjoiYWRyaWFucGF1bGNodUBnbWFpbC5jb20iLCJzdGF0dXMiOiJBcHByb3ZlZCIsImZpcnN0TmFtZSI6IkFkcmlhbiIsImxhc3ROYW1lIjoiUGF1bCIsImNyZWF0ZWRBdCI6IjIwMTktMTItMDYgMDg6MTg6MTUiLCJsYXN0TG9naW4iOiIyMDIwLTA1LTA0IDEyOjQ2OjIxIiwicHJlZmVycmVkTGFuZ3VhZ2UiOm51bGwsInJvbGVzIjpbIkFETUlOIl0sImdyb3VwcyI6W10sInBlcm1pc3Npb25zIjpbXX19fQ.dWcmQRe2Fw95k7FMxjSOaPO29_wot6f8Olvm53PpXTFTtQ3VyzlbUHgQCX6-ZAmsppPQ1vJQz7ucFcQDFkNofbjyyyouqNZyO5URHes2LnzNj8pq1C8RwusstLSvToSprujQkiHFEFLMHyAAJdGZz11rzWVHQb8ZlDvqPcwArCX_f8oh9-K_TQKnkHsME16Bld4opm3WQR7sTe23-pgOc_dFn4mFEgzx2VFw2q4yDoXXmN89MXo7a3chXLvqsvAnz9wb9iKjhAPTHxOW9NMjqSjurYak16031BKkkELhju5jxGkh-YxsiPBp6VBPYSkdKiOitOxQK1JWqQz-TgBJaQ',
-      },
-    });
-  } catch (err) {
-    throw new Error(err);
-  }
-  return response;
-};
+export const getStatus = async (api: Function) =>
+  await api({
+    method: 'GET',
+    // url: kfVariantCluster,
+    url: 'https://kf-api-variant-cluster-qa.kidsfirstdrc.org/sstack',
+  });
+
+export const deleteCluster = async (api: Function) =>
+  await api({
+    method: 'DELETE',
+    url: kfVariantCluster,
+  });