Merge pull request #4261 from vibratious/4208-refactor-nextwork-domain

Refactor the Network domain to match the proposed architecture - Closes #4208

packages/views/screens/managers/monitor/network/map.js → packages/network/map/index.js

@@ -3,7 +3,7 @@ import L from 'leaflet';
 import 'leaflet.markercluster/dist/leaflet.markercluster';
 import markerIcon from '@setup/react/assets/images/marker.svg';
 import mapboxWatermarkImage from '@setup/react/assets/images/mapbox.png';
-import styles from './network.css';
+import styles from './map.css';
 
 const mapOptions = {
   minZoom: 2,

packages/network/map/map.css

@@ -0,0 +1,53 @@
+.mapWrapper {
+  padding: 0 !important;
+  margin-bottom: 15px;
+  min-height: 0 !important;
+}
+
+.map {
+  width: 100%;
+  height: 285px;
+  box-sizing: border-box;
+  position: relative;
+  z-index: 1;
+
+  & .wrapper {
+    width: 100%;
+    height: 100%;
+    background-color: var(--color-platinum);
+    border-radius: var(--border-radius-box);
+    overflow: hidden;
+
+    & > div {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+:global .mapboxWatermark {
+  width: 40px;
+  margin-bottom: -2px;
+}
+
+:global .markerCluster {
+  display: block;
+  width: 42px;
+  height: 42px;
+  line-height: 42px;
+  border: 0;
+  background-image: url('../../../setup/react/assets/images/marker-group.svg');
+  text-align: center;
+  color: var(--color-strong-mystic);
+  font-size: 13px;
+}
+
+:global .leaflet-marker-icon {
+  border: 0;
+  background: transparent;
+}
+
+:global .leaflet-bar {
+  box-shadow: none !important;
+  border: 0 !important;
+}

packages/network/nodesList/manager/index.js

@@ -0,0 +1,29 @@
+import { compose } from 'redux';
+import { getPeers } from "@network/utilities/api";
+import withData from "@common/utilities/withData";
+import { DEFAULT_LIMIT } from '@views/configuration';
+import { withTranslation } from "react-i18next";
+import withLocalSort from "@common/utilities/withLocalSort";
+import { sortByVersion } from '../../utilities/helpers';
+import NodeList from "./manager";
+import { tokenMap } from '@token/configuration/tokens';
+
+export default compose(
+  withData({
+    peers: {
+      apiUtil: (network, params) => getPeers({ network, params }, tokenMap.LSK.key),
+      getApiParams: () => ({
+        limit: DEFAULT_LIMIT,
+      }),
+      defaultData: [],
+      autoload: true,
+      transformResponse: (response, peers, urlSearchParams) => (
+        urlSearchParams.offset
+          ? [...peers, ...response.data]
+          : response.data
+      ),
+    },
+  }),
+  withLocalSort('peers', 'height:desc', { networkVersion: sortByVersion }),
+  withTranslation(),
+)(NodeList);

packages/network/nodesList/manager/manager.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import Box from '@basics/box';
+import BoxContent from '@basics/box/content';
+import Table from '@basics/table';
+import styles from './nodeList.css';
+import header from './tableHeader';
+import Map from '../../map';
+import PeerRow from '../row';
+
+export const NodeList = ({
+    peers, t, changeSort, sort,
+  }) => {
+    /* istanbul ignore next */
+    const handleLoadMore = () => {
+      peers.loadData({ offset: peers.data.length });
+    };
+    const canLoadMore = peers.meta ? peers.data.length < peers.meta.total : false;
+
+    return (
+      <>
+        <Box className="map-box">
+          <BoxContent className={styles.mapWrapper}>
+            <Map peers={peers.data} />
+          </BoxContent>
+        </Box>
+        <Box main isLoading={peers.isLoading} className="peers-box">
+          <BoxContent className={styles.content}>
+            <Table
+              data={peers.data}
+              isLoading={peers.isLoading}
+              row={PeerRow}
+              loadData={handleLoadMore}
+              header={header(changeSort, t)}
+              currentSort={sort}
+              error={peers.error}
+              canLoadMore={canLoadMore}
+            />
+          </BoxContent>
+        </Box>
+      </>
+    );
+  };
+
+  export default NodeList;

packages/network/nodesList/manager/managers.test.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import NodeList from "./manager";
+import peers from '@tests/constants/peers';
+
+describe('Network Monitor Page', () => {
+  const loadData = jest.fn();
+  const clearData = jest.fn();
+  const urlSearchParams = {};
+  const emptyPeers = {
+    isLoading: false,
+    data: [],
+    loadData,
+    clearData,
+    urlSearchParams,
+  };
+  const fullPeers = {
+    isLoading: false,
+    data: peers,
+    meta: { total: peers.length },
+    loadData,
+    clearData,
+    urlSearchParams,
+  };
+  const t = key => key;
+  const lodingProps = {
+    t,
+    peers: {
+      isLoading: true,
+      data: [],
+      meta: {},
+      loadData,
+      clearData,
+      urlSearchParams,
+    },
+  };
+  it('renders the empty state if no peers passed', () => {
+    const wrapper = mount(<NodeList {...{ t, peers: emptyPeers }} />);
+    expect(wrapper.find('.empty-state')).toHaveLength(1);
+  });
+
+  it('shows loading overlay while the API call is being processed', () => {
+    const wrapper = shallow(<NodeList {...lodingProps} />);
+    expect(wrapper.html().match(/loadingOverlay/)).toHaveLength(1);
+  });
+
+  it('renders 20 peers', () => {
+    const wrapper = shallow(<NodeList {...{ t, peers: fullPeers }} />);
+    expect(wrapper.html().match(/peer-row/gm)).toHaveLength(20);
+  });
+});

packages/network/nodesList/manager/nodeList.css

@@ -0,0 +1,65 @@
+.content {
+  padding: 0 !important;
+}
+
+.contentHeader {
+  display: inline-block;
+}
+
+.height {
+  padding-right: 20px;
+}
+
+.mapWrapper {
+  padding: 0 !important;
+  margin-bottom: 15px;
+  min-height: 0 !important;
+}
+
+.map {
+  width: 100%;
+  height: 285px;
+  box-sizing: border-box;
+  position: relative;
+  z-index: 1;
+
+  & .wrapper {
+    width: 100%;
+    height: 100%;
+    background-color: var(--color-platinum);
+    border-radius: var(--border-radius-box);
+    overflow: hidden;
+
+    & > div {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+:global .mapboxWatermark {
+  width: 40px;
+  margin-bottom: -2px;
+}
+
+:global .markerCluster {
+  display: block;
+  width: 42px;
+  height: 42px;
+  line-height: 42px;
+  border: 0;
+  background-image: url('../../../../setup/react/assets/images/marker-group.svg');
+  text-align: center;
+  color: var(--color-strong-mystic);
+  font-size: 13px;
+}
+
+:global .leaflet-marker-icon {
+  border: 0;
+  background: transparent;
+}
+
+:global .leaflet-bar {
+  box-shadow: none !important;
+  border: 0 !important;
+}

packages/views/screens/managers/monitor/network/tableHeader.js → packages/network/nodesList/manager/tableHeader.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import grid from 'flexboxgrid/dist/flexboxgrid.css';
-import styles from './network.css';
+import styles from './nodeList.css';
 
 export default (changeSort, t) => ([
   {

packages/views/screens/managers/monitor/network/flag.css → packages/network/nodesList/row/flag.css

@@ -12,7 +12,7 @@
 
 .sprite {
   position: relative;
-  background-image: url(../../../../../../setup/react/assets/images/flags.png);
+  background-image: url(../../../../setup/react/assets/images/flags.png);
   background-repeat: no-repeat;
   display: block;
   width: 64px;

packages/views/screens/managers/monitor/network/peerRow.js → packages/network/nodesList/row/index.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import grid from 'flexboxgrid/dist/flexboxgrid.css';
-import styles from './network.css';
 import Flag from './flag';
 
 const PeerRow = ({ data, className }) => (
   <div className={`${grid.row} ${className} peer-row`}>
-    <span className={`${grid['col-xs-3']} ${styles.ip}`}>
+    <span className={grid['col-xs-3']}>
       {data.ip}
     </span>
     <span className={grid['col-xs-2']}>
@@ -14,7 +13,7 @@ const PeerRow = ({ data, className }) => (
     <span className={grid['col-xs-2']}>
       <Flag code={data.location?.countryCode} />
     </span>
-    <span className={grid['col-xs-2']}>
+    <span className={`${grid['col-xs-2']} network-span`}>
       {data.networkVersion}
     </span>
     <span className={grid['col-xs-3']}>

packages/network/nodesList/row/index.test.js

@@ -0,0 +1,51 @@
+import { act } from 'react-dom/test-utils';
+import React from 'react';
+import { mount } from 'enzyme';
+import Row from './index';
+
+describe('Peer Row', () => {
+  const props = {
+    data: {
+      ip: '192.168.0.1',
+      height: 12000,
+      location: {
+        countryCode: 49,
+      },
+      networkVersion: '3.0',
+      port: 8080,
+    },
+    className: 'customTestClassNames',
+  };
+
+  it('renders the data properly', () => {
+    const wrapper = mount(<Row {...props} />);
+    expect(wrapper.find('span').at(0)).toHaveText('192.168.0.1');
+    expect(wrapper.find('span').at(1)).toHaveText('8080');
+    expect(wrapper.find('.network-span')).toHaveText('3.0');
+  });
+
+  it('does not re-render if height or ip do not change', () => {
+    const wrapper = mount(<Row {...props} />);
+    expect(wrapper.find('span').at(0)).toHaveText('192.168.0.1');
+    wrapper.setProps({
+      data: {
+        ...props.data,
+        networkVersion: '4.0',
+      },
+    });
+    act(() => {
+      wrapper.update();
+    });
+    expect(wrapper.find('.network-span').at(0)).toHaveText('3.0');
+    wrapper.setProps({
+      data: {
+        ...props.data,
+        ip: '192.168.0.2',
+      },
+    });
+    act(() => {
+      wrapper.update();
+    });
+    expect(wrapper.find('span').at(0)).toHaveText('192.168.0.2');
+  });
+});

packages/network/statistics/index.js

@@ -0,0 +1,18 @@
+import { compose } from 'redux';
+import withData from "@common/utilities/withData";
+import { withTranslation } from "react-i18next";
+import Statistics from './statistics';
+import { getNetworkStatistics } from '@network/utilities/api';
+import { tokenMap } from '@token/configuration/tokens';
+
+export default compose(
+  withData({
+    networkStatistics: {
+      apiUtil: network => getNetworkStatistics({ network }, tokenMap.LSK.key),
+      defaultData: {},
+      autoload: true,
+      transformResponse: response => response.data,
+    },
+  }),
+  withTranslation(),
+  )(Statistics);

packages/views/screens/managers/monitor/network/overview/overview.css → packages/network/statistics/statistics.css

@@ -1,4 +1,4 @@
-@import '../../../../../../../setup/react/app/mixins.css';
+@import '../../../setup/react/app/mixins.css';
 
 .wrapper {
   & .content {