feat: add simulation management

Author: Abdulkbk

src/components/designer/Sidebar.tsx

@@ -32,7 +32,7 @@ const Sidebar: React.FC<Props> = ({ network, chart }) => {
       return link && <LinkDetails link={link} network={network} />;
     }
 
-    return <DefaultSidebar />;
+    return <DefaultSidebar network={network} />;
   }, [network, chart.selected, chart.links]);
 
   return <>{cmp}</>;

src/components/designer/default/AddSimulationModal.tsx

@@ -4,13 +4,28 @@ import { useStoreActions } from 'store';
 import { useStoreState } from 'store';
 import { usePrefixedTranslation } from 'hooks';
 import LightningNodeSelect from 'components/common/form/LightningNodeSelect';
-import { Status } from 'shared/types';
+import { LightningNode, Status } from 'shared/types';
 import { Network } from 'types';
+import { useAsyncCallback } from 'react-async-hook';
 
 interface Props {
   network: Network;
 }
 
+interface FormValues {
+  source: string;
+  destination: string;
+  intervalSecs: number;
+  amountMsat: number;
+}
+
+interface SimulationArgs {
+  source: LightningNode;
+  destination: LightningNode;
+  intervalSecs: number;
+  amountMsat: number;
+}
+
 const AddSimulationModal: React.FC<Props> = ({ network }) => {
   const { l } = usePrefixedTranslation('cmps.designer.default.AddSimulationModal');
 
@@ -19,11 +34,41 @@ const AddSimulationModal: React.FC<Props> = ({ network }) => {
   const [form] = Form.useForm();
   const { visible } = useStoreState(s => s.modals.addSimulation);
   const { hideAddSimulation } = useStoreActions(s => s.modals);
+  const { addSimulation } = useStoreActions(s => s.network);
+
+  const { notify } = useStoreActions(s => s.app);
 
   const selectedSource = Form.useWatch<string>('source', form) || '';
   const selectedDestination = Form.useWatch<string>('destination', form) || '';
   const isSameNode = selectedSource === selectedDestination;
 
+  const addSimulationAsync = useAsyncCallback(async (values: FormValues) => {
+    const { lightning } = network.nodes;
+    const source = lightning.find(n => n.name === values.source);
+    const destination = lightning.find(n => n.name === values.destination);
+
+    if (!source || !destination) {
+      notify({ message: l('sourceOrDestinationNotFound') });
+      return;
+    }
+
+    const { intervalSecs, amountMsat } = values;
+    const sim: SimulationArgs = {
+      source,
+      destination,
+      intervalSecs,
+      amountMsat,
+    };
+
+    await addSimulation({
+      networkId: network.id,
+      ...sim,
+      status: Status.Stopped,
+    });
+
+    hideAddSimulation();
+  });
+
   return (
     <Modal
       title={l('title')}
@@ -34,7 +79,9 @@ const AddSimulationModal: React.FC<Props> = ({ network }) => {
       okText={l('createBtn')}
       okButtonProps={{
         disabled: isSameNode,
+        loading: addSimulationAsync.loading,
       }}
+      onOk={form.submit}
     >
       <Form
         form={form}
@@ -47,6 +94,8 @@ const AddSimulationModal: React.FC<Props> = ({ network }) => {
           amountMsat: 1000,
           intervalSecs: 10,
         }}
+        onFinish={addSimulationAsync.execute}
+        disabled={addSimulationAsync.loading}
       >
         {isSameNode && <Alert type="error" message={l('sameNodesWarnMsg')} />}
         <Row gutter={16}>

src/components/designer/default/DefaultSidebar.spec.tsx

@@ -58,7 +58,7 @@ describe('DefaultSidebar Component', () => {
       },
     };
 
-    const result = renderWithProviders(<DefaultSidebar />, {
+    const result = renderWithProviders(<DefaultSidebar network={network} />, {
       initialState,
     });
     return {

src/components/designer/default/DefaultSidebar.tsx

@@ -3,8 +3,13 @@ import { usePrefixedTranslation } from 'hooks';
 import SidebarCard from '../SidebarCard';
 import NetworkDesignerTab from './NetworkDesignerTab';
 import SimulationDesignerTab from './SimulationDesignerTab';
+import { Network } from 'types';
 
-const DefaultSidebar: React.FC = () => {
+interface Props {
+  network: Network;
+}
+
+const DefaultSidebar: React.FC<Props> = ({ network }) => {
   const { l } = usePrefixedTranslation('cmps.designer.default.DefaultSidebar');
   const [activeTab, setActiveTab] = useState('network');
 
@@ -14,7 +19,7 @@ const DefaultSidebar: React.FC = () => {
   ];
   const tabContents: Record<string, ReactNode> = {
     network: <NetworkDesignerTab />,
-    simulation: <SimulationDesignerTab />,
+    simulation: <SimulationDesignerTab network={network} />,
   };
 
   return (

src/components/designer/default/SimulationDesignerTab.tsx

@@ -1,10 +1,24 @@
-import React from 'react';
+import React, { ReactNode, useEffect } from 'react';
 import styled from '@emotion/styled';
 import { usePrefixedTranslation } from 'hooks';
-import { Button, Empty } from 'antd';
-import { Tooltip } from 'antd';
-import { PlusOutlined } from '@ant-design/icons';
-import { useStoreActions } from 'store';
+import { Button, Empty, Modal, Tooltip } from 'antd';
+import {
+  ArrowRightOutlined,
+  DeleteOutlined,
+  PlayCircleOutlined,
+  PlusOutlined,
+  StopOutlined,
+  WarningOutlined,
+} from '@ant-design/icons';
+import { useStoreActions, useStoreState } from 'store';
+import { Network } from 'types';
+import { useAsyncCallback } from 'react-async-hook';
+import { Status } from 'shared/types';
+import { ButtonType } from 'antd/lib/button';
+
+interface Props {
+  network: Network;
+}
 
 const Styled = {
   Title: styled.div`
@@ -14,15 +28,192 @@ const Styled = {
     margin-bottom: 10px;
     font-weight: bold;
   `,
+  Button: styled(Button)`
+    margin-left: 0;
+    margin-top: 20px;
+    width: 100%;
+  `,
+  SimContainer: styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 46px;
+    padding: 10px 15px;
+    margin-top: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 4px;
+    font-weight: bold;
+    &:hover {
+      border: 1px solid rgba(255, 255, 255, 0.3);
+      color: #f7f2f2f2;
+    }
+  `,
+  NodeWrapper: styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    column-gap: 15px;
+    width: 100%;
+  `,
+  DeleteButton: styled(Button)`
+    border: none;
+    height: 100%;
+    color: red;
+    opacity: 0.5;
+    &:hover {
+      opacity: 1;
+    }
+  `,
 };
 
-const SimulationDesignerTab: React.FC = () => {
+const config: {
+  [key: number]: {
+    label: string;
+    type: ButtonType;
+    danger?: boolean;
+    icon: ReactNode;
+  };
+} = {
+  [Status.Starting]: {
+    label: 'Starting',
+    type: 'primary',
+    icon: '',
+  },
+  [Status.Started]: {
+    label: 'Stop',
+    type: 'primary',
+    danger: true,
+    icon: <StopOutlined />,
+  },
+  [Status.Stopping]: {
+    label: 'Stopping',
+    type: 'default',
+    icon: '',
+  },
+  [Status.Stopped]: {
+    label: 'Start',
+    type: 'primary',
+    icon: <PlayCircleOutlined />,
+  },
+  [Status.Error]: {
+    label: 'Restart',
+    type: 'primary',
+    danger: true,
+    icon: <WarningOutlined />,
+  },
+};
+
+const SimulationDesignerTab: React.FC<Props> = ({ network }) => {
   const { l } = usePrefixedTranslation(
     'cmps.designer.default.DefaultSidebar.SimulationDesignerTab',
   );
 
+  // Getting the network from the store makes this component to
+  // re-render when the network is updated (i.e when we add a simulation).
+  const { networks } = useStoreState(s => s.network);
+  const currentNetwork = networks.find(n => n.id === network.id);
+
   const { showAddSimulation } = useStoreActions(s => s.modals);
 
+  const { notify } = useStoreActions(s => s.app);
+
+  const { startSimulation, stopSimulation, removeSimulation } = useStoreActions(
+    s => s.network,
+  );
+
+  const loading =
+    currentNetwork?.simulation?.status === Status.Starting ||
+    currentNetwork?.simulation?.status === Status.Stopping;
+  const started = currentNetwork?.simulation?.status === Status.Started;
+  const { label, type, danger, icon } =
+    config[currentNetwork?.simulation?.status || Status.Stopped];
+
+  const startSimulationAsync = useAsyncCallback(async () => {
+    if (!network.simulation) return;
+    try {
+      await startSimulation({ id: network.simulation.networkId });
+    } catch (error: any) {
+      notify({ message: l('startError'), error });
+    }
+  });
+
+  const stopSimulationAsync = useAsyncCallback(async () => {
+    if (!network.simulation) return;
+    try {
+      await stopSimulation({ id: network.simulation.networkId });
+    } catch (error: any) {
+      notify({ message: l('stopError'), error });
+    }
+  });
+
+  const addSimulation = () => {
+    showAddSimulation({});
+  };
+
+  let modal: any;
+  const showRemoveModal = () => {
+    modal = Modal.confirm({
+      title: l('removeTitle'),
+      content: l('removeDesc'),
+      okText: l('removeBtn'),
+      okType: 'danger',
+      cancelText: l('cancelBtn'),
+      onOk: async () => {
+        try {
+          if (!network.simulation) return;
+          await removeSimulation(network.simulation);
+          notify({ message: l('removeSuccess') });
+        } catch (error: any) {
+          notify({ message: l('removeError'), error: error });
+        }
+      },
+    });
+  };
+
+  // cleanup the modal when the component unmounts
+  useEffect(() => () => modal && modal.destroy(), [modal]);
+
+  let cmp: ReactNode;
+
+  if (network.simulation) {
+    cmp = (
+      <>
+        <Styled.SimContainer>
+          <Styled.NodeWrapper>
+            <span>{network.simulation.source.name}</span>
+            <ArrowRightOutlined />
+            <span>{network.simulation.destination.name}</span>
+          </Styled.NodeWrapper>
+          <Styled.DeleteButton
+            role="remove"
+            icon={<DeleteOutlined />}
+            onClick={showRemoveModal}
+          />
+        </Styled.SimContainer>
+        <Styled.Button
+          key="start"
+          type={type}
+          danger={danger}
+          icon={icon}
+          loading={loading}
+          ghost={started}
+          onClick={started ? stopSimulationAsync.execute : startSimulationAsync.execute}
+        >
+          {l(`primaryBtn${label}`)}
+        </Styled.Button>
+      </>
+    );
+  } else {
+    cmp = (
+      <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={l('emptyMsg')}>
+        <Button type="primary" icon={<PlusOutlined />} onClick={addSimulation}>
+          {l('createBtn')}
+        </Button>
+      </Empty>
+    );
+  }
+
   return (
     <div>
       <Styled.Title>
@@ -31,19 +222,12 @@ const SimulationDesignerTab: React.FC = () => {
           <Button
             type="text"
             icon={<PlusOutlined />}
-            onClick={() => showAddSimulation({})}
+            onClick={addSimulation}
+            disabled={loading || network.simulation !== undefined}
           />
         </Tooltip>
       </Styled.Title>
-      <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={l('emptyMsg')}>
-        <Button
-          type="primary"
-          icon={<PlusOutlined />}
-          onClick={() => showAddSimulation({})}
-        >
-          {l('createBtn')}
-        </Button>
-      </Empty>
+      {cmp}
     </div>
   );
 };