F #3951: Add form stepper component (#185)

* Add new endpoints
* Add pool actions
* Add form stepper component
* Add create application form

src/fireedge/src/public/actions/pool.js

@@ -50,13 +50,13 @@ module.exports = {
     type: SUCCESS_ONE_REQUEST,
     payload: { apps }
   }),
-  setVNetworks: virtualNetworks => ({
+  setVNetworks: vNetworks => ({
     type: SUCCESS_ONE_REQUEST,
-    payload: { virtualNetworks }
+    payload: { vNetworks }
   }),
-  setNetworkTemplates: networkTemplates => ({
+  setVNetworkTemplates: vNetworksTemplates => ({
     type: SUCCESS_ONE_REQUEST,
-    payload: { networkTemplates }
+    payload: { vNetworksTemplates }
   }),
   setSecGroups: securityGroups => ({
     type: SUCCESS_ONE_REQUEST,

src/fireedge/src/public/assets/theme/defaults.js

@@ -16,6 +16,10 @@ export const toolbar = {
   sm: 64
 };
 
+export const footer = {
+  regular: 30
+};
+
 export const sidebar = {
   minified: 60,
   fixed: 240

src/fireedge/src/public/components/Cards/NetworkCard.js

@@ -0,0 +1,81 @@
+import React from 'react';
+
+import {
+  makeStyles,
+  Card,
+  Button,
+  CardHeader,
+  CardActions,
+  Fade
+} from '@material-ui/core';
+
+import { Tr } from 'client/components/HOC';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    height: '100%',
+    minHeight: 140,
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  header: {
+    overflowX: 'hidden',
+    flexGrow: 1
+  },
+  subheader: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'initial',
+    display: '-webkit-box',
+    lineClamp: 2,
+    boxOrient: 'vertical'
+  },
+  remove: {
+    backgroundColor: theme.palette.error.dark
+  }
+}));
+
+const NetworkCard = React.memo(
+  ({ info, handleEdit, handleClone, handleRemove }) => {
+    const classes = useStyles();
+    const { mandatory, name, description, type, id, extra } = info;
+
+    return (
+      <Fade in unmountOnExit={false}>
+        <Card className={classes.root}>
+          <CardHeader
+            avatar={mandatory ? 'M' : ''}
+            className={classes.header}
+            classes={{ content: classes.headerContent }}
+            title={name}
+            titleTypographyProps={{
+              variant: 'body2',
+              noWrap: true,
+              title: name
+            }}
+            subheader={description}
+            subheaderTypographyProps={{
+              variant: 'body2',
+              noWrap: true,
+              className: classes.subheader,
+              title: description
+            }}
+          />
+          <CardActions>
+            <Button variant="contained" size="small" onClick={handleEdit}>
+              {Tr('Edit')}
+            </Button>
+            <Button variant="contained" size="small" onClick={handleClone}>
+              {Tr('Clone')}
+            </Button>
+            <Button size="small" onClick={handleRemove}>
+              {Tr('Remove')}
+            </Button>
+          </CardActions>
+        </Card>
+      </Fade>
+    );
+  }
+);
+
+export default NetworkCard;

src/fireedge/src/public/components/Cards/RoleCard.js

@@ -0,0 +1,105 @@
+import React from 'react';
+
+import {
+  makeStyles,
+  Card,
+  Button,
+  CardHeader,
+  CardActions,
+  Badge,
+  Fade
+} from '@material-ui/core';
+import DesktopWindowsIcon from '@material-ui/icons/DesktopWindows';
+
+import { Tr } from 'client/components/HOC';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    height: '100%',
+    minHeight: 140,
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  header: {
+    overflowX: 'hidden',
+    flexGrow: 1
+  },
+  headerContent: {},
+  title: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'initial',
+    display: '-webkit-box',
+    lineClamp: 2,
+    boxOrient: 'vertical'
+  }
+}));
+
+const RoleCard = React.memo(
+  ({ info, handleEdit, handleClone, handleRemove }) => {
+    const classes = useStyles();
+    const {
+      name = 'Role name',
+      cardinality,
+      vm_template = 0,
+      elasticity_policies,
+      scheduled_policies
+    } = info;
+
+    const ConditionalWrapper = ({ condition, wrapper, children }) =>
+      condition ? wrapper(children) : children;
+    console.log(info);
+    return (
+      <Fade in unmountOnExit={false}>
+        <Card className={classes.root}>
+          <CardHeader
+            avatar={
+              <ConditionalWrapper
+                condition={cardinality > 1}
+                wrapper={children => (
+                  <Badge
+                    badgeContent={cardinality}
+                    color="primary"
+                    anchorOrigin={{
+                      vertical: 'top',
+                      horizontal: 'left'
+                    }}
+                  >
+                    {children}
+                  </Badge>
+                )}
+              >
+                <DesktopWindowsIcon />
+              </ConditionalWrapper>
+            }
+            className={classes.header}
+            classes={{ content: classes.headerContent }}
+            title={name}
+            titleTypographyProps={{
+              variant: 'body2',
+              noWrap: true,
+              className: classes.title,
+              title: name
+            }}
+            subheader={`Template id: ${vm_template}`}
+            subheaderTypographyProps={{
+              variant: 'body2',
+              noWrap: true,
+              title: `Template id: ${vm_template}`
+            }}
+          />
+          <CardActions>
+            <Button variant="contained" size="small" onClick={handleEdit}>
+              {Tr('Edit')}
+            </Button>
+            <Button size="small" onClick={handleRemove}>
+              {Tr('Remove')}
+            </Button>
+          </CardActions>
+        </Card>
+      </Fade>
+    );
+  }
+);
+
+export default RoleCard;

src/fireedge/src/public/components/Cards/index.js

@@ -0,0 +1,4 @@
+import NetworkCard from './NetworkCard';
+import RoleCard from './RoleCard';
+
+export { NetworkCard, RoleCard };