Skip to content

Commit

Permalink
[#8366][YW] Improve nested tab styling and change HA configuration to…
Browse files Browse the repository at this point in the history 
… 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 May 10, 2021
1 parent b737705 commit a5d4378
Show file tree
Hide file tree
Showing 18 changed files with 276 additions and 112 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
102 changes: 71 additions & 31 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 All @@ -402,8 +442,8 @@
content: 'BETA';
position: absolute;
padding: 2px 6px;
top: 0;
right: 0;
top: -10px;
right: 5px;
background-color: $YB_ORANGE;
border-radius: 4px;
color: $YB_BACKGROUND;
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 a5d4378

Please sign in to comment.