move add button

linkernetworks · Sep 6, 2018 · ae5b631 · ae5b631
1 parent b0c5ea0
commit ae5b631
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 34 deletions.
diff --git a/src/locales/en-US/basic.js b/src/locales/en-US/basic.js
@@ -3,6 +3,8 @@ export default {
   'pod': 'pod',
   'container': 'container',
   'network': 'network',
+  'namespace': 'namespace',
+  'deployment': 'deployment',
   'ovs': 'ovs',
   'dpdk': 'dpdk',
   'service': 'service',

diff --git a/src/routes/Application/Deployment/index.tsx b/src/routes/Application/Deployment/index.tsx
@@ -294,13 +294,17 @@ class Deployment extends React.Component<DeploymentProps, DeploymentState> {
     const { currentDeployment, currentPod } = this.state;
     return (
       <div>
-        <Card title={<FormattedMessage id="deployment" />}>
+        <Card
+          title={<FormattedMessage id="deployment" />}
+          extra={
+            <Link className={styles.action} to="/application/deployment/create">
+              <Button>
+                <Icon type="plus" /> <FormattedMessage id="deployment.add" />
+              </Button>
+            </Link>
+          }
+        >
           {this.renderTable()}
-          <Link className={styles.action} to="/application/deployment/create">
-            <Button type="dashed" className={styles.add}>
-              <Icon type="plus" /> <FormattedMessage id="deployment.add" />
-            </Button>
-          </Link>
           {deployments.hasOwnProperty(currentDeployment) && (
             <Drawer
               title={<FormattedMessage id="deployment" />}

diff --git a/src/routes/Application/Namespace/index.tsx b/src/routes/Application/Namespace/index.tsx
@@ -90,21 +90,21 @@ class Namespace extends React.Component<NamespaceProps, NamespaceState> {
     ];
     return (
       <div>
-        <Card title={<FormattedMessage id="namespace" />}>
+        <Card
+          title={<FormattedMessage id="namespace" />}
+          extra={
+            <Button onClick={this.showCreate}>
+              <Icon type="plus" /> <FormattedMessage id="namespace.add" />
+            </Button>
+          }
+        >
           <Table
             className={styles.table}
             columns={columns}
             dataSource={namespaces}
             size="small"
             bordered={false}
           />
-          <Button
-            type="dashed"
-            className={styles.add}
-            onClick={this.showCreate}
-          >
-            <Icon type="plus" /> <FormattedMessage id="namespace.add" />
-          </Button>
           <NamespaceForm
             namespaces={namespaces}
             visible={this.state.visibleModal}

diff --git a/src/routes/Application/Service/index.tsx b/src/routes/Application/Service/index.tsx
@@ -137,20 +137,20 @@ class Service extends React.Component<ServiceProps, ServiceState> {
     ];
     return (
       <div>
-        <Card title={<FormattedMessage id="service" />}>
+        <Card
+          title={<FormattedMessage id="service" />}
+          extra={
+            <Button onClick={this.showCreate}>
+              <Icon type="plus" /> <FormattedMessage id="service.add" />
+            </Button>
+          }
+        >
           <Table
             className={styles.table}
             columns={columns}
             dataSource={services}
             size="small"
           />
-          <Button
-            type="dashed"
-            className={styles.add}
-            onClick={this.showCreate}
-          >
-            <Icon type="plus" /> <FormattedMessage id="service.add" />
-          </Button>
           <ServiceForm
             services={services}
             visible={this.state.visibleModal}

diff --git a/src/routes/Cluster/Network/index.tsx b/src/routes/Cluster/Network/index.tsx
@@ -155,20 +155,20 @@ class Network extends React.Component<NetworkProps, NetworkState> {
     ];
     return (
       <div>
-        <Card title={<FormattedMessage id="network" />}>
+        <Card
+          title={<FormattedMessage id="network" />}
+          extra={
+            <Button onClick={() => this.setState({ isCreating: true })}>
+              <Icon type="plus" /> <FormattedMessage id="network.add" />
+            </Button>
+          }
+        >
           <Table
             className={styles.table}
             columns={columns}
             dataSource={networks}
             size="small"
           />
-          <Button
-            type="dashed"
-            className={styles.add}
-            onClick={() => this.setState({ isCreating: true })}
-          >
-            <Icon type="plus" /> <FormattedMessage id="network.add" />
-          </Button>
           <NetworkFrom
             visible={this.state.isCreating}
             isLoading={this.props.isLoading}

diff --git a/src/routes/Storage/index.tsx b/src/routes/Storage/index.tsx
@@ -285,10 +285,10 @@ class Storage extends React.PureComponent<StorageProps, StorageState> {
     }
   };
 
-  public renderTableFooter = () => {
+  public renderTableHeader = () => {
     const { tabKey } = this.state;
     return (
-      <Button type="dashed" className={styles.add} onClick={this.handleAddItem}>
+      <Button onClick={this.handleAddItem}>
         <Icon type="plus" /> <FormattedMessage id={`${tabKey}.add`} />
       </Button>
     );
@@ -320,7 +320,8 @@ class Storage extends React.PureComponent<StorageProps, StorageState> {
               rowKey="id"
               columns={this.storageColumns}
               dataSource={storages.data}
-              footer={this.renderTableFooter}
+              size="small"
+              className={styles.table}
             />
             <StorageForm
               {...storageFields}
@@ -341,7 +342,8 @@ class Storage extends React.PureComponent<StorageProps, StorageState> {
               rowKey="id"
               columns={this.volumeColumns}
               dataSource={volumes.data}
-              footer={this.renderTableFooter}
+              size="small"
+              className={styles.table}
             />
             <VolumeForm
               {...volumeFields}
@@ -373,6 +375,8 @@ class Storage extends React.PureComponent<StorageProps, StorageState> {
           onTabChange={key => {
             this.setState({ tabKey: key });
           }}
+          title={<FormattedMessage id="storage" />}
+          extra={this.renderTableHeader()}
         >
           {this.renderTabContent()}
         </Card>

diff --git a/src/routes/Storage/styles.module.scss b/src/routes/Storage/styles.module.scss
@@ -1,3 +1,5 @@
+@import '../../styles/variables';
+
 .card {
   margin-bottom: 2em;
 }
@@ -6,6 +8,12 @@
   width: 100%;
 }
 
+.table {
+  th, td {
+    padding: $padding-md !important;
+  }
+}
+
 :global {
   .ant-table-footer {
     background: transparent;