Merge branches 'w/2.9/improvement/1815-move-components-to-core-ui' an…

…d 'q/3150/2.8/improvement/1815-move-components-to-core-ui' into tmp/octopus/q/2.9
scality · Mar 4, 2021 · 1d46f2a · 1d46f2a
3 parents f32c19e + ab5132e + 37542f4
commit 1d46f2a
Show file tree

Hide file tree

Showing 14 changed files with 63 additions and 231 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -5,7 +5,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.7.2",
     "@kubernetes/client-node": "github:scality/kubernetes-client-javascript.git#browser-0.10.2-63-g579d066",
-    "@scality/core-ui": "github:scality/core-ui.git#v0.10.2",
+    "@scality/core-ui": "github:scality/core-ui.git#v0.11.0",
     "axios": "^0.21.1",
     "formik": "2.2.5",
     "jest-environment-jsdom-sixteen": "^1.0.3",

diff --git a/ui/src/components/EmptyState.js b/ui/src/components/EmptyState.js
diff --git a/ui/src/components/Loader.js b/ui/src/components/Loader.js
diff --git a/ui/src/components/NodeListTable.js b/ui/src/components/NodeListTable.js
@@ -13,7 +13,7 @@ import {
 import { useQuery } from '../services/utils';
 import { fontSize, padding } from '@scality/core-ui/dist/style/theme';
 import CircleStatus from './CircleStatus';
-import { Button } from '@scality/core-ui';
+import { Button, EmptyTable } from '@scality/core-ui';
 import { intl } from '../translations/IntlGlobalProvider';
 import { compareHealth, useTableSortURLSync } from '../services/utils';
 import {
@@ -359,24 +359,8 @@ function Table({ columns, data, rowClicked, theme, selectedNodeName }) {
         </thead>
         <Body {...getTableBodyProps()}>
           {rows.length === 0 ? (
-            <HeadRow
-              style={{
-                width: '100%',
-                paddingTop: padding.base,
-                height: '60px',
-              }}
-            >
-              <td
-                style={{
-                  textAlign: 'center',
-                  background: theme.brand.primary,
-                }}
-              >
-                {intl.translate('no_node_found')}
-              </td>
-            </HeadRow>
+            <EmptyTable>{intl.translate('no_node_found')}</EmptyTable>
           ) : null}
-
           {rows.map((row, i) => {
             prepareRow(row);
             return (

diff --git a/ui/src/components/NodePageAlertsTab.js b/ui/src/components/NodePageAlertsTab.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { FormattedDate, FormattedTime } from 'react-intl';
 import styled from 'styled-components';
-import { Chips } from '@scality/core-ui';
+import { Chips, EmptyTable } from '@scality/core-ui';
 import {
   fontSize,
   padding,
@@ -138,22 +138,7 @@ const NodePageAlertsTab = (props) => {
         </thead>
         <Body {...getTableBodyProps()}>
           {activeAlertListData.length === 0 ? (
-            <HeadRow
-              style={{
-                width: '100%',
-                paddingTop: padding.base,
-                height: '60px',
-              }}
-            >
-              <td
-                style={{
-                  textAlign: 'center',
-                  background: theme.brand.primaryDark1,
-                }}
-              >
-                No Active Alert
-              </td>
-            </HeadRow>
+            <EmptyTable>{intl.translate('no_active_alerts')}</EmptyTable>
           ) : null}
           {rows.map((row, i) => {
             prepareRow(row);

diff --git a/ui/src/components/NodePartitionTable.js b/ui/src/components/NodePartitionTable.js
@@ -3,7 +3,7 @@ import React, { useCallback } from 'react';
 import styled, { useTheme } from 'styled-components';
 import { useTable } from 'react-table';
 import { useQuery } from 'react-query';
-import { ProgressBar, Loader } from '@scality/core-ui';
+import { ProgressBar, Loader, EmptyTable } from '@scality/core-ui';
 import { fontSize, padding } from '@scality/core-ui/dist/style/theme';
 import {
   queryNodeFSUsage,
@@ -156,21 +156,7 @@ const NodePartitionTable = ({ instanceIP }: { instanceIP: string }) => {
         </thead>
         <Body {...getTableBodyProps()}>
           {status === 'success' && partitions.length === 0 && (
-            <HeadRow
-              style={{
-                width: '100%',
-                paddingTop: padding.base,
-                height: '60px',
-              }}
-            >
-              <td
-                style={{
-                  textAlign: 'center',
-                }}
-              >
-                {intl.translate('no_system_partition')}
-              </td>
-            </HeadRow>
+            <EmptyTable>{intl.translate('no_system_partition')}</EmptyTable>
           )}
           {status === 'loading' && (
             <HeadRow

diff --git a/ui/src/components/VolumeAlertsTab.js b/ui/src/components/VolumeAlertsTab.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 import { FormattedDate, FormattedTime } from 'react-intl';
 import { useLocation } from 'react-router';
 import styled from 'styled-components';
@@ -9,7 +8,7 @@ import {
   fontWeight,
 } from '@scality/core-ui/dist/style/theme';
 import ActiveAlertsFilters from './ActiveAlertsFilters';
-import { Chips } from '@scality/core-ui';
+import { Chips, EmptyTable } from '@scality/core-ui';
 import { useTable } from 'react-table';
 import { intl } from '../translations/IntlGlobalProvider';
 import { VolumeTab } from './style/CommonLayoutStyle';
@@ -90,7 +89,6 @@ const Body = styled.tbody`
 const ActiveAlertsCard = (props) => {
   const { alertlist, PVCName } = props;
   const location = useLocation();
-  const theme = useSelector((state) => state.config.theme);
 
   const query = new URLSearchParams(location.search);
   const selectedFilter = query.get('severity');
@@ -145,40 +143,10 @@ const ActiveAlertsCard = (props) => {
 
         <Body {...getTableBodyProps()}>
           {!PVCName && (
-            <HeadRow
-              style={{
-                width: '100%',
-                paddingTop: padding.base,
-                height: '60px',
-              }}
-            >
-              <td
-                style={{
-                  textAlign: 'center',
-                  background: theme.brand.primary,
-                }}
-              >
-                {intl.translate('volume_is_not_bound')}
-              </td>
-            </HeadRow>
+            <EmptyTable> {intl.translate('volume_is_not_bound')}</EmptyTable>
           )}
           {PVCName && data?.length === 0 && (
-            <HeadRow
-              style={{
-                width: '100%',
-                paddingTop: padding.base,
-                height: '60px',
-              }}
-            >
-              <td
-                style={{
-                  textAlign: 'center',
-                  background: theme.brand.primary,
-                }}
-              >
-                {intl.translate('no_active_alerts')}
-              </td>
-            </HeadRow>
+            <EmptyTable>{intl.translate('no_active_alerts')}</EmptyTable>
           )}
           {rows?.map((row, i) => {
             prepareRow(row);