diff --git a/releasenotes/notes/adds-tooltips-to-deployment-plan-page-b0903e572102e110.yaml b/releasenotes/notes/adds-tooltips-to-deployment-plan-page-b0903e572102e110.yaml new file mode 100644 index 00000000..b35226b2 --- /dev/null +++ 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 `__ + adds tooltips to the Deployment Plan page diff --git a/src/js/components/deployment_plan/DeploymentPlan.js b/src/js/components/deployment_plan/DeploymentPlan.js index d8a5422b..342c3990 100644 --- 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 {
    + disabled={this.props.currentStackDeploymentInProgress} + tooltip={formatMessage(messages.hardwareStepTooltip)}> + disabled={this.props.currentStackDeploymentInProgress} + tooltip={formatMessage(messages.configurePlanStepTooltip)}> + disabled={this.props.currentStackDeploymentInProgress} + tooltip={formatMessage(messages.configureRolesStepTooltip)}> - + { +export const DeploymentPlanStep = ({ children, disabled, title, tooltip }) => { return (

  1. {title} + {tooltip ? + + + + : null + }

    {children}
    2. @@ -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 = { diff --git a/src/less/base.less b/src/less/base.less index fd149d83..c805296a 100644 --- 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"; diff --git a/src/less/ui/Tooltips.less b/src/less/ui/Tooltips.less new file mode 100644 index 00000000..1329665a --- /dev/null +++ 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); +}