Merge pull request #19 from moficodes/cloudfoundry

Cloudfoundry

.travis/build-and-push.sh

@@ -1,7 +1,9 @@
 #!/bin/bash
 echo "Building for Commit : $TRAVIS_COMMIT  and Tag : $TRAVIS_TAG"
-docker build -t moficodes/ibmcloud-kubernetes-admin:$TRAVIS_TAG .
+docker build -t moficodes/ibmcloud-kubernetes-admin:$TRAVIS_TAG -f docker/Dockerfile.web .
+docker build -t moficodes/ibmcloud-kubernetes-cron:$TRAVIS_TAG -f docker/Dockerfile.cron .
 
 echo "$DOCKER_PASSWORD" | docker login -u "$DOCKER_USERNAME" --password-stdin
 
-docker push moficodes/ibmcloud-kubernetes-admin:$TRAVIS_TAG
+docker push moficodes/ibmcloud-kubernetes-admin:$TRAVIS_TAG
+docker push moficodes/ibmcloud-kubernetes-cron:$TRAVIS_TAG

Makefile

@@ -14,7 +14,7 @@ run:
 	./kubeadmin
 
 docker: 
-	DOCKER_BUILDKIT=1 docker build -t moficodes/ibm-kubernetes-admin:$(tag) .
+	DOCKER_BUILDKIT=1 docker build -t moficodes/ibm-kubernetes-admin:$(tag) -f docker/Dockerfile.web .
 
 push:
 	docker push moficodes/ibm-kubernetes-admin:$(tag)

client/src/Router.js

@@ -3,6 +3,7 @@ import { Router, Switch, Route } from "react-router-dom";
 import AppPage from "./pages/clusters/AppPage";
 import CreatePage from "./pages/create/CreatePage";
 import SchedulePage from "./pages/schedule/SchedulePage";
+import SettingsPage from "./pages/settings/SettingsPage";
 import Login from "./Login";
 import Navbar from "./common/Navbar";
 import history from "./globalHistory";
@@ -75,6 +76,13 @@ const HolderThing = (props) => {
           accountID={accountID}
         />
       </Route>
+      <Route path="/settings" exact>
+        <SettingsPage
+          tokenUpgraded={tokenUpgraded}
+          hasChosenAccount={hasChosenAccount}
+          accountID={accountID}
+        />
+      </Route>
       <Route path="/" exact>
         <AppPage
           hasChosenAccount={hasChosenAccount}
@@ -100,7 +108,7 @@ const AppRouter = () => {
     <Router history={history}>
       <Switch>
         <Route path="/login" exact component={Login} />
-        <Route path="/" component={HolderThing}/>
+        <Route path="/" component={HolderThing} />
       </Switch>
     </Router>
   );

client/src/common/Navbar.css

@@ -0,0 +1,5 @@
+.menu-icon.bx--btn {
+  min-width: 4rem;
+  min-height: 4rem;
+  justify-content: center;
+}

client/src/common/Navbar.js

@@ -1,20 +1,33 @@
 import React from "react";
-import { Dropdown } from "carbon-components-react";
+import { Dropdown, Button } from "carbon-components-react";
 import styles from "./Navbar.module.css";
+import { Settings32 as Settings } from "@carbon/icons-react";
 // import Dropdown from "react-dropdown";
 import history from "../globalHistory";
 import "./Dropdown.css";
+import "./Navbar.css";
 
 const MenuItem = (props) => {
   return (
-    <>
-      <div
-        className={props.stylesx}
+    <div className={props.stylesx} onClick={props.onClickHandler}>
+      {props.label}
+    </div>
+  );
+};
+
+const MenuIcon = (props) => {
+  return (
+      <Button
+        className="menu-icon"
+        renderIcon={Settings}
+        iconDescription="Settings Page"
+        hasIconOnly
+        type="button"
+        tooltipPosition="bottom"
+        size="field"
+        kind={props.kind}
         onClick={props.onClickHandler}
-      >
-        {props.label}
-      </div>
-    </>
+      />
   );
 };
 
@@ -36,6 +49,9 @@ const Navbar = (props) => {
   const handleScheduleClick = () => {
     history.push("/schedule");
   };
+  const handleSettingsClick = () => {
+    history.push("/settings");
+  };
 
   const homeClick = () => {
     history.push("/");
@@ -47,8 +63,16 @@ const Navbar = (props) => {
         <div className={styles.title} onClick={homeClick}>
           <span className={styles.bold}>IBM</span> Cloud
         </div>
-        <MenuItem stylesx={props.path === "/create" ? styles.activeItem : styles.item} label="Create" onClickHandler={handleCreateClick} />
-        <MenuItem stylesx={props.path === "/schedule" ? styles.activeItem : styles.item}label="Schedule" onClickHandler={handleScheduleClick} />
+        <MenuItem
+          stylesx={props.path === "/create" ? styles.activeItem : styles.item}
+          label="Create"
+          onClickHandler={handleCreateClick}
+        />
+        <MenuItem
+          stylesx={props.path === "/schedule" ? styles.activeItem : styles.item}
+          label="Schedule"
+          onClickHandler={handleScheduleClick}
+        />
         <Dropdown
           disabled={props.accountsLoaded}
           className="navbar-dropdown"
@@ -60,6 +84,11 @@ const Navbar = (props) => {
           id="account-dropdown"
           light={false}
         />
+        <MenuIcon
+          kind={props.path === "/settings" ? "primary":"secondary"}
+          label="Settings"
+          onClickHandler={handleSettingsClick}
+        />
       </div>
     </>
   );

client/src/pages/clusters/Clusters.js

@@ -20,6 +20,7 @@ import {
   TagGroup16 as TagGroup,
   Reset16 as Reset,
   Money16 as Money,
+  VirtualMachine16 as VM,
 } from '@carbon/icons-react';
 
 import headers from '../../common/data/headers';
@@ -106,7 +107,7 @@ const Clusters = ({ accountID }) => {
   const [
     clusters,
     {
-      deleteClusters, deleteTag, setTag, reload, getBilling,
+      deleteClusters, deleteTag, setTag, reload, getBilling, getWorkers
     },
   ] = useClusters(accountID);
 
@@ -123,6 +124,12 @@ const Clusters = ({ accountID }) => {
     [getBilling],
   );
 
+  const onGetWorkersClicked = useCallback(
+    (data) => {
+      getWorkers(data)
+    }
+  )
+
   const onSetTagClicked = useCallback(
     (clusters, tagText) => {
       setTagText('');
@@ -254,6 +261,16 @@ const Clusters = ({ accountID }) => {
               tabIndex={getBatchActionProps().shouldShowBatchActions ? -1 : 0}
               onChange={onInputChange}
             />
+            <Button
+              renderIcon={VM}
+              iconDescription="Get Workers for Clusters"
+              hasIconOnly
+              kind="secondary"
+              size="field"
+              type="button"
+              tooltipPosition="right"
+              onClick={() => onGetWorkersClicked(clusters.data)}
+            />
             <Button
               renderIcon={Money}
               iconDescription="Get Billing for Clusters"

client/src/pages/clusters/useClusters.js

@@ -1,7 +1,7 @@
 import { useReducer, useEffect } from 'react';
 import produce from 'immer';
 
-const WAIT_FOR_ALL = false;
+const WAIT_FOR_ALL = true;
 
 // Takes an array of objects and tranforms it into a map of objects, with ID
 // being the key and the object being the value.
@@ -304,31 +304,6 @@ const useClusters = (accountID) => {
         //   });
         // }
 
-        const workerPromises = Object.keys(clusters).map(async (id) => {
-          try {
-            const workers = await grab(`/api/v1/clusters/${id}/workers`, {
-              signal,
-              method: 'GET',
-            });
-            if (!WAIT_FOR_ALL && !cancelled) {
-              dispatch({
-                type: 'UPDATE_WORKERS',
-                id,
-                workers,
-              });
-            }
-            return { id, workers };
-          } catch {
-            return undefined;
-          }
-        });
-        if (WAIT_FOR_ALL) {
-          Promise.all(workerPromises).then((workers) => {
-            if (!cancelled) {
-              dispatch({ type: 'UPDATE_ALL_WORKERS', workers });
-            }
-          });
-        }
       }
     } catch {
       if (!cancelled) {
@@ -337,6 +312,34 @@ const useClusters = (accountID) => {
     }
   };
 
+  const getWorkers = (clusters) => {
+    const workerPromises = Object.keys(clusters).map(async (id) => {
+      try {
+        const workers = await grab(`/api/v1/clusters/${id}/workers`, {
+          signal,
+          method: 'GET',
+        });
+        if (!WAIT_FOR_ALL && !cancelled) {
+          dispatch({
+            type: 'UPDATE_WORKERS',
+            id,
+            workers,
+          });
+        }
+        return { id, workers };
+      } catch {
+        return undefined;
+      }
+    });
+    if (WAIT_FOR_ALL) {
+      Promise.all(workerPromises).then((workers) => {
+        if (!cancelled) {
+          dispatch({ type: 'UPDATE_ALL_WORKERS', workers });
+        }
+      });
+    }
+  }
+
   const getBilling = (clusters) => {
     const costPromises = Object.keys(clusters).map(async (id) => {
       try {
@@ -458,6 +461,7 @@ const useClusters = (accountID) => {
       setTag,
       reload,
       getBilling,
+      getWorkers,
     },
   ];
 };

client/src/pages/create/CreateForm.js

@@ -28,6 +28,7 @@ import geos from "../../common/data/geo";
 import styles from "./CreateForm.module.css";
 
 import "./CreateForm.css";
+import WorkshopAccount from "./WorkshopAccount";
 
 const Spacer = ({ height }) => <div style={{ marginTop: height }} />;
 
@@ -81,6 +82,9 @@ const CreateForm = ({ accountID }) => {
   const [endTime, setEndTime] = React.useState("");
   const [dateRange, setDateRange] = React.useState([]);
 
+  const [isWorkshop, setIsWorkshop] = React.useState(false);
+  const [githubIssue, setGithubIssue] = React.useState("");
+
   // ui indicators
   const [creating, setCreating] = React.useState(false);
   const [loaderDescription, setLoaderDescription] = React.useState("");
@@ -113,6 +117,7 @@ const CreateForm = ({ accountID }) => {
         );
         if (resourceGroups) {
           setResourceGroups(resourceGroups.resources);
+          console.log(resourceGroups.resources);
         }
       } catch (e) {
         console.log(e);
@@ -138,8 +143,6 @@ const CreateForm = ({ accountID }) => {
       }
     };
     checkAPIKey();
-
-
   }, [accountID]);
 
   const resetState = () => {
@@ -501,6 +504,8 @@ const CreateForm = ({ accountID }) => {
     );
     const destroyAt = endDate.getTime() / 1000;
 
+    const password = kubernetesSelected?"ikslab":"oslab";
+
     const schedule = {
       createAt: createAt,
       destroyAt: destroyAt,
@@ -510,8 +515,19 @@ const CreateForm = ({ accountID }) => {
       createRequest: CreateClusterRequest,
       clusters: [],
       notifyEmails: selectedEmails,
+      eventName: clusterNamePrefix,
+      password: password,
+      resourceGroupName: selectedGroup.name,
+      githubIssueNumber: githubIssue,
+      isWorkshop: isWorkshop,
     };
 
+    /*
+    	EventName         string               `json:"eventName"`
+	Password          string               `json:"password"`
+	ResourceGroupName string               `json:"resourceGroupName"`
+    */
+
     try {
       const response = await grab(`/api/v1/schedule/${accountID}/create`, {
         method: "post",
@@ -566,8 +582,6 @@ const CreateForm = ({ accountID }) => {
     }
   };
 
-
-
   const timeInvalid = (time) => {
     const re = /^(0[0-9]|1[0-2]):[0-5][0-9]$/;
     return !re.test(time);
@@ -1069,6 +1083,13 @@ const CreateForm = ({ accountID }) => {
                     accountID={accountID}
                     setSelectedEmails={setSelectedEmails}
                   />
+                  <WorkshopAccount
+                    isWorkshop={isWorkshop}
+                    setIsWorkshop={setIsWorkshop}
+                    githubIssue={githubIssue}
+                    setGithubIssue={setGithubIssue}
+                    accountID={accountID}
+                  />
                 </ModalWrapper>
                 <Spacer height="16px" />
               </div>