Adds tooltips to the deployment plan page
Change-Id: I029275bb5ccd7d7491a7a251081f70498624f211
Closes-bug: #1648888
(cherry picked from commit 105054462e
)
This commit is contained in:
parent
e6013c6c0e
commit
71187598be
|
@ -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: {
|
deployStepHeader: {
|
||||||
id: 'DeploymentPlan.deployStepHeader',
|
id: 'DeploymentPlan.deployStepHeader',
|
||||||
defaultMessage: 'Deploy'
|
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>
|
</div>
|
||||||
<ol className="deployment-step-list">
|
<ol className="deployment-step-list">
|
||||||
<DeploymentPlanStep title={formatMessage(messages.hardwareStepHeader)}
|
<DeploymentPlanStep title={formatMessage(messages.hardwareStepHeader)}
|
||||||
disabled={this.props.currentStackDeploymentInProgress}>
|
disabled={this.props.currentStackDeploymentInProgress}
|
||||||
|
tooltip={formatMessage(messages.hardwareStepTooltip)}>
|
||||||
<HardwareStep />
|
<HardwareStep />
|
||||||
</DeploymentPlanStep>
|
</DeploymentPlanStep>
|
||||||
<DeploymentPlanStep title={formatMessage(messages.deploymentConfigurationStepHeader)}
|
<DeploymentPlanStep title={formatMessage(messages.deploymentConfigurationStepHeader)}
|
||||||
disabled={this.props.currentStackDeploymentInProgress}>
|
disabled={this.props.currentStackDeploymentInProgress}
|
||||||
|
tooltip={formatMessage(messages.configurePlanStepTooltip)}>
|
||||||
<ConfigurePlanStep
|
<ConfigurePlanStep
|
||||||
fetchEnvironmentConfiguration={this.props.fetchEnvironmentConfiguration}
|
fetchEnvironmentConfiguration={this.props.fetchEnvironmentConfiguration}
|
||||||
summary={this.props.environmentConfigurationSummary}
|
summary={this.props.environmentConfigurationSummary}
|
||||||
|
@ -125,7 +161,8 @@ class DeploymentPlan extends React.Component {
|
||||||
loaded={this.props.environmentConfigurationLoaded}/>
|
loaded={this.props.environmentConfigurationLoaded}/>
|
||||||
</DeploymentPlanStep>
|
</DeploymentPlanStep>
|
||||||
<DeploymentPlanStep title={formatMessage(messages.configureRolesStepHeader)}
|
<DeploymentPlanStep title={formatMessage(messages.configureRolesStepHeader)}
|
||||||
disabled={this.props.currentStackDeploymentInProgress}>
|
disabled={this.props.currentStackDeploymentInProgress}
|
||||||
|
tooltip={formatMessage(messages.configureRolesStepTooltip)}>
|
||||||
<RolesStep availableNodesByRole={this.props.availableNodesByRole}
|
<RolesStep availableNodesByRole={this.props.availableNodesByRole}
|
||||||
fetchNodes={this.props.fetchNodes}
|
fetchNodes={this.props.fetchNodes}
|
||||||
fetchRoles={this.props.fetchRoles.bind(this, currentPlanName)}
|
fetchRoles={this.props.fetchRoles.bind(this, currentPlanName)}
|
||||||
|
@ -135,7 +172,8 @@ class DeploymentPlan extends React.Component {
|
||||||
rolesLoaded={this.props.rolesLoaded}
|
rolesLoaded={this.props.rolesLoaded}
|
||||||
unassignedAvailableNodes={this.props.unassignedAvailableNodes}/>
|
unassignedAvailableNodes={this.props.unassignedAvailableNodes}/>
|
||||||
</DeploymentPlanStep>
|
</DeploymentPlanStep>
|
||||||
<DeploymentPlanStep title={formatMessage(messages.deployStepHeader)}>
|
<DeploymentPlanStep title={formatMessage(messages.deployStepHeader)}
|
||||||
|
tooltip={formatMessage(messages.deployStepTooltip)}>
|
||||||
<DeployStep
|
<DeployStep
|
||||||
currentPlan={this.props.currentPlan}
|
currentPlan={this.props.currentPlan}
|
||||||
currentStack={this.props.currentStack}
|
currentStack={this.props.currentStack}
|
||||||
|
|
|
@ -1,10 +1,16 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
export const DeploymentPlanStep = ({ children, disabled, title }) => {
|
export const DeploymentPlanStep = ({ children, disabled, title, tooltip }) => {
|
||||||
return (
|
return (
|
||||||
<li className={disabled ? 'disabled' : null}>
|
<li className={disabled ? 'disabled' : null}>
|
||||||
<h3>
|
<h3>
|
||||||
<span>{title}</span>
|
<span>{title}</span>
|
||||||
|
{tooltip ?
|
||||||
|
<span data-tooltip={tooltip} className="tooltip-right">
|
||||||
|
<span className="pficon pficon-info"/>
|
||||||
|
</span>
|
||||||
|
: null
|
||||||
|
}
|
||||||
</h3>
|
</h3>
|
||||||
{children}
|
{children}
|
||||||
</li>
|
</li>
|
||||||
|
@ -14,7 +20,8 @@ export const DeploymentPlanStep = ({ children, disabled, title }) => {
|
||||||
DeploymentPlanStep.propTypes = {
|
DeploymentPlanStep.propTypes = {
|
||||||
children: React.PropTypes.node,
|
children: React.PropTypes.node,
|
||||||
disabled: React.PropTypes.bool,
|
disabled: React.PropTypes.bool,
|
||||||
title: React.PropTypes.string.isRequired
|
title: React.PropTypes.string.isRequired,
|
||||||
|
tooltip: React.PropTypes.string
|
||||||
};
|
};
|
||||||
|
|
||||||
DeploymentPlanStep.defaultProps = {
|
DeploymentPlanStep.defaultProps = {
|
||||||
|
|
|
@ -91,6 +91,7 @@
|
||||||
@import "ui/Navs";
|
@import "ui/Navs";
|
||||||
@import "ui/FixedContainer";
|
@import "ui/FixedContainer";
|
||||||
@import "ui/Sidebar";
|
@import "ui/Sidebar";
|
||||||
|
@import "ui/Tooltips";
|
||||||
@import "components/EnvironmentConfiguration";
|
@import "components/EnvironmentConfiguration";
|
||||||
@import "components/DeploymentDetail";
|
@import "components/DeploymentDetail";
|
||||||
@import "components/DeploymentPlan";
|
@import "components/DeploymentPlan";
|
||||||
|
|
|
@ -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