Monitoring feature

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

package.json

@@ -56,6 +56,7 @@
     "electron-window-state": "5.0.3",
     "fs-extra": "11.1.0",
     "lodash": "4.17.21",
+    "react-json-view": "^1.21.3",
     "semver": "7.7.2",
     "shell-env": "3.0.1",
     "unzipper": "0.12.3",

src/__mocks__/fileService.js

@@ -0,0 +1,9 @@
+// __mocks__/fileService.js
+
+module.exports = {
+  fileService: {
+    existsSync: jest.fn(() => false),
+    readFileSync: jest.fn(() => '{}'),
+    copyFileSync: jest.fn(),
+  },
+};

src/components/common/NetworkMonitoringButton.spec.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Status } from 'shared/types';
+import { getNetwork, renderWithProviders } from 'utils/tests';
+import NetworkMonitoringButton from './NetworkMonitoringButton';
+import { fireEvent } from '@testing-library/react';
+import { initChartFromNetwork } from 'utils/chart';
+
+describe('NetworkMonitoringButton', () => {
+  let unmount: () => void;
+
+  const renderComponent = () => {
+    const network = getNetwork(1, 'test network', Status.Started);
+    const initialState = {
+      network: {
+        networks: [network],
+      },
+      designer: {
+        activeId: 1,
+        allCharts: {
+          1: initChartFromNetwork(network),
+        },
+      },
+      modals: {
+        networkMonitoring: { visible: false },
+      },
+    };
+    const cmp = <NetworkMonitoringButton networkId={network.id} />;
+    const result = renderWithProviders(cmp, { initialState });
+    unmount = result.unmount;
+    return result;
+  };
+
+  afterEach(() => unmount());
+
+  it('should render the button', () => {
+    const { getByRole } = renderComponent();
+    const btn = getByRole('monitor-network');
+    expect(btn).toBeInTheDocument();
+  });
+
+  it('should open the modal on click', () => {
+    const { getByRole, store } = renderComponent();
+    const btn = getByRole('monitor-network');
+    fireEvent.click(btn);
+    expect(store.getState().modals.networkMonitoring.visible).toBe(true);
+  });
+});

src/components/common/NetworkMonitoringButton.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { EyeOutlined } from '@ant-design/icons';
+import styled from '@emotion/styled';
+import { Button, Tooltip } from 'antd';
+import { usePrefixedTranslation } from 'hooks';
+import { useStoreActions } from 'store';
+
+const Styled = {
+  Button: styled(Button)`
+    margin-left: 8px;
+  `,
+};
+
+interface Props {
+  networkId: number;
+}
+
+const NetworkMonitoringButton: React.FC<Props> = ({ networkId }) => {
+  const { l } = usePrefixedTranslation('cmps.network.NetworkActions');
+  const { showNetworkMonitoring } = useStoreActions(s => s.modals);
+
+  const showModal = async () => {
+    await showNetworkMonitoring({ networkId });
+  };
+
+  return (
+    <Tooltip title={l('monitorBtn') || 'Monitor Network'}>
+      <Styled.Button onClick={showModal} role="monitor-network">
+        <EyeOutlined />
+      </Styled.Button>
+    </Tooltip>
+  );
+};
+
+export default NetworkMonitoringButton;