Adds tooltips to the deployment plan page

Change-Id: I029275bb5ccd7d7491a7a251081f70498624f211 Closes-bug: #1648888
2017-02-23 17:07:44 -07:00 · 2017-02-23 17:07:44 -07:00 · 105054462e
parent c64607992f
commit 105054462e
5 changed files with 139 additions and 6 deletions
--- a/releasenotes/notes/adds-tooltips-to-deployment-plan-page-b0903e572102e110.yaml
+++ b/releasenotes/notes/adds-tooltips-to-deployment-plan-page-b0903e572102e110.yaml
@ -0,0 +1,9 @@
+---
+features:
+  - |
+    Adds tooltips for each of the deployment steps on the deployment plan
+    page.
+fixes:
+  - |
+    Fixes `bug 1648888 <https://bugs.launchpad.net/tripleo/+bug/1648888>`__
+    adds tooltips to the Deployment Plan page
--- a/src/js/components/deployment_plan/DeploymentPlan.js
+++ b/src/js/components/deployment_plan/DeploymentPlan.js
@ -44,6 +44,40 @@ const messages = defineMessages({
  deployStepHeader: {
    id: 'DeploymentPlan.deployStepHeader',
    defaultMessage: 'Deploy'
+  },
+  hardwareStepTooltip: {
+    id: 'DeploymentPlan.hardwareStepTooltip',
+    defaultMessage: 'This step registers and introspects your nodes. Registration involves ' +
+    'defining the power management details of each node so that you so that the director can ' +
+    'control them during the introspection and provisioning stages. After registration, you ' +
+    'introspect the nodes, which identifies the hardware each node uses and builds a profile of ' +
+    'each node. After registration and introspection, you can assign these nodes into specific ' +
+    'roles in your overcloud.'
+  },
+  configurePlanStepTooltip: {
+    id: 'DeploymentPlan.configurePlanStepTooltip',
+    defaultMessage: 'This step allows you edit specific settings for the overcloud\'s network, ' +
+    'storage, and other certified plugins. Use this step to define your network isolation ' +
+    'configuration and your backend storage settings.'
+  },
+  configureRolesStepTooltip: {
+    id: 'DeploymentPlan.configureRolesStepTooltip',
+    defaultMessage: 'This step assigns and removes nodes from roles in your overcloud. On each ' +
+    'role\'s selection dialog, you can tag available nodes into the role or untag nodes already ' +
+    'assigned to the role. Click "Assign Nodes" for a particular role to open the selection ' +
+    'dialog and start assigning nodes.' +
+    '\n' +
+    'You can also customize role-specific settings in this step. For example, you can compose ' +
+    'services on each role and customize specific parameters related to each role. Click the ' +
+    'pencil icon in the top-right corner of each role to see these role-specific settings'
+  },
+  deployStepTooltip: {
+    id: 'DeploymentPlan.deploymentStepTooltip',
+    defaultMessage: 'This step performs the deployment of the overcloud. Once the deployment ' +
+    'begins, the director tracks the progress and provides a report of each completed, running, ' +
+    'or failed step. When the deployment completes, the director displays the current overcloud ' +
+    'status and login details, which you use to interact with your overcloud. Click "Deploy" to ' +
+    'start the deployment.'
  }
 });

@ -112,11 +146,13 @@ class DeploymentPlan extends React.Component {
            </div>
            <ol className="deployment-step-list">
            <DeploymentPlanStep title={formatMessage(messages.hardwareStepHeader)}
-                                disabled={this.props.currentStackDeploymentInProgress}>
+                                disabled={this.props.currentStackDeploymentInProgress}
+                                tooltip={formatMessage(messages.hardwareStepTooltip)}>
              <HardwareStep />
            </DeploymentPlanStep>
            <DeploymentPlanStep title={formatMessage(messages.deploymentConfigurationStepHeader)}
-                                disabled={this.props.currentStackDeploymentInProgress}>
+                                disabled={this.props.currentStackDeploymentInProgress}
+                                tooltip={formatMessage(messages.configurePlanStepTooltip)}>
                <ConfigurePlanStep
                  fetchEnvironmentConfiguration={this.props.fetchEnvironmentConfiguration}
                  summary={this.props.environmentConfigurationSummary}
@ -125,7 +161,8 @@ class DeploymentPlan extends React.Component {
                  loaded={this.props.environmentConfigurationLoaded}/>
            </DeploymentPlanStep>
            <DeploymentPlanStep title={formatMessage(messages.configureRolesStepHeader)}
-                                disabled={this.props.currentStackDeploymentInProgress}>
+                                disabled={this.props.currentStackDeploymentInProgress}
+                                tooltip={formatMessage(messages.configureRolesStepTooltip)}>
                <RolesStep availableNodesByRole={this.props.availableNodesByRole}
                           fetchNodes={this.props.fetchNodes}
                           fetchRoles={this.props.fetchRoles.bind(this, currentPlanName)}
@ -135,7 +172,8 @@ class DeploymentPlan extends React.Component {
                           rolesLoaded={this.props.rolesLoaded}
                           unassignedAvailableNodes={this.props.unassignedAvailableNodes}/>
              </DeploymentPlanStep>
-            <DeploymentPlanStep title={formatMessage(messages.deployStepHeader)}>
+            <DeploymentPlanStep title={formatMessage(messages.deployStepHeader)}
+                                tooltip={formatMessage(messages.deployStepTooltip)}>
                <DeployStep
                  currentPlan={this.props.currentPlan}
                  currentStack={this.props.currentStack}
--- a/src/js/components/deployment_plan/DeploymentPlanStep.js
+++ b/src/js/components/deployment_plan/DeploymentPlanStep.js
@ -1,10 +1,16 @@
 import React from 'react';

-export const DeploymentPlanStep = ({ children, disabled, title }) => {
+export const DeploymentPlanStep = ({ children, disabled, title, tooltip }) => {
  return (
    <li className={disabled ? 'disabled' : null}>
      <h3>
        <span>{title}</span>
+        {tooltip ?
+          <span data-tooltip={tooltip} className="tooltip-right">
+            <span className="pficon pficon-info"/>
+          </span>
+          : null
+        }
      </h3>
      {children}
    </li>
@ -14,7 +20,8 @@ export const DeploymentPlanStep = ({ children, disabled, title }) => {
 DeploymentPlanStep.propTypes = {
  children: React.PropTypes.node,
  disabled: React.PropTypes.bool,
-  title: React.PropTypes.string.isRequired
+  title: React.PropTypes.string.isRequired,
+  tooltip: React.PropTypes.string
 };

 DeploymentPlanStep.defaultProps = {
--- a/src/less/base.less
+++ b/src/less/base.less
@ -91,6 +91,7 @@
@import "ui/Navs";
@import "ui/FixedContainer";
@import "ui/Sidebar";
+@import "ui/Tooltips";
@import "components/EnvironmentConfiguration";
@import "components/DeploymentDetail";
@import "components/DeploymentPlan";
--- a/src/less/ui/Tooltips.less
+++ b/src/less/ui/Tooltips.less
@ -0,0 +1,78 @@
+@tooltip-width: 350px;
+
+[data-tooltip] {
+	cursor: pointer;
+	position: relative;
+	&:before {
+		background: transparent;
+		border-top-color: @gray-base;
+		border-top-color: hsla(0, 0%, 20%, 0.9);
+		border: 6px solid transparent;
+		content: "";
+		margin-bottom: -12px;
+		margin-left: -6px;
+		z-index: 1001;
+	}
+	&:after {
+		background-color: @gray-base;
+		background-color: hsla(0, 0%, 20%, 0.9);
+		color: @component-active-color;
+		content: attr(data-tooltip);
+		font-size: @font-size-small;
+		line-height: @line-height-base;
+		padding: 12px 12px 12px 16px;
+		width: @tooltip-width;
+		z-index: 1000;
+	}
+}
+
+[data-tooltip]:before,[data-tooltip]:after, .tooltip:before, .tooltip:after  {
+	-moz-transform: translate3d(0, 0, 0);
+	-moz-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+	-webkit-transform: translate3d(0, 0, 0);
+	-webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
+	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+	left: 50%;
+	opacity: 0;
+	pointer-events: none;
+	position: absolute;
+	top: 0;
+	transform: translate3d(0, 0, 0);
+	transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
+	visibility: hidden;
+}
+[data-tooltip]:hover:before,[data-tooltip]:hover:after,[data-tooltip]:focus:before,[data-tooltip]:focus:after, .tooltip:hover:before, .tooltip:hover:after, .tooltip:focus:before, .tooltip:focus:after  {
+	-moz-transform: translateY(-12px);
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+	-webkit-transform: translateY(-12px);
+	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+	opacity: 1;
+	transform: translateY(-12px);
+	visibility: visible;
+}
+.tooltip-right {
+	margin-left: 10px;
+	&:before {
+		border-right-color: @gray-base;
+		border-right-color: hsla(0, 0%, 20%, 0.9);
+		border-top-color: transparent;
+		left: 100%;
+		margin-bottom: 0;
+		margin-left: -12px;
+		top: 3px;
+	}
+	&:after {
+		left: 100%;
+		margin-bottom: -110px;
+		margin-left: 0;
+	}
+	.pficon {
+		color: @link-color;
+	}
+}
+.tooltip-right:hover:before, .tooltip-right:hover:after, .tooltip-right:focus:before, .tooltip-right:focus:after  {
+	-moz-transform: translateX(12px);
+	-webkit-transform: translateX(12px);
+	transform: translateX(12px);
+}