Merge pull request #21 from moficodes/ui-modification

Ui modification
ibm-avocados · Jul 15, 2020 · fd0e3fa · fd0e3fa
2 parents 22cb2f1 + ec70777
commit fd0e3fa
Show file tree

Hide file tree

Showing 10 changed files with 161 additions and 50 deletions.
diff --git a/client/package.json b/client/package.json
@@ -15,6 +15,7 @@
     "carbon-components-react": "^7.11.3",
     "carbon-icons": "^7.0.7",
     "immer": "^6.0.5",
+    "query-string": "^6.13.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-dropdown": "^1.7.0",

diff --git a/client/src/Login.js b/client/src/Login.js
@@ -48,7 +48,6 @@ const Login = () => {
     fetch('/api/v1/identity-endpoints')
       .then((r) => r.json())
       .then(({ passcode_endpoint }) => {
-        console.log(passcode_endpoint);
         setIdentityEndpoint(passcode_endpoint);
       });
   }, []);

diff --git a/client/src/Router.js b/client/src/Router.js
@@ -3,18 +3,20 @@ import { Router, Switch, Route } from 'react-router-dom';
 import { Loading } from 'carbon-components-react';
 import Navbar from './common/Navbar';
 import history from './globalHistory';
+import queryString from 'query-string';
 
 const AppPage = React.lazy(() => import('./pages/clusters/AppPage'));
 const CreatePage = React.lazy(() => import('./pages/create/CreatePage'));
 const SchedulePage = React.lazy(() => import('./pages/schedule/SchedulePage'));
 const SettingsPage = React.lazy(() => import('./pages/settings/SettingsPage'));
 const Login = React.lazy(() => import('./Login'));
 
-const HolderThing = (props) => {
+const ApplicationRouter = (props) => {
+  const query = queryString.parse(props.location.search);
   const [isLoadingAccounts, setLoadingAccounts] = useState(true);
   const [accounts, setAccounts] = useState([]);
   const [accountID, setSelectedAccountID] = useState();
-
+  const [selectedAccount, setSelectedAccount] = useState();
   const [hasChosenAccount, setHasChosenAccount] = useState(false);
   const [tokenUpgraded, setTokenUpgraded] = useState(false);
 
@@ -36,7 +38,12 @@ const HolderThing = (props) => {
 
   const handleAccountChosen = useCallback(
     async ({ selectedItem }) => {
-      setAccountStuff(selectedItem.metadata.guid);
+      const {location} = props;
+
+      history.push(location.pathname + `?account=` + selectedItem.metadata.guid);
+      history.go();
+      // setSelectedAccount(selectedItem);
+      // setAccountStuff(selectedItem.metadata.guid);
     },
     [setAccountStuff]
   );
@@ -50,18 +57,26 @@ const HolderThing = (props) => {
         return;
       }
       const accounts = await response.json();
+      if(query.account){
+        const item = accounts.resources.find(account => account.metadata.guid === query.account);
+        if(item){
+          setSelectedAccount(item);
+          setAccountStuff(item.metadata.guid);
+        }
+      }
       setAccounts(accounts.resources);
       setLoadingAccounts(false);
     };
     loadAccounts();
   }, []);
-
+  
   return (
-    <>
+    <> 
       <Navbar
         path={props.location.pathname}
         isLoaded={!isLoadingAccounts}
         items={accounts}
+        selectedItem={selectedAccount}
         accountSelected={handleAccountChosen}
       />
       <Route path="/create" exact>
@@ -85,8 +100,9 @@ const HolderThing = (props) => {
           accountID={accountID}
         />
       </Route>
-      <Route path="/" exact>
+      <Route path="/">
         <AppPage
+          query={query}
           hasChosenAccount={hasChosenAccount}
           tokenUpgraded={tokenUpgraded}
           accountID={accountID}
@@ -111,7 +127,7 @@ const AppRouter = () => {
       <Suspense fallback={<Loading />}>
         <Switch>
           <Route path="/login" exact component={Login} />
-          <Route path="/" component={HolderThing} />
+          <Route path="/" component={ApplicationRouter} />
         </Switch>
       </Suspense>
     </Router>

diff --git a/client/src/common/Navbar.js b/client/src/common/Navbar.js
@@ -44,17 +44,33 @@ const Navbar = (props) => {
   };
 
   const handleCreateClick = () => {
-    history.push('/create');
+    if(props.selectedItem){
+      history.push('/create?account='+props.selectedItem.metadata.guid);
+    }else{
+      history.push('/create');
+    }
   };
   const handleScheduleClick = () => {
-    history.push('/schedule');
+    if(props.selectedItem){
+      history.push('/schedule?account='+props.selectedItem.metadata.guid);
+    }else{
+      history.push('/schedule');
+    }
   };
   const handleSettingsClick = () => {
-    history.push('/settings');
+    if(props.selectedItem){
+      history.push('/settings?account='+props.selectedItem.metadata.guid);
+    }else{
+      history.push('/settings');
+    }
   };
 
   const homeClick = () => {
-    history.push('/');
+    if(props.selectedItem){
+      history.push('/?account='+props.selectedItem.metadata.guid);
+    }else{
+      history.push('/');
+    }
   };
 
   return (
@@ -80,6 +96,7 @@ const Navbar = (props) => {
           label="Select Account"
           items={props.items || []}
           onChange={props.accountSelected}
+          selectedItem={props.selectedItem}
           itemToString={itemToString}
           id="account-dropdown"
           light={false}

diff --git a/client/src/common/data/headers.js b/client/src/common/data/headers.js
@@ -8,14 +8,12 @@ const headers = [
     header: 'State',
   },
   {
-    key: 'masterKubeVersion',
-    header: 'Master Version',
+    key: 'ingress',
+    header: 'Ingress',
   },
   {
-    // `key` is the name of the field on the row object itself for the header
-    key: 'location',
-    // `header` will be the name you want rendered in the Table Header
-    header: 'Location',
+    key: 'masterKubeVersion',
+    header: 'Master Version',
   },
   {
     key: 'dataCenter',
@@ -25,6 +23,10 @@ const headers = [
     key: 'workerCount',
     header: 'Worker Count',
   },
+  {
+    key: 'createdDate',
+    header: 'Days Since'
+  },
   {
     key: 'tags',
     header: 'Tags',

diff --git a/client/src/pages/clusters/AppPage.js b/client/src/pages/clusters/AppPage.js
@@ -2,11 +2,12 @@ import React from 'react';
 import { Loading } from 'carbon-components-react';
 import Clusters from './Clusters';
 
-const AppPage = ({ hasChosenAccount, tokenUpgraded, accountID }) => {
+const AppPage = (props) => {
+  const { hasChosenAccount, tokenUpgraded, accountID, query } = props;
   if (!hasChosenAccount) {
     return null;
   } else if (tokenUpgraded) {
-    return <Clusters accountID={accountID} />;
+    return <Clusters query={query} accountID={accountID} />;
   }
   return <Loading />;
 };