PXP-8520 Feat/paymodels

src/Workspace/Workspace.less

@@ -56,8 +56,12 @@ div.workspace--fullpage {
   width: 100%;
 }
 
+.workspace__pay-model {
+  margin: 20px 0 10px 0;
+}
+
 .workspace__options {
-  padding: 20px 20px;
+  padding: 0 20px 20px 20px;
   display: flex;
   flex-flow: wrap;
 }

src/Workspace/index.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import parse from 'html-react-parser';
 import Button from '@gen3/ui-component/dist/components/Button';
-import { datadogRum } from '@datadog/browser-rum';
 import {
-  Alert, Popconfirm, Steps, message,
+  Popconfirm, Steps, Collapse, Row, Col, Statistic, Alert, message,
 } from 'antd';
+import { datadogRum } from '@datadog/browser-rum';
 
 import {
   workspaceUrl,
@@ -14,6 +14,7 @@ import {
   workspaceLaunchUrl,
   workspaceTerminateUrl,
   workspaceStatusUrl,
+  workspacePayModelUrl,
   workspacePageTitle,
   workspacePageDescription,
 } from '../localconf';
@@ -33,6 +34,8 @@ import sessionMonitor from '../SessionMonitor';
 import workspaceSessionMonitor from './WorkspaceSessionMonitor';
 
 const { Step } = Steps;
+const { Panel } = Collapse;
+
 class Workspace extends React.Component {
   constructor(props) {
     super(props);
@@ -42,10 +45,12 @@ class Workspace extends React.Component {
       workspaceStatus: null,
       workspaceLaunchStepsConfig: null,
       interval: null,
+      payModelInterval: null,
       workspaceID: null,
       defaultWorkspace: false,
       workspaceIsFullpage: false,
       externalLoginOptions: [],
+      payModel: {},
     };
     this.workspaceStates = [
       'Not Found',
@@ -76,6 +81,9 @@ class Workspace extends React.Component {
     if (this.state.interval) {
       clearInterval(this.state.interval);
     }
+    if (this.state.payModelInterval) {
+      clearInterval(this.state.payModelInterval);
+    }
   }
 
   oniframeLoad = (e) => {
@@ -143,6 +151,20 @@ class Workspace extends React.Component {
     return workspaceStatus;
   }
 
+  getWorkspacePayModels = async () => fetchWithCreds({
+    path: `${workspacePayModelUrl}`,
+    method: 'GET',
+  }).then(
+    ({ status, data }) => {
+      // check if is valid pay model data
+      // older hatchery will also return 200 for /paymodels with workspace options in it
+      if (status === 200 && data.aws_account_id) {
+        return data;
+      }
+      return {};
+    },
+  ).catch(() => 'Error');
+
   getIcon = (workspace) => {
     if (this.regIcon(workspace, 'R Studio') || this.regIcon(workspace, 'RStudio')) {
       return rStudioIcon;
@@ -301,6 +323,12 @@ class Workspace extends React.Component {
   connected = () => {
     this.getWorkspaceOptions();
     this.getExternalLoginOptions();
+    this.getWorkspacePayModels().then((data) => {
+      this.checkWorkspacePayModel();
+      this.setState({
+        payModel: data,
+      });
+    });
     if (!this.state.defaultWorkspace) {
       this.getWorkspaceStatus().then((data) => {
         if (data.status === 'Launching' || data.status === 'Terminating' || data.status === 'Stopped') {
@@ -350,6 +378,23 @@ class Workspace extends React.Component {
     }
   }
 
+  checkWorkspacePayModel = async () => {
+    if (this.state.payModelInterval) {
+      clearInterval(this.state.payModelInterval);
+    }
+    try {
+      const payModelInterval = setInterval(async () => {
+        const data = await this.getWorkspacePayModels();
+        this.setState({
+          payModel: data,
+        });
+      }, 30000);
+      this.setState({ payModelInterval });
+    } catch (e) {
+      console.log('Error checking workspace status:', e);
+    }
+  }
+
   handleTerminateButtonClick = () => {
     // exit full page
     this.setState({ workspaceIsFullpage: false });
@@ -405,10 +450,39 @@ class Workspace extends React.Component {
       // NOTE both the containing element and the iframe have class '.workspace',
       // although no styles should be shared between them. The reason for this
       // is for backwards compatibility with Jenkins integration tests that select by classname.
+      const showExternalLoginsHintBanner = this.state.externalLoginOptions.length > 0
+      && this.state.externalLoginOptions.some((option) => !option.refresh_token_expiration);
       return (
         <div
           className={`workspace ${this.state.workspaceIsFullpage ? 'workspace--fullpage' : ''}`}
         >
+          {
+            (Object.keys(this.state.payModel).length > 0) ? (
+              <Collapse className='workspace__pay-model' onClick={(event) => event.stopPropagation()}>
+                <Panel header='User Pay Model Information' key='1'>
+                  <Row gutter={{
+                    xs: 8, sm: 16, md: 24, lg: 32,
+                  }}
+                  >
+                    <Col className='gutter-row' span={8}>
+                      <Statistic title='Pay Model Name' value={this.state.payModel.name || 'N/A'} />
+                    </Col>
+                    <Col className='gutter-row' span={8}>
+                      <Statistic title='AWS Account ID' groupSeparator='' value={this.state.payModel.aws_account_id || 'N/A'} />
+                    </Col>
+                    <Col className='gutter-row' span={8}>
+                      <Statistic title='AWS Account Region' value={this.state.payModel.region || 'N/A'} />
+                    </Col>
+                    {/* Total Charges column will be added back later */}
+                    {/* <Col className='gutter-row' span={6}>
+                      <Statistic title='Total Charges (USD)' value={this.state.payModel.cost || 'N/A'} precision={2} />
+                    </Col> */}
+                  </Row>
+                </Panel>
+              </Collapse>
+            )
+              : null
+          }
           {
             this.state.workspaceStatus === 'Running'
               ? (
@@ -502,7 +576,7 @@ class Workspace extends React.Component {
                       </div>
                     )
                     : null}
-                  {this.state.externalLoginOptions.length > 0
+                  {showExternalLoginsHintBanner
                     ? (
                       <Alert
                         description={

src/localconf.js

@@ -101,6 +101,7 @@ function buildConfig(opts) {
   const workspaceErrorUrl = '/no-workspace-access/';
   const workspaceOptionsUrl = `${workspaceUrl}options`;
   const workspaceStatusUrl = `${workspaceUrl}status`;
+  const workspacePayModelUrl = `${workspaceUrl}paymodels`;
   const workspaceTerminateUrl = `${workspaceUrl}terminate`;
   const workspaceLaunchUrl = `${workspaceUrl}launch`;
   const datasetUrl = `${hostname}api/search/datasets`;
@@ -449,6 +450,7 @@ function buildConfig(opts) {
     workspaceErrorUrl,
     workspaceOptionsUrl,
     workspaceStatusUrl,
+    workspacePayModelUrl,
     workspaceLaunchUrl,
     workspaceTerminateUrl,
     homepageChartNodes: components.index.homepageChartNodes,