#105: Fixed app updates and cloud init

frontend/src/Admin.js

@@ -2,6 +2,8 @@ import React, { useEffect} from 'react';
 
 import {Link} from 'react-router-dom';
 import Paper from '@material-ui/core/Paper';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Switch from '@material-ui/core/Switch';
 import Select from '@material-ui/core/Select';
 import MenuItem from '@material-ui/core/MenuItem';
 import List from '@material-ui/core/List';
@@ -21,7 +23,13 @@ import DialogTitle from '@material-ui/core/DialogTitle';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 
+import AccessibilityNewIcon from '@material-ui/icons/AccessibilityNew';
 import CachedIcon from '@material-ui/icons/Cached';
+import LockIcon from '@material-ui/icons/Lock';
+import BusinessIcon from '@material-ui/icons/Business';
+import EcoIcon from '@material-ui/icons/Eco';
+import ScheduleIcon from '@material-ui/icons/Schedule';
+import CloudIcon from '@material-ui/icons/Cloud';
 
 const surfaceColor = "#27292D"
 const inputColor = "#383B40"
@@ -459,7 +467,7 @@ const Admin = (props) => {
 	}
 
 	const editAuthenticationModal = 
-		<Dialog modal 
+		<Dialog 
 			open={selectedAuthenticationModalOpen}
 			onClose={() => {setSelectedAuthenticationModalOpen(false)}}
 			PaperProps={{
@@ -523,7 +531,7 @@ const Admin = (props) => {
 		</Dialog>
 
 	const editUserModal = 
-		<Dialog modal 
+		<Dialog 
 			open={selectedUserModalOpen}
 			onClose={() => {setSelectedUserModalOpen(false)}}
 			PaperProps={{
@@ -587,7 +595,7 @@ const Admin = (props) => {
 		</Dialog>
 
 	const modalView = 
-		<Dialog modal 
+		<Dialog 
 			open={modalOpen}
 			onClose={() => {setModalOpen(false)}}
 			PaperProps={{
@@ -600,7 +608,7 @@ const Admin = (props) => {
 			}}
 		>
 			<DialogTitle><span style={{color: "white"}}>
-				{curTab === 0 ? "Add user" : "Add environment"}
+				{curTab === 0 ? "Add user" : curTab === 2 ? "Add environment" : "Add organization"}
 			</span></DialogTitle>
 			<DialogContent>
 				{curTab === 0 ? 
@@ -671,7 +679,30 @@ const Admin = (props) => {
 						onChange={(event) => changeModalData("environment", event.target.value)}
 					/>
 					</div>
-				: null }
+				: 
+					<div>
+						Org Name	
+						<TextField
+							color="primary"
+							style={{backgroundColor: inputColor}}
+							autoFocus
+							InputProps={{
+								style:{
+									height: "50px", 
+									color: "white",
+									fontSize: "1em",
+								},
+							}}
+							required
+							fullWidth={true}
+							placeholder="datacenter froglantern"
+							id="environment_name"
+							margin="normal"
+							variant="outlined"
+							onChange={(event) => changeModalData("organization", event.target.value)}
+						/>
+					</div>
+				}
 				{loginInfo}
 			</DialogContent>
 			<DialogActions>
@@ -731,7 +762,7 @@ const Admin = (props) => {
 				</ListItem>
 				{users === undefined ? null : users.map(data => {
 					return (
-						<ListItem>
+						<ListItem key={data.id}>
 							<ListItemText
 								primary={data.username}
 								style={{minWidth: 200, maxWidth: 200}}
@@ -743,10 +774,6 @@ const Admin = (props) => {
 							<ListItemText
 								primary=
 									<Select
-										PaperProps={{
-											style: {
-											}
-										}}
 										SelectDisplayProps={{
 											style: {
 												marginLeft: 10,
@@ -977,7 +1004,7 @@ const Admin = (props) => {
 								style={{minWidth: 200, maxWidth: 200, overflow: "hidden"}}
 							/>
 							<ListItemText>
-								<Button type="outlined" style={{borderRadius: "0px"}} onClick={() => deleteEnvironment(environment.Name)} color="primary">Delete</Button>
+								<Button variant="outlined" style={{borderRadius: "0px"}} onClick={() => deleteEnvironment(environment.Name)} color="primary">Delete</Button>
 							</ListItemText>
 						</ListItem>
 					)
@@ -986,6 +1013,94 @@ const Admin = (props) => {
 		</div>
 		: null
 
+	const organizationsTab = curTab === 5 ?
+		<div>
+			<div style={{marginTop: 20, marginBottom: 20,}}>
+				<h2 style={{display: "inline",}}>Organizations</h2>
+				<span style={{marginLeft: 25}}>Global admin: control organizations</span>
+			</div>
+			<Button 
+				style={{}} 
+				variant="contained"
+				color="primary"
+				onClick={() => setModalOpen(true)}
+			> 
+				Add organization 
+			</Button>
+			<Divider style={{marginTop: 20, marginBottom: 20, backgroundColor: inputColor}}/>
+			<List>
+				<ListItem>
+					<ListItemText
+						primary="Name"
+						style={{minWidth: 150, maxWidth: 150}}
+					/>
+					<ListItemText
+						primary="Orborus running (TBD)"
+						style={{minWidth: 200, maxWidth: 200}}
+					/>
+					<ListItemText
+						primary="Actions"
+						style={{minWidth: 150, maxWidth: 150}}
+					/>
+				</ListItem>
+				<ListItem>
+					<ListItemText
+						primary="Enabled"
+						style={{minWidth: 150, maxWidth: 150}}
+					/>
+					<ListItemText
+						primary="false"
+						style={{minWidth: 200, maxWidth: 200}}
+					/>
+					<ListItemText
+						primary=<Switch checked={false} onChange={() => {console.log("INVERT")}} />
+						style={{minWidth: 150, maxWidth: 150}}
+					/>
+				</ListItem>
+			</List>
+		</div>
+		: null
+
+	const hybridTab = curTab === 4 ?
+		<div>
+			<div style={{marginTop: 20, marginBottom: 20,}}>
+				<h2 style={{display: "inline",}}>Hybrid</h2>
+				<span style={{marginLeft: 25}}></span>
+			</div>
+			<Divider style={{marginTop: 20, marginBottom: 20, backgroundColor: inputColor}}/>
+			<List>
+				<ListItem>
+					<ListItemText
+						primary="Name"
+						style={{minWidth: 150, maxWidth: 150}}
+					/>
+					<ListItemText
+						primary="Orborus running (TBD)"
+						style={{minWidth: 200, maxWidth: 200}}
+					/>
+					<ListItemText
+						primary="Actions"
+						style={{minWidth: 150, maxWidth: 150}}
+					/>
+				</ListItem>
+				<ListItem>
+					<ListItemText
+						primary="Enabled"
+						style={{minWidth: 150, maxWidth: 150}}
+					/>
+					<ListItemText
+						primary="false"
+						style={{minWidth: 200, maxWidth: 200}}
+					/>
+					<ListItemText
+						primary=<Switch checked={false} onChange={() => {console.log("INVERT")}} />
+						style={{minWidth: 150, maxWidth: 150}}
+					/>
+				</ListItem>
+			</List>
+		</div>
+		: null
+
 		// primary={environment.Registered ? "true" : "false"}
 
 	const setConfig = (event, newValue) => {
@@ -1001,20 +1116,22 @@ const Admin = (props) => {
 		setCurTab(newValue)
 	}
 
+	const iconStyle = {marginRight: 10}
 	const data = 
 		<div style={{minWidth: 1366, margin: "auto"}}>
 			<Paper style={paperStyle}>
 				<Tabs
 					value={curTab}
 					indicatorColor="primary"
-					textColor="white"
 					onChange={setConfig}
 					aria-label="disabled tabs example"
 				>
-					<Tab label="Users" />
-					<Tab label="App Authentication"/>
-					<Tab label="Environments"/>
-					<Tab label="Schedules"/>
+					<Tab label=<span><AccessibilityNewIcon style={iconStyle} />Users</span> />
+					<Tab label=<span><LockIcon style={iconStyle} />App Authentication</span>/>
+					<Tab label=<span><EcoIcon style={iconStyle} />Environments</span>/>
+					<Tab label=<span><ScheduleIcon style={iconStyle} />Schedules</span> />
+					{window.location.protocol == "http:" && window.location.port === "3000" ? <Tab label=<span><CloudIcon style={iconStyle} /> Hybrid</span>/> : null}
+					{window.location.protocol == "http:" && window.location.port === "3000" ? <Tab label=<span><BusinessIcon style={iconStyle} /> Organizations</span>/> : null}
 				</Tabs>
 				<Divider style={{marginTop: 0, marginBottom: 10, backgroundColor: "rgb(91, 96, 100)"}} />
 				<div style={{padding: 15}}>
@@ -1022,6 +1139,8 @@ const Admin = (props) => {
 					{usersView}	
 					{environmentView}
 					{schedulesView}
+					{hybridTab}
+					{organizationsTab}
 				</div>
 			</Paper>
 		</div>

frontend/src/AngularWorkflow.js

@@ -950,6 +950,10 @@ const AngularWorkflow = (props) => {
 				if (curaction.selectedAuthentication === null || curaction.selectedAuthentication === undefined || curaction.selectedAuthentication.length === "") {
 					curaction.selectedAuthentication = {}
 				}
+			} else {
+				curaction.authentication = []
+				curaction.authentication_id = ""
+				curaction.selectedAuthentication = {}
 			}
 
 			setSelectedApp(curapp)
@@ -2998,7 +3002,7 @@ const AngularWorkflow = (props) => {
 		paddingLeft: 10,
 		minHeight: "100%",
 		zIndex: 1000,
-		resize: "horizontal",
+		resize: "vertical",
 		overflow: "auto",
 	}
 

frontend/src/App.js

@@ -31,8 +31,8 @@ import LandingPageNew from "./LandingpageNew";
 import LoginPage from "./LoginPage";
 import SettingsPage from "./SettingsPage";
 
-import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
-import { createMuiTheme } from '@material-ui/core/styles';
+//import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
+import { createMuiTheme, ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles';
 
 import AlertTemplate from "react-alert-template-basic";
 import { positions, Provider } from "react-alert";
@@ -100,6 +100,7 @@ const App = (message, props) => {
     .then(response => response.json())
     .then(responseJson => {
       if (responseJson.success === true) {
+				console.log(responseJson)
 				setUserData(responseJson)
 				setIsLoggedIn(true)
 
@@ -127,7 +128,7 @@ const App = (message, props) => {
   			<Route exact path="/home" render={props => <LandingPageNew isLoaded={isLoaded} {...props} /> } />
 		</div> : 
 		<div style={{backgroundColor: "#1F2023", color: "rgba(255, 255, 255, 0.65)", minHeight: "100vh"}}>
-			<Header removeCookie={removeCookie} isLoaded={isLoaded} globalUrl={globalUrl} setIsLoggedIn={setIsLoggedIn} isLoggedIn={isLoggedIn} surfaceColor={surfaceColor} inputColor={inputColor}{...props} />
+			<Header removeCookie={removeCookie} surfaceColor={surfaceColor} inputColor={inputColor} userdata={userdata} isLoaded={isLoaded} globalUrl={globalUrl} setIsLoggedIn={setIsLoggedIn} isLoggedIn={isLoggedIn} surfaceColor={surfaceColor} inputColor={inputColor}{...props} />
 			<Route exact path="/oauth2" render={props => <Oauth2 isLoaded={isLoaded} globalUrl={globalUrl} surfaceColor={surfaceColor} inputColor={inputColor}{...props} /> } />
 			<Route exact path="/contact" render={props => <Contact isLoaded={isLoaded} globalUrl={globalUrl} surfaceColor={surfaceColor} inputColor={inputColor} {...props} /> } />
 			<Route exact path="/login" render={props => <LoginPage isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn} register={true} isLoaded={isLoaded} globalUrl={globalUrl} setCookie={setCookie} cookies={cookies} surfaceColor={surfaceColor} inputColor={inputColor} {...props} /> } />

frontend/src/Apps.js

@@ -286,7 +286,7 @@ const Apps = (props) => {
 		}
 
 		return (
-			<Paper square style={paperAppStyle} onClick={() => {
+			<Paper square key={data.id} style={paperAppStyle} onClick={() => {
 				if (selectedApp.id !== data.id) {
 					setSelectedApp(data)
 					console.log(data)
@@ -515,7 +515,7 @@ const Apps = (props) => {
 									newActionname = newActionname.replace("_", " ")
 									newActionname = newActionname.charAt(0).toUpperCase()+newActionname.substring(1)
 									return (
-										<MenuItem style={{backgroundColor: inputColor, color: "white"}} value={data}>
+										<MenuItem key={data.name} style={{backgroundColor: inputColor, color: "white"}} value={data}>
 											{newActionname}
 
 										</MenuItem>
@@ -540,7 +540,7 @@ const Apps = (props) => {
 
 								const circleSize = 10
 								return (
-									<MenuItem style={{backgroundColor: inputColor, color: "white"}} value={data}>
+									<MenuItem key={data.name} style={{backgroundColor: inputColor, color: "white"}} value={data}>
 										<div style={{width: circleSize, height: circleSize, borderRadius: circleSize / 2, backgroundColor: itemColor, marginRight: "10px"}}/>
 										{data.name}
 

frontend/src/Header.js

@@ -6,6 +6,8 @@ import {Link} from 'react-router-dom';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 
+import MenuItem from '@material-ui/core/MenuItem';
+import Select from '@material-ui/core/Select';
 import Button from '@material-ui/core/Button';
 import HomeIcon from '@material-ui/icons/Home';
 import PolymerIcon from '@material-ui/icons/Polymer';
@@ -17,7 +19,7 @@ const hoverColor = "#f85a3e"
 const hoverOutColor = "#e8eaf6"
 
 const Header = props => {
-  	const { globalUrl, isLoggedIn, removeCookie, homePage, isLoaded } = props;
+  const { surfaceColor, inputColor, globalUrl, isLoggedIn, removeCookie, homePage, isLoaded, userdata} = props;
 
 	const [HomeHoverColor, setHomeHoverColor] = useState(hoverOutColor);
 	const [SoarHoverColor, setSoarHoverColor] = useState(hoverOutColor);
@@ -100,7 +102,7 @@ const Header = props => {
 
 
 	// Handle top bar or something
-  	const loginTextBrowser = !isLoggedIn ? 
+  const loginTextBrowser = !isLoggedIn ? 
     	<div style={{display: "flex"}}>
 			<List style={{display: "flex", flexDirect: "row"}} component="nav">
 				<ListItem style={{textAlign: "center", marginLeft: "0px"}}>
@@ -192,6 +194,31 @@ const Header = props => {
 							</Button>
 						</Link>
 					</ListItem>
+					{userdata.orgs.length <= 1 ? null :
+						<ListItem>
+							<Select
+								SelectDisplayProps={{
+									style: {
+										marginLeft: 10,
+									}
+								}}
+								value={userdata.selected_org}
+								fullWidth
+								style={{backgroundColor: surfaceColor, color: "white", height: "50px"}}
+								onChange={(e) => {
+									console.log("SET ORG TO ", e.target.value)
+								}}
+								>
+								{userdata.orgs.map(data => {
+									return (
+										<MenuItem key={data.id} style={{backgroundColor: inputColor, color: "white"}} value={data}>
+											{data.name}
+										</MenuItem>
+									)
+								})}
+							</Select>
+						</ListItem>
+					}
 				</List>
 			</div>
 	    </div>
@@ -272,10 +299,10 @@ const Header = props => {
 	const loadedCheck = isLoaded ? 
 		<div>
 			<BrowserView>
-      			{loginTextBrowser}
+      	{loginTextBrowser}
 			</BrowserView>
 			<MobileView>
-      			{loginTextMobile}
+      	{loginTextMobile}
 			</MobileView>
 		</div>
 		:
@@ -288,6 +315,6 @@ const Header = props => {
 			{loadedCheck}
 	    </div>
   );
-};
+}
 
 export default Header;

frontend/src/Workflows.js

@@ -563,7 +563,7 @@ const Workflows = (props) => {
 		}
 
 		return (
-			<Paper square style={resultPaperAppStyle} onClick={() => {}}>
+			<Paper key={data.id} square style={resultPaperAppStyle} onClick={() => {}}>
 				<div style={{marginLeft: "10px", marginTop: "5px", marginBottom: "5px", marginRight: "5px", width: boxWidth, backgroundColor: boxColor}}>
 				</div>
 				<Grid container style={{margin: "10px 10px 10px 10px", flex: "1"}}>