identities -> 'environments'

ui/src/App.js

@@ -2,7 +2,9 @@ import Login from './Login';
 import Logout from './Logout';
 import Version from './Version';
 import {useEffect, useState} from "react";
-import Identities from "./Identities";
+import Environments from "./Environments";
+import Icon from '@mdi/react';
+import { mdiCloud } from '@mdi/js';
 
 const App = () => {
     const [user, setUser] = useState();
@@ -25,22 +27,24 @@ const App = () => {
         <div className="zrok">
             <div className="container">
                 <div className="header">
-                    <img src="ziggy.svg" width="65px"/>
-                    <p className="title">zrok</p>
-                    <div className="header-left">
+                    <img alt="ziggy goes to space" src="ziggy.svg" width="65px"/>
+                    <p className="header-title">zrok</p>
+                    <div className={"header-status"}>
                         <div>
+                            <p>{user.email}</p>
+                            <Version/>
+                        </div>
+                        <div className={"header-controls"}>
+                            <button className={"logoutButton"}><Icon path={mdiCloud} size={0.7}/></button>
                             <Logout user={user} logout={() => {
                                 setUser(null);
                                 localStorage.clear();
                             }}/>
                         </div>
-                        <div>
-                            <Version/>
-                        </div>
                     </div>
                 </div>
                 <div className="main">
-                    <Identities user={user}/>
+                    <Environments user={user}/>
                 </div>
             </div>
         </div>

ui/src/Environments.js

@@ -2,8 +2,8 @@ import {useEffect, useState} from "react";
 import * as metadata from './api/metadata';
 import DataTable from 'react-data-table-component';
 
-const Identities = (props) => {
-    const [identities, setIdentities] = useState([])
+const Environments = (props) => {
+    const [environments, setEnvironments] = useState([])
 
     const columns = [
         {
@@ -30,8 +30,8 @@ const Identities = (props) => {
 
     useEffect(() => {
         let mounted = true;
-        metadata.listIdentities().then((resp) => {
-            setIdentities(resp.data)
+        metadata.listEnvironments().then((resp) => {
+            setEnvironments(resp.data)
             console.log(resp.data);
         })
         return () => { mounted = false; }
@@ -39,12 +39,12 @@ const Identities = (props) => {
 
     return (
         <div>
-            <h1>Identities</h1>
-            { identities && identities.length > 0 && (
+            <h1>Environments</h1>
+            { environments && environments.length > 0 && (
                 <div>
                     <DataTable
                         columns={columns}
-                        data={identities}
+                        data={environments}
                         defaultSortFieldId={1}
                     />
                 </div>
@@ -53,4 +53,4 @@ const Identities = (props) => {
     )
 };
 
-export default Identities;
+export default Environments;

ui/src/Logout.js

@@ -9,7 +9,7 @@ const Logout = (props) => {
     }
 
     return (
-        <a onClick={onClick}><Icon path={logoutIcon} size={1}/> {props.user.email}</a>
+        <button className="logoutButton" onClick={onClick} aria-label={"log out"}><Icon path={logoutIcon} size={.7}/></button>
     );
 }
 

ui/src/Version.js

@@ -17,7 +17,7 @@ const Version = () => {
     }, []);
 
     return (
-        <h2>{v}</h2>
+        <p>{v}</p>
     );
 }
 

ui/src/api/metadata.js

@@ -4,8 +4,8 @@ import * as gateway from './gateway'
 
 /**
  */
-export function listIdentities() {
-  return gateway.request(listIdentitiesOperation)
+export function listEnvironments() {
+  return gateway.request(listEnvironmentsOperation)
 }
 
 /**
@@ -14,8 +14,8 @@ export function version() {
   return gateway.request(versionOperation)
 }
 
-const listIdentitiesOperation = {
-  path: '/listIdentities',
+const listEnvironmentsOperation = {
+  path: '/listEnvironments',
   method: 'get',
   security: [
     {

ui/src/api/types.js

@@ -25,7 +25,7 @@
  */
 
 /**
- * @typedef identity
+ * @typedef environment
  * @memberof module:types
  * 
  * @property {string} zitiId 

ui/src/index.css

@@ -14,11 +14,6 @@ h1, h2, h3, h4, h5, h6 {
   font-family: 'Russo One', sans-serif;
 }
 
-.title {
-  font-family: 'Russo One', sans-serif;
-  font-size: 3em;
-  margin-left: 0.53em;
-}
 
 .container {
   display: grid;
@@ -32,17 +27,46 @@ h1, h2, h3, h4, h5, h6 {
   padding-left: 2em;
   padding-right: 2em;
   display: flex;
+  align-items: center;
   border-radius: 0 0 25px 25px;
 }
-
-.header-left {
+.header-title {
+  font-family: 'Russo One', sans-serif;
+  font-size: 3em;
+  margin-left: 0.53em;
+}
+.header-status {
   width: 100%;
   display: grid;
-  align-items: center;
+  padding-bottom: 1em;
+  grid-row-start: 2;
+}
+.header-status div p {
+  font-size: 75%;
+}
+.header-status div {
+  text-align: right;
+}
+.header-controls {
+  display: flex;
+  grid-row-start: 2;
   justify-content: right;
 }
-.header-left div {
-  text-align: right;
+.header-controls button {
+  margin-left: 30px;
+  display: flex;
+  align-items: center;
+  background-color: #5241a8;
+  border-radius: 5px 5px 5px 5px;
+  border: 1px solid #846fec;
+  color: lightgray;
+  padding: 5px;
+  width: 60px;
+  justify-content: center;
+}
+.header-controls button:hover {
+  color: white;
+  border-color: white;
 }
 
 .main {