Skip to content

Commit

Permalink
Cluster details in tabs (#537)
Browse files Browse the repository at this point in the history 
* Organizes cluster details in tabs
* Upgrades `connected-react-router` library
  • Loading branch information
@marians
marians authored Mar 29, 2019
1 parent 37d88f9 commit 5a62aab
Show file tree
Hide file tree
Showing 6 changed files with 166 additions and 130 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
"auth0-js": "9.10.0",
"bootstrap": "3.4.1",
"color-hash": "latest",
"connected-react-router": "6.3.1",
"connected-react-router": "6.3.2",
"copy-to-clipboard": "3.0.8",
"deep-diff": "1.0.2",
"giantswarm-v4": "git+https://github.com/giantswarm/giantswarm-js-client.git#master",
Expand Down
3 changes: 1 addition & 2 deletions src/components/cluster/detail/cluster_apps.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,8 +143,7 @@ class ClusterApps extends React.Component {

return (
<React.Fragment>
<div className='row section cluster-apps'>
<h3 className='table-label'>Managed Services</h3>
<div className='row cluster-apps'>
<p>
These services are preinstalled on your cluster and managed by Giant
Swarm.
Expand Down
6 changes: 1 addition & 5 deletions src/components/cluster/detail/key_pairs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -257,11 +257,7 @@ class ClusterKeyPairs extends React.Component {

render() {
return (
<div className='row section cluster_key_pairs col-12'>
<div className='row'>
<h3 className='table-label'>Key Pairs</h3>
</div>

<div className='row cluster_key_pairs col-12'>
<div className='row'>
<p>
Key pairs consist of an RSA private key and certificate, signed by
Expand Down
260 changes: 142 additions & 118 deletions src/components/cluster/detail/view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ import PropTypes from 'prop-types';
import React from 'react';
import ReactTimeout from 'react-timeout';
import ScaleClusterModal from './scale_cluster_modal';
import Tab from 'react-bootstrap/lib/Tab';
import Tabs from 'react-bootstrap/lib/Tabs';
import UpgradeClusterModal from './upgrade_cluster_modal';

class ClusterDetailView extends React.Component {
Expand Down Expand Up @@ -197,137 +199,159 @@ class ClusterDetailView extends React.Component {
<DocumentTitle
title={'Cluster Details | ' + this.clusterName() + ' | Giant Swarm'}
>
<div>
<div className='cluster-details'>
<div className='row'>
<div className='col-sm-12 col-md-7 col-9'>
<h1>
<ClusterIDLabel
clusterID={this.props.cluster.id}
copyEnabled
/>{' '}
<ClusterName
id={this.props.cluster.id}
name={this.props.cluster.name}
dispatchFunc={this.props.dispatch}
/>{' '}
{this.state.loading ? (
<img
className='loader'
width='25px'
height='25px'
src='/images/loader_oval_light.svg'
/>
) : (
''
)}
</h1>
</div>
<div className='col-sm-12 col-md-5 col-3'>
<div
className='btn-group visible-xs-block visible-sm-block visible-md-block'
style={{ marginTop: 10 }}
>
<Button onClick={this.accessCluster}>
<i className='fa fa-start' /> GET STARTED
<div className='cluster-details'>
<div className='row' style={{ marginBottom: '30px' }}>
<div className='col-sm-12 col-md-7 col-9'>
<h1 style={{ marginLeft: '-10px' }}>
<ClusterIDLabel
clusterID={this.props.cluster.id}
copyEnabled
/>{' '}
<ClusterName
id={this.props.cluster.id}
name={this.props.cluster.name}
dispatchFunc={this.props.dispatch}
/>{' '}
{this.state.loading ? (
<img
className='loader'
width='25px'
height='25px'
src='/images/loader_oval_light.svg'
/>
) : (
''
)}
</h1>
</div>
<div className='col-sm-12 col-md-5 col-3'>
<div
className='btn-group visible-xs-block visible-sm-block visible-md-block'
style={{ marginTop: 10 }}
>
<Button onClick={this.accessCluster}>
<i className='fa fa-start' /> GET STARTED
</Button>
{this.canClusterScale() ? (
<Button onClick={this.showScalingModal}>
<i className='fa fa-scale' /> SCALE
</Button>
{this.canClusterScale() ? (
<Button onClick={this.showScalingModal}>
<i className='fa fa-scale' /> SCALE
</Button>
) : (
undefined
)}
) : (
undefined
)}

{this.canClusterUpgrade() ? (
<Button onClick={this.showUpgradeModal}>
<i className='fa fa-version-upgrade' /> UPGRADE
</Button>
) : (
undefined
)}
</div>
<div className='pull-right btn-group visible-lg-block'>
<Button onClick={this.accessCluster}>
<i className='fa fa-start' /> GET STARTED
{this.canClusterUpgrade() ? (
<Button onClick={this.showUpgradeModal}>
<i className='fa fa-version-upgrade' /> UPGRADE
</Button>
{this.canClusterScale() ? (
<Button onClick={this.showScalingModal}>
<i className='fa fa-scale' /> SCALE
</Button>
) : (
undefined
)}
) : (
undefined
)}
</div>
<div className='pull-right btn-group visible-lg-block'>
<Button onClick={this.accessCluster}>
<i className='fa fa-start' /> GET STARTED
</Button>
{this.canClusterScale() ? (
<Button onClick={this.showScalingModal}>
<i className='fa fa-scale' /> SCALE
</Button>
) : (
undefined
)}

{this.canClusterUpgrade() ? (
<Button onClick={this.showUpgradeModal}>
<i className='fa fa-version-upgrade' /> UPGRADE
</Button>
) : (
undefined
)}
</div>
{this.canClusterUpgrade() ? (
<Button onClick={this.showUpgradeModal}>
<i className='fa fa-version-upgrade' /> UPGRADE
</Button>
) : (
undefined
)}
</div>
</div>
</div>
<div>
<ClusterDetailTable
canClusterUpgrade={this.canClusterUpgrade()}
showUpgradeModal={this.showUpgradeModal}
cluster={this.props.cluster}
provider={this.props.provider}
credentials={this.props.credentials}
release={this.props.release}
/>

{this.props.release && (
<ClusterApps release={this.props.release} />
)}

<ClusterKeyPairs cluster={this.props.cluster} />

<div className='row section cluster_delete col-12'>
<div className='row'>
<h3 className='table-label'>Delete This Cluster</h3>
</div>
<div className='row'>
<p>
All workloads on this cluster will be terminated. Data
stored on the worker nodes will be lost. There is no way
to undo this action.
</p>
<Button
bsStyle='danger'
onClick={this.showDeleteClusterModal.bind(
this,
this.props.cluster
<div className='row'>
<div className='col-12'>
<Tabs
justify
animation={false}
defaultActiveKey={1}
id='tabs'
>
<Tab eventKey={1} title='General'>
<ClusterDetailTable
canClusterUpgrade={this.canClusterUpgrade()}
showUpgradeModal={this.showUpgradeModal}
cluster={this.props.cluster}
provider={this.props.provider}
credentials={this.props.credentials}
release={this.props.release}
/>

<div className='row section col-12'>
<h3 className='table-label'>
Key Pairs and Managed Services are gone?
</h3>
<p>
No, we just moved them into separate tabs above to
clean up a bit.
</p>
</div>

<div className='row section cluster_delete col-12'>
<div className='row'>
<h3 className='table-label'>Delete This Cluster</h3>
</div>
<div className='row'>
<p>
All workloads on this cluster will be terminated.
Data stored on the worker nodes will be lost. There
is no way to undo this action.
</p>
<Button
bsStyle='danger'
onClick={this.showDeleteClusterModal.bind(
this,
this.props.cluster
)}
>
<i className='fa fa-delete' /> Delete Cluster
</Button>
</div>
</div>
</Tab>
<Tab eventKey={2} title='Key Pairs'>
<ClusterKeyPairs cluster={this.props.cluster} />
</Tab>
<Tab eventKey={3} title='Managed Services'>
{this.props.release && (
<ClusterApps release={this.props.release} />
)}
>
<i className='fa fa-delete' /> Delete Cluster
</Button>
</div>
</Tab>
</Tabs>
</div>
<ScaleClusterModal
</div>

<ScaleClusterModal
ref={s => {
this.scaleClusterModal = s;
}}
cluster={this.props.cluster}
provider={this.props.provider}
/>

{this.props.targetRelease ? (
<UpgradeClusterModal
ref={s => {
this.scaleClusterModal = s;
this.upgradeClusterModal = s;
}}
cluster={this.props.cluster}
provider={this.props.provider}
release={this.props.release}
targetRelease={this.props.targetRelease}
/>

{this.props.targetRelease ? (
<UpgradeClusterModal
ref={s => {
this.upgradeClusterModal = s;
}}
cluster={this.props.cluster}
release={this.props.release}
targetRelease={this.props.targetRelease}
/>
) : (
undefined
)}
</div>
) : (
undefined
)}
</div>
</DocumentTitle>
) : (
Expand Down
17 changes: 17 additions & 0 deletions src/styles/_base.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,23 @@ div.tooltip-inner
opacity: 1.0
background-color: transparent

.nav-tabs > li > a
text-decoration: none

&:hover
background-color: rgba(255, 255, 255, 0.2)
color: #fff

.nav-tabs
margin-bottom: 20px

.nav-tabs > li.active > a
background-color: $darkblue
color: #fff
&:hover, &:focus
background-color: $darkblue
color: #fff

.beta-tag
font-size: 0.9em
text-transform: uppercase
Expand Down
8 changes: 4 additions & 4 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2298,10 +2298,10 @@ connect@^3.6.6:
parseurl "~1.3.2"
utils-merge "1.0.1"

connected-react-router@6.3.1:
version "6.3.1"
resolved "https://registry.yarnpkg.com/connected-react-router/-/connected-react-router-6.3.1.tgz#b68e505cca553ce9b6a179d4166cf43b948c85bf"
integrity sha512-nhuQiLOAQlCgkCypGSUhycgaqqTh2IUwVFvzw2y13v8JqB92yTk3yeAKG6X1b0IcD7S4gQizYbjgejf7DJjbyw==
connected-react-router@6.3.2:
version "6.3.2"
resolved "https://registry.yarnpkg.com/connected-react-router/-/connected-react-router-6.3.2.tgz#8c90b77f1d7b783608cd50e4f69bf60e47265425"
integrity sha512-YxrAfMExl/OBsi+ojA4ywZeC7cmQ52MnZ4bhzqLhhjuOiXcQogC4kW0kodouXAXrXDovb2l3yEhDfpH99/wYcw==
dependencies:
immutable "^3.8.1"
seamless-immutable "^7.1.3"
Expand Down

0 comments on commit 5a62aab

Please sign in to comment.