[Task] Modify the position of add button

src/locales/en-US/basic.js

@@ -5,6 +5,7 @@ export default {
   'container': 'container',
   'network': 'network',
   'namespace': 'namespace',
+  'deployment': 'deployment',
   'ovs': 'ovs',
   'dpdk': 'dpdk',
   'service': 'service',

src/routes/Application/Deployment/index.tsx

@@ -296,16 +296,20 @@ class Deployment extends React.Component<DeploymentProps, DeploymentState> {
     const { currentDeployment, currentPod } = this.state;
     return (
       <div>
-        <Card>
+        <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="Deployment"
+              title={<FormattedMessage id="deployment" />}
               width={720}
               closable={false}
               onClose={this.hideMoreDeployment}

src/routes/Application/Deployment/styles.module.scss

@@ -1,5 +1,5 @@
 
-@import '../../../styles/variables';
+@import '../../../styles/global';
 $tag-gutter: 8px;
 
 .column {
@@ -41,12 +41,6 @@ $tag-gutter: 8px;
   padding-left: $padding-xs;
 }
 
-.table {
-  th, td {
-    padding: $padding-md !important;
-  }
-}
-
 .contentSection{
   padding-bottom: $padding-md;
 }

src/routes/Application/Namespace/index.tsx

@@ -90,21 +90,21 @@ class Namespace extends React.Component<NamespaceProps, NamespaceState> {
     ];
     return (
       <div>
-        <Card>
+        <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}

src/routes/Application/Namespace/styles.module.scss

@@ -1,5 +1,4 @@
-@import '../../../styles/variables';
-
+@import '../../../styles/global';
 $tag-gutter: 8px;
 
 .content {
@@ -11,12 +10,6 @@ $tag-gutter: 8px;
   display: flex;
 }
 
-.table {
-  th, td {
-    padding: $padding-md !important;
-  }
-}
-
 .column {
   :global {
     .title {

src/routes/Application/Pod/index.tsx

@@ -177,7 +177,7 @@ class Pod extends React.Component<PodProps, PodState> {
     ];
     return (
       <div>
-        <Card>
+        <Card title={<FormattedMessage id="pod" />}>
           <InputGroup compact={true}>
             <Select
               style={{ width: '15%' }}

src/routes/Application/Pod/styles.module.scss

@@ -1,6 +1,5 @@
 
-@import '../../../styles/variables';
-$tag-gutter: 8px;
+@import '../../../styles/global';$tag-gutter: 8px;
 
 .column {
   flex: 2;
@@ -50,12 +49,6 @@ $tag-gutter: 8px;
   padding-left: $padding-xs;
 }
 
-.table {
-  th, td {
-    padding: $padding-md !important;
-  }
-}
-
 .contentSection{
    padding-bottom: $padding-md;
  }

src/routes/Application/Service/index.tsx

@@ -137,20 +137,20 @@ class Service extends React.Component<ServiceProps, ServiceState> {
     ];
     return (
       <div>
-        <Card>
+        <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}

src/routes/Application/Service/styles.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables';
+@import '../../../styles/global';
 
 $tag-gutter: 8px;
 
@@ -29,12 +29,6 @@ $tag-gutter: 8px;
   }
 }
 
-.table {
-  th, td {
-    padding: $padding-md !important;
-  }
-}
-
 .leading {
   margin-bottom: 6px;
   :global(.title) {

src/routes/Cluster/Network/index.tsx

@@ -155,20 +155,20 @@ class Network extends React.Component<NetworkProps, NetworkState> {
     ];
     return (
       <div>
-        <Card>
+        <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="action.add" />
-          </Button>
           <NetworkFrom
             visible={this.state.isCreating}
             isLoading={this.props.isLoading}

src/routes/Cluster/Network/styles.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables';
+@import '../../../styles/global';
 
 $tag-gutter: 8px;
 
@@ -63,12 +63,6 @@ $tag-gutter: 8px;
   }
 }
 
-.table {
-  th, td {
-    padding: $padding-md !important;
-  }
-}
-
 .tags {
   margin-bottom: -$tag-gutter;
 }

src/routes/Cluster/Node/index.tsx

@@ -486,7 +486,7 @@ class Node extends React.Component<NodeProps, NodeState> {
     ];
     return (
       <div>
-        <Card>
+        <Card title={<FormattedMessage id="node" />}>
           <Table
             className={styles.table}
             columns={columns}
@@ -495,7 +495,7 @@ class Node extends React.Component<NodeProps, NodeState> {
           />
           {this.props.nodes.hasOwnProperty(currentNode) && (
             <Drawer
-              title="Node"
+              title={<FormattedMessage id="node" />}
               width={720}
               placement="right"
               closable={false}

src/routes/Cluster/Node/styles.module.scss

@@ -1,5 +1,6 @@
 
-@import '../../../styles/variables';
+@import '../../../styles/global';
+
 $tag-gutter: 8px;
 
 .column {
@@ -46,12 +47,6 @@ $tag-gutter: 8px;
   margin-bottom: -$tag-gutter;
 }
 
-.table {
-  th, td {
-    padding: $padding-md !important;
-  }
-}
-
 .label {
   margin-bottom: $tag-gutter;
 }

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>

src/routes/Storage/styles.module.scss

@@ -1,3 +1,5 @@
+@import '../../../styles/global';
+
 .card {
   margin-bottom: 2em;
 }

src/styles/_global.scss

@@ -1,3 +1,12 @@
+
+@import './variables';
+
 .ant-card-head-wrapper {
   align-items: center;
 }
+
+.table {
+  th, td {
+    padding: $padding-md !important;
+  }
+}