diff --git a/packages/cp-frontend/src/components/deployment-groups/create.js b/packages/cp-frontend/src/components/deployment-groups/create.js
index 2683a900..e45292f4 100644
--- a/packages/cp-frontend/src/components/deployment-groups/create.js
+++ b/packages/cp-frontend/src/components/deployment-groups/create.js
@@ -13,6 +13,9 @@ import {
Input,
Button,
Card,
+ Progressbar,
+ ProgressbarItem,
+ ProgressbarButton,
H3,
typography
} from 'joyent-ui-toolkit';
@@ -115,3 +118,55 @@ export const Review = ({ handleSubmit, onCancel, dirty, ...state }) => {
);
};
+
+export const Progress = ({ stage, create, edit }) => {
+ const _nameCompleted = stage !== 'name';
+ const _nameActive = stage === 'name';
+
+ const _name = !create
+ ? null
+ :
+
+ Name the group
+
+ ;
+
+ const _manifestCompleted = stage === 'review';
+ const _manifestActive = create ? stage === 'manifest' : stage === 'edit';
+
+ const _manifest = (
+
+
+ Define services
+
+
+ );
+
+ const _reviewActive = stage === 'review';
+
+ const _review = (
+
+
+ Review and deploy
+
+
+ );
+
+ return (
+
+ {_name}
+ {_manifest}
+ {_review}
+
+ );
+};
diff --git a/packages/cp-frontend/src/containers/deployment-groups/create.js b/packages/cp-frontend/src/containers/deployment-groups/create.js
index ae618139..e24b7107 100644
--- a/packages/cp-frontend/src/containers/deployment-groups/create.js
+++ b/packages/cp-frontend/src/containers/deployment-groups/create.js
@@ -1,18 +1,31 @@
import React from 'react';
import DeploymentGroupEditOrCreate from './edit-or-create';
+import { Progress } from '@components/deployment-groups/create';
import { LayoutContainer } from '@components/layout';
import { DeploymentGroupsLoading } from '@components/deployment-groups';
import { H2 } from 'joyent-ui-toolkit';
-export default ({ loading, error, manifest = '', deploymentGroup = null }) =>
-
- Creating deployment group
- {loading && }
- {error && {error.toString()}}
-
- ;
+export default ({
+ loading,
+ error,
+ manifest = '',
+ deploymentGroup = null,
+ match
+}) => {
+ const stage = match.params.stage;
+
+ return (
+
+ Creating deployment group
+ {loading && }
+ {error && {error.toString()}}
+
+
+
+ );
+};
diff --git a/packages/cp-frontend/src/containers/deployment-groups/manifest.js b/packages/cp-frontend/src/containers/deployment-groups/manifest.js
index 33a148ba..046ba082 100644
--- a/packages/cp-frontend/src/containers/deployment-groups/manifest.js
+++ b/packages/cp-frontend/src/containers/deployment-groups/manifest.js
@@ -6,6 +6,7 @@ import ManifestQuery from '@graphql/Manifest.gql';
import DeploymentGroupBySlugQuery from '@graphql/DeploymentGroupBySlug.gql';
import DeploymentGroupEditOrCreate from './edit-or-create';
+import { Progress } from '@components/deployment-groups/create';
import { LayoutContainer } from '@components/layout';
import { DeploymentGroupsLoading } from '@components/deployment-groups';
import { H2 } from 'joyent-ui-toolkit';
@@ -14,8 +15,10 @@ const Manifest = ({
loading,
error,
manifest = '',
- deploymentGroup = null
+ deploymentGroup = null,
+ match
}) => {
+ const stage = match.params.stage;
const _loading = !loading ? null : ;
const _error = !error ? null : {error.toString()};
@@ -27,7 +30,7 @@ const Manifest = ({
deploymentGroup={deploymentGroup}
/>;
- const _notice = !err &&
+ const _notice = !error &&
!loading &&
deploymentGroup &&
deploymentGroup.imported &&
@@ -41,6 +44,7 @@ const Manifest = ({
return (
Edit Manifest
+
{_error}
{_loading}
{_notice}
diff --git a/packages/ui-toolkit/src/index.js b/packages/ui-toolkit/src/index.js
index 7fae9e64..375a2ab3 100644
--- a/packages/ui-toolkit/src/index.js
+++ b/packages/ui-toolkit/src/index.js
@@ -19,7 +19,7 @@ export { Tooltip, TooltipButton, TooltipDivider } from './tooltip';
export { Dropdown } from './dropdown';
export {
- Progressbar,
+ default as Progressbar,
ProgressbarButton,
ProgressbarItem,
Indicator
diff --git a/packages/ui-toolkit/src/progress-bar/indicator.js b/packages/ui-toolkit/src/progress-bar/indicator.js
index 8f581496..44df7e1b 100644
--- a/packages/ui-toolkit/src/progress-bar/indicator.js
+++ b/packages/ui-toolkit/src/progress-bar/indicator.js
@@ -46,7 +46,7 @@ const Indicator = ({ first, completed, active, last, ...rest }) => {
};
return (
-
+
);