Adds tooltips to the deployment plan page
Change-Id: I029275bb5ccd7d7491a7a251081f70498624f211 Closes-bug: #1648888
This commit is contained in:
parent
c64607992f
commit
105054462e
@ -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
|
@ -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}
|
||||
|
@ -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 = {
|
||||
|
@ -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";
|
||||
|
78
src/less/ui/Tooltips.less
Normal file
78
src/less/ui/Tooltips.less
Normal file
@ -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);
|
||||
}
|
Loading…
Reference in New Issue
Block a user