Skip to content

Commit

Permalink
[Backport 2.6][#8366][YW] Improve nested tab styling and change HA co…
Browse files Browse the repository at this point in the history 
…nfiguration to match formatting

Summary:
Cloud provider configuration tabs were too large on the page, causing it to look visually
out of place. Change the tabs to only have icon assets and use regular text to describe the tabs.
Add responsive styling to better handle lower viewport widths. Add new icons to other tabs in the
configs section.

Test Plan:
Go to `/configs` and observe tab layout.

Old tabs:
{F16929}

New tabs:
{F16930}

Medium viewport (notice text ellipsis):
{F16935}

Small viewport (text is hidden, only icons shown):
{F16936}

Example of beta tag being highlighted:
{F16931}

Storage configs with new icons:
{F16933}

Security configs with new icons:
{F16934}

HA config under `/admin`:
{F16932}

Reviewers: sshevchenko, ssutar, mjoshi

Reviewed By: mjoshi

Subscribers: ui

Differential Revision: https://phabricator.dev.yugabyte.com/D11539
  • Loading branch information
Andrew Cai committed Jun 28, 2021
1 parent 8e6c18f commit e75f8c4
Show file tree
Hide file tree
Showing 18 changed files with 273 additions and 109 deletions.
5 changes: 2 additions & 3 deletions managed/ui/src/app/stylesheets/tabs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@
> li {
> a {
border: 1px solid #e2e2e1;
border: none;
border-bottom: none;
border: 1px solid transparent;
min-width: 80px;
text-align: center;
color: #555;
Expand All @@ -19,7 +18,7 @@
@include transition(0.35s);

&:first-child {
margin-left: -1px;
margin-left: -1px;
}

@media (min-width: 768px) {
Expand Down
123 changes: 77 additions & 46 deletions managed/ui/src/components/config/ConfigProvider/DataCenterConfiguration.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,63 +12,84 @@ import {
import { Tab, Row, Col } from 'react-bootstrap';
import { YBTabsPanel, YBTabsWithLinksPanel } from '../../panels';
import awsLogo from './images/aws.svg';
import azureLogo from './images/azure.png';
import azureLogo from './images/azure.svg';
import k8sLogo from './images/k8s.png';
import openshiftLogo from './images/redhat.png';
import tanzuLogo from './images/tanzu.png';
import gcpLogo from './images/gcp.png';
import gcpLogo from './images/gcp.svg';
import { isAvailable, showOrRedirect } from '../../../utils/LayoutUtils';
import './DataCenterConfiguration.scss';

class DataCenterConfiguration extends Component {

getTabTitle = (type) => {
switch(type) {
case 'AWS':
return (
<div className="title">
<img src={awsLogo} alt="AWS" className="aws-logo" />
<span>Amazon Web Services</span>
</div>
);
case 'GCP':
return (
<div className="title">
<img src={gcpLogo} alt="GCP" className="gcp-logo" />
<span>Google Cloud Platform</span>
</div>
);
case 'Azure':
return (
<div className="title">
<img src={azureLogo} alt="Azure" className="azure-logo" />
<span>Microsoft Azure</span>
</div>
);
case 'Tanzu':
return (
<div className="title">
<img src={tanzuLogo} alt="VMware Tanzu" />
<span>VMware Tanzu</span>
</div>
);
case 'Openshift':
return (
<div className="title">
<img src={openshiftLogo} alt="Red Hat OpenShift" />
<span>Red Hat OpenShift</span>
</div>
);
case 'K8s':
return (
<div className="title">
<img src={k8sLogo} alt="Managed Kubernetes" />
<span>Managed Kubernetes Service</span>
</div>
);
case 'Onprem':
return (
<div className="title">
<i className="fa fa-server tab-logo" />
<span>On-Premises Datacenters</span>
</div>
);
default:
return null;
}
}

render() {
const {
customer: { currentCustomer },
params: { tab, section },
params
} = this.props;
showOrRedirect(currentCustomer.data.features, 'menu.config');

const onPremiseTabContent = (
<div className="on-premise">
<i className="fa fa-server" />
On-Premises
<br />
Datacenters
</div>
);

const openshiftTabContent = (
<Row className="custom-tab">
<Col md={4}>
<img src={openshiftLogo} alt="Red Hat OpenShift" />
</Col>
<Col md={8}>Red Hat OpenShift</Col>
</Row>
);

const k8sTabContent = (
<Row className="custom-tab">
<Col md={4}>
<img src={k8sLogo} alt="Managed Kubernetes" />
</Col>
<Col md={8}>Managed Kubernetes Service</Col>
</Row>
);

const tanzuTabContent = (
<Row className="custom-tab">
<Col md={4}>
<img src={tanzuLogo} alt="VMware Tanzu" />
</Col>
<Col md={8}>VMware Tanzu</Col>
</Row>
);

const defaultTab = isAvailable(currentCustomer.data.features, 'config.infra')
? 'cloud'
: 'backup';
const activeTab = tab || defaultTab;

return (
<div>
<h2 className="content-title">Cloud Provider Configuration</h2>
Expand All @@ -90,45 +111,55 @@ class DataCenterConfiguration extends Component {
>
<Tab
eventKey="aws"
title={<img src={awsLogo} alt="AWS" className="aws-logo" />}
title={this.getTabTitle('AWS')}
key="aws-tab"
unmountOnExit={true}
>
<ProviderConfigurationContainer providerType="aws" />
</Tab>
<Tab
eventKey="gcp"
title={<img src={gcpLogo} alt="GCP" className="gcp-logo" />}
title={this.getTabTitle('GCP')}
key="gcp-tab"
unmountOnExit={true}
>
<ProviderConfigurationContainer providerType="gcp" />
</Tab>
<Tab
eventKey="azure"
title={<img src={azureLogo} alt="Azure" className="azure-logo" />}
title={this.getTabTitle('Azure')}
key="azure-tab"
unmountOnExit={true}
>
<ProviderConfigurationContainer providerType="azu" />
</Tab>
<Tab eventKey="tanzu" title={tanzuTabContent} key="tanzu-tab" unmountOnExit={true}>
<Tab
eventKey="tanzu"
title={this.getTabTitle('Tanzu')}
key="tanzu-tab"
unmountOnExit={true}
>
<KubernetesProviderConfigurationContainer type="tanzu" params={params} />
</Tab>
<Tab
eventKey="openshift"
title={openshiftTabContent}
title={this.getTabTitle('Openshift')}
key="openshift-tab"
unmountOnExit={true}
>
<KubernetesProviderConfigurationContainer type="openshift" params={params} />
</Tab>
<Tab eventKey="k8s" title={k8sTabContent} key="k8s-tab" unmountOnExit={true}>
<Tab
eventKey="k8s"
title={this.getTabTitle('K8s')}
key="k8s-tab"
unmountOnExit={true}
>
<KubernetesProviderConfigurationContainer type="k8s" params={params} />
</Tab>
<Tab
eventKey="onprem"
title={onPremiseTabContent}
title={this.getTabTitle('Onprem')}
key="onprem-tab"
unmountOnExit={true}
>
Expand Down
98 changes: 69 additions & 29 deletions managed/ui/src/components/config/ConfigProvider/DataCenterConfiguration.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

@import '../../../_style/colors.scss';

#config-tab-panel .tab-content {
#config-tab-panel .config-tabs .tab-content {
min-height: 400px;
padding-top: 20px;

Expand Down Expand Up @@ -326,22 +326,82 @@
}

.config-tabs .nav-tabs {
@media screen and (max-width: 1620px) {
> li {
width: calc(100%/7);

> a {
margin-right: 0px;
}
}
}

@media screen and (min-width: 768px) {
> li > a {
min-width: unset;
}
}

li:not(.active) {
img, svg {
filter: grayscale(1) brightness(1.2);
}
:before {
filter: sepia(.6);
}
}

> li > a {
min-width: 180px;
min-height: 72px;
padding-bottom: 0;
height: 52px;
padding: 0 15px;
display: flex;
align-items: center;
justify-content: center;

.title {
justify-content: left;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

@media screen and (max-width: 980px) {
> span {
display: none;
}
}
}


img {
height: 50px;
height: 28px;
margin-right: 5px;

&.aws-logo {
height: 42px;
margin-top: 5px;
width: 32px;
}
&.gcp-logo {
width: 30px;
}
&.azure-logo {
height: 30px;
margin-top: 8px;
height: 24px;
object-fit: cover;
width: 33px;
object-position: left;
}
&.s3-logo {
width: 28px;
object-fit: cover;
object-position: left;
}
&.encryption-transit-icon {
height: 24px;
}
}

.tab-logo {
font-size: x-large;
vertical-align: middle;
margin-right: 5px;
}

h3 {
Expand All @@ -355,22 +415,6 @@
}
}

.on-premise {
display: inline-block;
padding-top: 10px;
font-size: 16px;
font-weight: 500;
text-align: left;
line-height: 1;

i {
float: left;
font-size: 36px;
padding-right: 8px;
color: #679;
}
}

.custom-tab {
display: flex;
align-items: center;
Expand All @@ -382,10 +426,6 @@
}
}

> li.active > a {
min-height: 72px;
}

.kubernetes-logo {
width: 140px;
height: auto;
Expand Down
Binary file removed managed/ui/src/components/config/ConfigProvider/images/azure.png
View file
Binary file not shown.
Loading

0 comments on commit e75f8c4

Please sign in to comment.