Merge pull request #336 from helxplatform/develop

Release v6.4.3

Author: frostyfan109

.github/pull_request_template.md

@@ -0,0 +1,21 @@
+## Describe your changes
+
+## General Best Practice
+- [ ] I have performed a self-review of my code
+- [ ] If it is a core feature, I have added thorough tests
+- [ ] I have updated the documentation and README where necessary
+
+## Secure Software Development
+- [ ] High Level Data Flow Diagrams exists for core features/functions?
+- [ ] Threat modeling table has been completed/updated incorporating new changes?
+- [ ] Code changes been validated against [OWASP Top 10?](https://owasp.org/www-project-top-ten/)
+   - [A01:2021 - Broken Access Control](https://owasp.org/Top10/A01_2021-Broken_Access_Control/)
+   - [A02:2021 - Cryptographic Failures](https://owasp.org/Top10/A02_2021-Cryptographic_Failures/)
+   - [A03:2021 - Injection](https://owasp.org/Top10/A03_2021-Injection/)
+   - [A04:2021 - Insecure Design](https://owasp.org/Top10/A04_2021-Insecure_Design/)
+   - [A05:2021 - Security Misconfiguration](https://owasp.org/Top10/A05_2021-Security_Misconfiguration/) 
+   - [A06:2021 - Vulnerable and Outdated Components](https://owasp.org/Top10/A06_2021-Vulnerable_and_Outdated_Components/)
+   - [A07:2021 - Identification and Authentication Failures](https://owasp.org/Top10/A07_2021-Identification_and_Authentication_Failures/)
+   - [A08:2021 - Software and Data Integrity Failures](https://owasp.org/Top10/A08_2021-Software_and_Data_Integrity_Failures/)
+   - [A09:2021 - Security Logging and Monitoring Failures](https://owasp.org/Top10/A09_2021-Security_Logging_and_Monitoring_Failures/)
+   - [A10:2021 - Server-Side Request Forgery](https://owasp.org/Top10/A10_2021-Server-Side_Request_Forgery_%28SSRF%29/)

src/components/layout/layout.css

@@ -1,12 +1,14 @@
 .helx-header {
     padding-right: 2px !important;
+    background: #fff;
+    border-bottom: '1px solid #f0f0f0'
 }
 
 .brand_img {
     max-height: 64px;
     /* max-width: 150px; */
     /* object-fit: scale-down; */
-    padding: 2px 0px;
+    padding: 10px 10px;
 }
 
 .logout{
@@ -27,3 +29,22 @@
 .logout-button {
     margin: 0 1rem 0 0.5rem;
 }
+
+
+.helx-header.ai-sandbox-theme {
+    background: #192d3f;
+    border-bottom: 0;
+}
+.helx-header.ai-sandbox-theme .ant-menu-item a {
+    color: #fff !important;
+}
+.helx-header.ai-sandbox-theme .ant-menu-item-active::after {
+    border-color: #fff !important;
+}
+.helx-header.ai-sandbox-theme .ant-menu-item-selected::after {
+    border-color: #fff !important;
+}
+.helx-header.ai-sandbox-theme .logout-button:disabled {
+    color: rgba(255,255,255,0.7);
+    border-color: rgba(255,255,255,0.7);
+}

src/components/layout/layout.js

@@ -1,4 +1,4 @@
-import { Fragment, useState } from 'react'
+import { Fragment, useMemo, useState } from 'react'
 import { Layout as AntLayout, Button, Menu, Grid, Divider } from 'antd'
 import { LinkOutlined } from '@ant-design/icons'
 import { useLocation, useNavigate, Link } from '@gatsbyjs/reach-router'
@@ -14,7 +14,7 @@ export const Layout = ({ children }) => {
   const { helxAppstoreUrl, routes, context, basePath } = useEnvironment()
   const { api, loading: apiLoading, loggedIn, appstoreContext } = useWorkspacesAPI()
   const { analyticsEvents } = useAnalytics()
-  const { md } = useBreakpoint()
+  const { sm, md, lg } = useBreakpoint()
   const baseLinkPath = context.workspaces_enabled === 'true' ? '/helx' : ''
   const location = useLocation();
   const navigate = useNavigate()
@@ -42,7 +42,10 @@ export const Layout = ({ children }) => {
 
   return (
     <AntLayout className="layout">
-      <Header className="helx-header" style={{ display: 'flex', zIndex: 1, width: '100%', background: '#fff' }}>
+      <Header
+        className={`helx-header ${context.brand === 'ai_sandbox' && 'ai-sandbox-theme'}`}
+        style={{ display: 'flex', zIndex: 1, width: '100%' }}
+      >
         {context !== undefined ? <Link to={basePath}><img className="brand_img" src={'' + context.logo_url} alt={context.brand}></img></Link> : <span />}
         {md ? (
           <div style={{ flexGrow: 1, display: "flex", justifyContent: "flex-end" }}>
@@ -51,7 +54,7 @@ export const Layout = ({ children }) => {
               theme="light"
               mode="horizontal"
               selectedKeys={activeRoutes}
-              style={{ display: "flex", flexGrow: 1, justifyContent: "flex-end" }}
+              style={{ display: "flex", flexGrow: 1, justifyContent: "flex-end", background: 'transparent', border: 0 }}
             >
               <Menu.Item style={{ visibility: 'hidden' }}></Menu.Item>
               <Menu.Item style={{ visibility: 'hidden' }}></Menu.Item>
@@ -75,7 +78,7 @@ export const Layout = ({ children }) => {
             {context.workspaces_enabled === 'true' && !apiLoading && loggedIn && (
               <div style={{ height: "100%" }}>
                 <Button
-                  type="primary"
+                  type={context.brand === 'ai_sandbox' ? 'default' : 'primary'}
                   ghost
                   className="logout-button"
                   // Could use `loading` property but logout tends to happen so quickly that it doesn't work well.
@@ -91,6 +94,30 @@ export const Layout = ({ children }) => {
           <MobileMenu menu={routes} />
         )}
       </Header>
+      {context.brand === 'ai_sandbox' && (
+        <div style={{
+          width: '100%',
+          height: 64,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundImage: "url('" + context.logo_url.substring(0, context.logo_url.lastIndexOf('/')) + '/banner.png' + "')",
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          backgroundRepeat: 'no-repeat',
+        }}>
+          <span style={{
+            color: '#fff',
+            fontSize: md ? 40 : sm ? 32 : 24,
+            fontWeight: 300,
+            letterSpacing: 2,
+            textAlign: 'center',
+            padding: '0 16px'
+          }}>
+            AI Applied Research Collaborations
+          </span>
+        </div>
+      )}
       <Content className>
         {children}
         {context.workspaces_enabled === 'true' && <SidePanel />}

src/components/search/form/form.js

@@ -132,6 +132,10 @@ export const SearchForm = ({ type=undefined, ...props }) => {
     doSearch(selection)
   }
 
+  const handleSearchClick = () => {
+    doSearch(searchTerm)
+  }
+
   const searchSuggestionsWithHistory = useMemo(() => {
     if (searchSuggestions && searchHistory) {
       const suggestions = searchSuggestions.map((hit) => ({
@@ -229,7 +233,7 @@ export const SearchForm = ({ type=undefined, ...props }) => {
               type === MINIMAL ? (
                 <div style={{ display: "flex", alignItems: "center", height: "100%"}}>
                   <Divider type="vertical" style={{ height: "100%", top: 0 }} />
-                  <SearchOutlined style={{ fontSize: "16px", marginLeft: "4px" }} />
+                  <SearchOutlined style={{ fontSize: "16px", marginLeft: "4px" }} onClick={handleSearchClick} />
                 </div>
               ) : undefined
             }

src/components/workspaces/app-card.js

@@ -4,7 +4,7 @@ import { navigate } from '@gatsbyjs/reach-router';
 import { RocketOutlined, InfoCircleOutlined, SettingOutlined } from '@ant-design/icons';
 import { ExternalLink } from '../';
 import { toBytes, bytesToMegabytes, formatBytes } from '../../utils/memory-converter';
-import { useActivity, useInstance, useAnalytics, useEnvironment, useWorkspacesAPI } from "../../contexts";
+import { useActivity, useAnalytics, useEnvironment, useWorkspacesAPI } from "../../contexts";
 import './app-card.css';
 
 const { Meta } = Card;
@@ -27,7 +27,6 @@ export const AppCard = ({ name, app_id, description, detail, docs, status, minim
     const { context } = useEnvironment()
     const [launchTab, setLaunchTab] = useState(true);
     const [isLaunching, setLaunching] = useState(false);
-    const { pollingInstance } = useInstance();
     const [currentMemory, setMemory] = useState(validateLocalstorageValue('memory', app_id, toBytes(minimum_resources.memory), toBytes(maximum_resources.memory)));
     const [currentCpu, setCpu] = useState(validateLocalstorageValue('cpu', app_id, minimum_resources.cpus, maximum_resources.cpus));
     const [currentGpu, setGpu] = useState(validateLocalstorageValue('gpu', app_id, minimum_resources.gpus, maximum_resources.gpus));
@@ -52,8 +51,6 @@ export const AppCard = ({ name, app_id, description, detail, docs, status, minim
             }
             analyticsEvents.appLaunched(name, sid, currentCpu, currentGpu, currentMemory, false)
             addActivity(newActivity)
-            // start polling service and navigate to active tab if the launch is successful
-            pollingInstance(app_id, sid, data.url, name);
             navigate('/helx/workspaces/active');
         } catch (e) {
             let newActivity = {

src/contexts/instance-context.js

@@ -1,60 +1,9 @@
 import React, { createContext, useContext, useState } from 'react'
-import axios from 'axios';
-import { useEnvironment } from './environment-context';
-import { useActivity } from './activity-context';
-import { useWorkspacesAPI } from './workspaces-context';
 
 export const InstanceContext = createContext({});
 
 export const InstanceProvider = ({ children }) => {
-    const { helxAppstoreUrl } = useEnvironment();
-    const { updateActivity } = useActivity();
-    const { api } = useWorkspacesAPI();
     const [openedTabs, setTabs] = useState([]);
-    const [pollingTimerIDs, setPollingTimerIDs] = useState([])
-
-    const stopPolling = (sid) => {
-        // stop polling when instance is deleted
-        clearTimeout(pollingTimerIDs[sid])
-        setPollingTimerIDs((prev) => {
-            delete prev[sid]
-            return prev
-        })
-    }
-
-    // Check the status code of an instance to see if it's ready for use.
-    // Do the check every 5 seconds until it returns a OK status.
-    // Clear its timeout when the instance is deleted by user.
-
-    const pollingInstance = (app_id, sid, app_url, app_name) => {
-        const decoded_url = decodeURIComponent(app_url);
-        const executePoll = async () => {
-            let isAppReady = false;
-
-            try {
-               isAppReady = await api.getAppReady(decoded_url);
-            } catch(e) {} // just absorb the exception, the default false is correct here
-            if (isAppReady) {
-                let newActivity = {
-                    'sid': sid,
-                    'app_name': app_name,
-                    'status': 'success',
-                    'timestamp': new Date(),
-                    'message': `${app_name} is up and ready for use.`,
-                    'url': decoded_url,
-                    'app_id': app_id
-                }
-                updateActivity(newActivity);
-            } else {
-                let timerID = setTimeout(executePoll, 5000)
-                setPollingTimerIDs((prev) => {
-                    prev[sid] = timerID
-                    return prev
-                })
-            }
-        }
-        executePoll();
-    }
 
     const addOrDeleteInstanceTab = (action, app_id, tabIns = undefined) => {
         if (action === "add") {
@@ -73,7 +22,7 @@ export const InstanceProvider = ({ children }) => {
 
     return (
         <InstanceContext.Provider value={{
-            addOrDeleteInstanceTab, pollingInstance, stopPolling
+            addOrDeleteInstanceTab
         }}>
             {children}
         </InstanceContext.Provider>

src/contexts/workspaces-context/api.ts

@@ -124,6 +124,7 @@ export class WorkspacesAPI implements IWorkspacesAPI {
     async getActiveUser(fetchOptions: AxiosRequestConfig={}): Promise<User|null> {
         /** Get information about the active (logged in) user, check if whitelist required */
         const res = await this.axios.get<UsersResponse>("/users/", fetchOptions)
+        // Supports old versions of appstore.
         if (/\/login_whitelist\/?$/.test(res.request.responseURL)) {
             throw new WhitelistRequiredError()
         }
@@ -271,7 +272,26 @@ export class WorkspacesAPI implements IWorkspacesAPI {
     loginSAMLUNC() {
         return this.loginSAML(`${this.apiUrl}../../accounts/saml/`, 448, 753)
     }
-    
+
+    @APIRequest()
+    loginSAMLCILogon() {
+        // return this.loginSAML(`${this.apiUrl}../../accounts/cilogon/login/?process=`, 600, 760)
+
+        // note: because of CILogon's cross-origin-opener-policy only redirects cant be supported
+        const url = `${this.apiUrl}../../accounts/cilogon/login/?process=`
+
+        window.location.href = url
+    }
+
+    @APIRequest()
+    loginDex() {
+        // const url = `https://helx-dex-server.apps.renci.org/dex/auth?client_id=django&response_type=code&scope=openid&redirect_uri=http://localhost:8000/accounts/dex/login/callback/`
+
+        const url = `${this.apiUrl}../../accounts/oidc/dex/login/`;
+
+        window.location.href = url
+    }
+
     @APIRequest()
     loginSAMLGoogle() {
         /** I've been informed that we aren't actually using Google SAML, we're using OAuth... but this gets the job done regardless. */

src/contexts/workspaces-context/api.types.ts

@@ -223,6 +223,9 @@ export interface IWorkspacesAPI {
      */
     loginSAMLUNC(): Promise<void>
     loginSAMLGoogle(): Promise<void>
+    loginSAMLCILogon(): void
+    loginDex(): void
+
     logout(fetchOptions?: AxiosRequestConfig): Promise<LogoutResponse>
     /** May throw a WhitelistRequiredError */
     getActiveUser(fetchOptions?: AxiosRequestConfig): Promise<User|null>