JL UI - Conditional refresh display, team profiles fix, central compo…

…nent auto refresh, UI label cleanup (#377) * Adding storage UI backend endpoint to fetch pvc details for a given namespace * Adding storage UI components for PVC, PV and StorageClass. * Adding storage PV and StorageClass backend sdk methods. * Delete PVC and PV backend calls. * Adding delete storage pv and pvc capability. Adding size attribute to the data dump. * Propagating k8s client PV and PVC delete API responce to UI. * Changing table columns list using type of data * Removing delete pvc endpoint * Cleaning storage enpoint code. * Adding container duration, tail log features. Adding containerCentral refresh icon. * Removing CentralWidgetHeader refresh icon. Adding duration calculation for failed jobs. * Formatting * Update to version 0.14.0 (#340) * Formatting * Env injection codeartifactdomain and codeartifacerepository (#339) * Cleaning mock files. * Fixing static code checks. Trying to avoid conflict with VERSION values in CodeArtifact. * upgrade version the next dev (#344) * Quickdemo branch (#347) * adding buildspec for the pipeline use * adding buildspec for the pipeline use * adding buildspec for the pipeline use * adding buildspec for the pipeline use * adding buildspec for the pipeline use * adding buildspec for the pipeline use * adding buildspec for the pipeline use * adding buildspec for the pipeline use * adding buildspec for the pipeline use * fix vpc for public * add destroy pipeline * deploy from code fix * deploy from code fix * fix req * fix req * fix req * fix req * don't create vpc ep when internet accessible * when using latest, must use locally build images * last fixes, if using latest then have to use dev-env for foundation because that is what the dev manifest uses * add regression step * had to add password for dockerhub cause building from source * remove passwords and fix path * need sdk to run regressions * fixing role for regression to be eks admin==foundation-admin * Cleaning code. * Update to version 0.14.1 (#348) * Merging with main and reformatting. * fix vpc creation (#349) * Fix vpc public (#350) * fix vpc creation * fix vpc creation for public , not having isolated subnets * fix vpc creation for public , not having isolated subnets * Development version 0.15.0.dev0 (#351) * changed the order of self signed cert deletion, added cfn template which can deploy a least privileged IAM role to deploy the pre-requisistes of orbit deployment (#352) Co-authored-by: Srinivas Reddy Cheruku <seenureddy92@gmail.com> * Demo branch2 (#354) * fix vpc creation * fix vpc creation for public , not having isolated subnets * fix vpc creation for public , not having isolated subnets * first round of fixes * fix public vpc * fix public vpc * Release version 0.14.2 (#355) * Redshift plugin post hook delete team specific clusters. * Fixing orbit sdk import issue in redshift destroy hook. * Adding missing aws-orbit-sdk pip install in dynamic code buildspec generator * Adding missing aws-orbit-sdk pip install in dynamic code buildspec generator * Adding boto3 redshift cluster delete calls before team redshift plugin destroy. * Adding describe redshit cluster policy action to orbit admin role, same is used for the build projects. * Logging cluster id details from tag specific list of redshift clusters. * Adding demo notebook to samples. Used to execute lake-creator, admin and lake-uesr regression notebooks. * Cleaning refresh buttons and labels in UI. Adding team_profiles and deployed_profiles. Add env and eks cluster name to the teams UI. * Adding conditional refresh to left header component. Fixing teams refresh endpoint call. * Code formatting. * rollback toolkit permissions; use utils for template on ssm manifest (#376) * rollback toolkit permissions; use utils for template on ssm manifest * black fix * Adding EKS cluster nodegroup details method to SDK. Used as part of JL UI backend call. * Removing refresh icon over containers central screen. * Cleaning imports. * Because of missing eks endpoint, removing get_nodegroups sdk method. Instead will replace with lambda to handle the eks serivce calls from the SDK. Co-authored-by: Ramon Bautista <36557237+rb201@users.noreply.github.com> Co-authored-by: AMIR BAR-OR <22354730+abaror@users.noreply.github.com> Co-authored-by: Srinivas Reddy <srinivasreddych@outlook.com> Co-authored-by: Srinivas Reddy Cheruku <seenureddy92@gmail.com> Co-authored-by: chamcca <40579012+chamcca@users.noreply.github.com>
awslabs · Apr 12, 2021 · 0058834 · 0058834
1 parent 263652f
commit 0058834
Show file tree

Hide file tree

Showing 13 changed files with 88 additions and 102 deletions.
diff --git a/images/jupyter-user/extensions/jupyterlab_orbit/jupyterlab_orbit/handlers/team.py b/images/jupyter-user/extensions/jupyterlab_orbit/jupyterlab_orbit/handlers/team.py
@@ -18,15 +18,17 @@
 from typing import Any, Dict, List
 
 from aws_orbit_sdk.common import get_workspace
+from aws_orbit_sdk.common_pod_specification import TeamConstants
 from jupyter_server.base.handlers import APIHandler
 from tornado import web
 
 DATA: Dict[str, List[Dict[str, str]]] = {}
+PROFILES_DATA: List[Dict[str, str]] = {}
 
 
 class TeamRouteHandler(APIHandler):
     @staticmethod
-    def _dump(data) -> str:
+    def _dump(data, profiles_data) -> str:
         ret: Dict[str, Any] = {}
         common_props = ["Fargate", "ScratchBucket"]
         security_props = [
@@ -36,7 +38,11 @@ def _dump(data) -> str:
             "GrantSudo",
             "K8Admin",
         ]
-        ret["common"] = [{"name": "team name", "value": data["team_space"]}]
+        ret["common"] = [
+            {"name": "Environment Name", "value": data["env_name"]},
+            {"name": "Team Name", "value": data["team_space"]},
+            {"name": "EKS Cluster Name", "value": "orbit-" + data["env_name"]},
+        ]
         for key, value in data.items():
             if key in common_props:
                 ret["common"].append({"name": key, "value": str(value)})
@@ -47,8 +53,8 @@ def _dump(data) -> str:
                 ret["security"][key] = value
 
         ret["profiles"] = {}
-        if "Profiles" in data:
-            for p in data["Profiles"]:
+        if profiles_data:
+            for p in profiles_data:
                 ret["profiles"][p["slug"]] = p
 
         ret["other"] = {}
@@ -75,6 +81,7 @@ def get(self):
         self.log.info(f"GET - {self.__class__}")
         if "MOCK" not in os.environ or os.environ["MOCK"] == "0":
             DATA = get_workspace()
+            PROFILES_DATA = TeamConstants().team_profiles()
             # hide some details
             if "Elbs" in DATA:
                 del DATA["Elbs"]
@@ -91,4 +98,4 @@ def get(self):
             with open(path) as f:
                 DATA = json.load(f)
 
-        self.finish(self._dump(DATA))
+        self.finish(self._dump(DATA, PROFILES_DATA))
diff --git a/images/jupyter-user/extensions/jupyterlab_orbit/src/catalog.tsx b/images/jupyter-user/extensions/jupyterlab_orbit/src/catalog.tsx
@@ -60,16 +60,11 @@ const CentralWidgetComponent = (props: {
   database: string;
   table: string;
 }): JSX.Element => {
-  const refreshCallback = async () => {
-    console.log(`[${props.database}.${props.table}] Refresh!`);
-  };
-
   const [state, setState] = useState({
     orderByField: '',
     orderByDirection: 'asc',
     items: []
   });
-  //
 
   useEffect(() => {
     const fetchData = async () => {
@@ -108,11 +103,7 @@ const CentralWidgetComponent = (props: {
 
   return (
     <div className={SECTION_CLASS}>
-      <CentralWidgetHeader
-        name={`TABLE ${props.table}`}
-        icon={ICON}
-        refreshCallback={refreshCallback}
-      />
+      <CentralWidgetHeader name={`TABLE ${props.table}`} icon={ICON} />
       {/*  https://github.com/langleyfoxall/react-dynamic-data-table  */}
       <div style={{ display: 'flex' }}>
         <DynamicDataTable

diff --git a/images/jupyter-user/extensions/jupyterlab_orbit/src/common/categoryViews.tsx b/images/jupyter-user/extensions/jupyterlab_orbit/src/common/categoryViews.tsx
@@ -149,15 +149,21 @@ export const CategoryViewsWithCreate = (props: {
   );
 };
 
-export const ListViewWithoutToolbar = (props: {
+export const ListViewWithRefresh = (props: {
   name: string;
+  refreshCallback: (name: string) => any;
   items: JSX.Element;
 }) => {
   return (
     <div className={SECTION_CLASS}>
       <header className={SECTION_HEADER_CLASS}>
         <h2>{props.name}</h2>
         <div style={{ display: 'flex', alignItems: 'right' }} />
+        <ToolbarButtonComponent
+          tooltip={'Refresh List'}
+          icon={refreshIcon}
+          onClick={() => props.refreshCallback(props.name)}
+        />
       </header>
       <div className={CONTAINER_CLASS}>
         <ul className={LIST_CLASS}> {props.items} </ul>

diff --git a/images/jupyter-user/extensions/jupyterlab_orbit/src/common/headers/centralWidgetHeader.tsx b/images/jupyter-user/extensions/jupyterlab_orbit/src/common/headers/centralWidgetHeader.tsx
@@ -7,7 +7,6 @@ const SECTION_HEADER_CLASS = 'jp-RunningSessions-sectionHeader';
 export const CentralWidgetHeader = (props: {
   name: string;
   icon: LabIcon;
-  refreshCallback: () => any;
 }): JSX.Element => (
   <div>
     <header
@@ -25,7 +24,7 @@ export const CentralWidgetHeader = (props: {
         <div style={{ display: 'flex', alignItems: 'center' }}>
           <props.icon.react tag="div" height="48px" width="48px" />
         </div>
-        <h1> {props.name} </h1>
+        <h1 style={{ padding: '5px' }}> {props.name} </h1>
       </div>
       <div
         style={{ display: 'flex', flexDirection: 'row', paddingLeft: '5px' }}

diff --git a/images/jupyter-user/extensions/jupyterlab_orbit/src/common/headers/leftWidgetHeader.tsx b/images/jupyter-user/extensions/jupyterlab_orbit/src/common/headers/leftWidgetHeader.tsx
@@ -28,18 +28,20 @@ export const LeftWidgetHeader = (props: {
         </div>
         <h2 style={{ fontWeight: 'bold' }}> {props.name} </h2>
       </div>
-      <div style={{ display: 'flex', alignItems: 'right' }}>
-        <ToolbarButtonComponent
-          tooltip={'Open'}
-          icon={launcherIcon}
-          onClick={props.openCallback}
-        />
-        <ToolbarButtonComponent
-          tooltip={'Refresh List'}
-          icon={refreshIcon}
-          onClick={props.refreshCallback}
-        />
-      </div>
+      {props.name === 'Catalog' && (
+        <div style={{ display: 'flex', alignItems: 'right' }}>
+          <ToolbarButtonComponent
+            tooltip={'Open'}
+            icon={launcherIcon}
+            onClick={props.openCallback}
+          />
+          <ToolbarButtonComponent
+            tooltip={'Refresh List'}
+            icon={refreshIcon}
+            onClick={props.refreshCallback}
+          />
+        </div>
+      )}
     </header>
   </div>
 );
diff --git a/images/jupyter-user/extensions/jupyterlab_orbit/src/compute.tsx b/images/jupyter-user/extensions/jupyterlab_orbit/src/compute.tsx
@@ -35,11 +35,7 @@ class CentralWidget extends ReactWidget {
   render(): JSX.Element {
     return (
       <div className={SECTION_CLASS}>
-        <CentralWidgetHeader
-          name={NAME}
-          icon={ICON}
-          refreshCallback={refreshCallback}
-        />
+        <CentralWidgetHeader name={NAME} icon={ICON} />
 
         <RedshiftCategoryCentralList
           title={'Your Redshift Clusters'}

diff --git a/images/jupyter-user/extensions/jupyterlab_orbit/src/containers.tsx b/images/jupyter-user/extensions/jupyterlab_orbit/src/containers.tsx
@@ -293,11 +293,7 @@ class CentralWidgetSection extends ReactWidget {
   render(): JSX.Element {
     return (
       <div className={SECTION_CLASS}>
-        <CentralWidgetHeader
-          name={this.title.label}
-          icon={ICON}
-          refreshCallback={refreshCallback}
-        />
+        <CentralWidgetHeader name={this.title.label} icon={ICON} />
         <ContainerCentralPanel
           title={this.headerTitle}
           type={this.type}
@@ -325,11 +321,7 @@ class CentralWidget extends ReactWidget {
   render(): JSX.Element {
     return (
       <div className={SECTION_CLASS}>
-        <CentralWidgetHeader
-          name={NAME}
-          icon={ICON}
-          refreshCallback={refreshCallback}
-        />
+        <CentralWidgetHeader name={NAME} icon={ICON} />
         <Sections app={this.app} />
         <div />
       </div>

diff --git a/images/jupyter-user/extensions/jupyterlab_orbit/src/containers/containersCentral.tsx b/images/jupyter-user/extensions/jupyterlab_orbit/src/containers/containersCentral.tsx
@@ -1,12 +1,10 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import * as utils from '../typings/utils';
 import { TableWidget } from './table/table';
 import ReactJson from 'react-json-view';
 import { IUseItemsReturn, getStateIcon, getNodeType } from '../containers';
 import { Tooltip } from 'antd';
 import { JupyterFrontEnd } from '@jupyterlab/application';
-import { refreshIcon } from '@jupyterlab/ui-components';
-import { ToolbarButtonComponent } from '@jupyterlab/apputils';
 
 const columns = [
   {
@@ -134,16 +132,15 @@ export const ContainerCentralPanel = (props: {
     props.type
   );
 
+  useEffect(() => {
+    console.log('Testing');
+    const interval = setInterval(refreshCallback, 60000);
+    return () => clearInterval(interval);
+  }, []);
+
   return (
     <div>
       <div>
-        <div style={{ float: 'right', paddingRight: '5px' }}>
-          <ToolbarButtonComponent
-            tooltip={'Refresh List'}
-            icon={refreshIcon}
-            onClick={refreshCallback}
-          />
-        </div>
         <TableWidget
           type={props.type}
           title={props.title}

diff --git a/images/jupyter-user/extensions/jupyterlab_orbit/src/k8Dashboard.tsx b/images/jupyter-user/extensions/jupyterlab_orbit/src/k8Dashboard.tsx
@@ -11,11 +11,7 @@ import { CentralWidgetHeader } from './common/headers/centralWidgetHeader';
 import { registerLaunchCommand } from './common/activation';
 const NAME = 'K8Dashboard';
 const ICON: LabIcon = testsIcon;
-const refreshCallback = (): void => {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-  // @ts-ignore
-  console.log(`[${NAME}] Refresh!`);
-};
+
 const { Search } = Input;
 
 interface IDashboardReturn {
@@ -80,11 +76,7 @@ class CentralWidget extends ReactWidget {
   render(): JSX.Element {
     return (
       <div className={SECTION_CLASS}>
-        <CentralWidgetHeader
-          name={NAME}
-          icon={ICON}
-          refreshCallback={refreshCallback}
-        />
+        <CentralWidgetHeader name={NAME} icon={ICON} />
         <div>
           <DashboardComponentFunc />
         </div>

diff --git a/images/jupyter-user/extensions/jupyterlab_orbit/src/storage.tsx b/images/jupyter-user/extensions/jupyterlab_orbit/src/storage.tsx
@@ -121,32 +121,32 @@ const StorageSections = (props: { app: JupyterFrontEnd }): JSX.Element => {
   return (
     <>
       <StorageCategoryLeftList
-        title={'Team PersistentVolumeClaim(PVC)'}
+        title={'Team PersistentVolumeClaim'}
         type={'teampvc'}
         useItems={useItems}
         key="1"
         openCallback={() =>
-          launchSectionWidget('Team PersistentVolumeClaim(PVC)', 'teampvc')
+          launchSectionWidget('Team PersistentVolumeClaim', 'teampvc')
         }
         app={props.app}
       />
       <StorageCategoryLeftList
-        title={'Cluster PersistentVolume(PV)'}
+        title={'PersistentVolume'}
         type={'clusterpv'}
         useItems={useItems}
         key="2"
         openCallback={() =>
-          launchSectionWidget('Cluster PersistentVolume(PV)', 'clusterpv')
+          launchSectionWidget('PersistentVolume', 'clusterpv')
         }
         app={props.app}
       />
       <StorageCategoryLeftList
-        title={'Cluster StorageClass'}
+        title={'StorageClass'}
         type={'clusterstorageclass'}
         useItems={useItems}
         key="3"
         openCallback={() =>
-          launchSectionWidget('Cluster StorageClass', 'clusterstorageclass')
+          launchSectionWidget('StorageClass', 'clusterstorageclass')
         }
         app={props.app}
       />
@@ -173,11 +173,7 @@ class CentralWidgetSection extends ReactWidget {
   render(): JSX.Element {
     return (
       <div className={SECTION_CLASS}>
-        <CentralWidgetHeader
-          name={this.title.label}
-          icon={ICON}
-          refreshCallback={refreshCallback}
-        />
+        <CentralWidgetHeader name={this.title.label} icon={ICON} />
         <StorageCentralPanel
           title={this.headerTitle}
           type={this.type}
@@ -205,11 +201,7 @@ class StorageCentralWidget extends ReactWidget {
   render(): JSX.Element {
     return (
       <div className={SECTION_CLASS}>
-        <CentralWidgetHeader
-          name={NAME}
-          icon={ICON}
-          refreshCallback={refreshCallback}
-        />
+        <CentralWidgetHeader name={NAME} icon={ICON} />
         <StorageSections app={this.app} />
         <div />
       </div>

diff --git a/images/jupyter-user/extensions/jupyterlab_orbit/src/storage/storageCentral.tsx b/images/jupyter-user/extensions/jupyterlab_orbit/src/storage/storageCentral.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import * as utils from '../typings/utils';
 import { TableWidget } from '../common/table';
 import ReactJson from 'react-json-view';
@@ -92,6 +92,12 @@ export const StorageCentralPanel = (props: {
     return columns;
   };
 
+  useEffect(() => {
+    console.log('Testing');
+    const interval = setInterval(refreshCallback, 60000);
+    return () => clearInterval(interval);
+  }, []);
+
   return (
     <div>
       <div>