RND-453-scale-for-connectors-from-the-ui

ui_src/src/components/connectorModal/index.js

@@ -143,7 +143,8 @@ const ConnectorModal = ({ open, clickOutside, newConnecor, source }) => {
                 type: formFields?.type?.toLocaleLowerCase(),
                 connector_type: formFields?.connector_type?.toLocaleLowerCase(),
                 settings: modifiedSettings,
-                partitions: [stationState?.stationPartition]
+                partitions: [stationState?.stationPartition],
+                instances: formFields?.instances
             });
             newConnecor(data?.connector, formFields?.connector_type?.toLocaleLowerCase());
         } catch (error) {
@@ -195,9 +196,10 @@ const ConnectorModal = ({ open, clickOutside, newConnecor, source }) => {
                             borderColorType="gray"
                             fontSize="14px"
                             style={{ width: '100%', height: '40px', display: 'flex', alignItems: 'center' }}
-                            min={0}
+                            min={input?.min || 0}
+                            max={input?.max || null}
                             onChange={(e) => {
-                                updateFormSettingsState(input?.name, e);
+                                input?.name === 'instances' ? updateFormState(input?.name, e) : updateFormSettingsState(input?.name, e);
                                 connectorForm.setFieldValue(input?.name, e);
                             }}
                             value={formFields[input?.name]}

ui_src/src/components/connectorScale/index.js

@@ -0,0 +1,102 @@
+// Copyright 2022-2023 The Memphis.dev Authors
+// Licensed under the Memphis Business Source License 1.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// Changed License: [Apache License, Version 2.0 (https://www.apache.org/licenses/LICENSE-2.0), as published by the Apache Foundation.
+//
+// https://github.com/memphisdev/memphis/blob/master/LICENSE
+//
+// Additional Use Grant: You may make use of the Licensed Work (i) only as part of your own product or service, provided it is not a message broker or a message queue product or service; and (ii) provided that you do not use, provide, distribute, or make available the Licensed Work as a Service.
+// A "Service" is a commercial offering, product, hosted, or managed service, that allows third parties (other than your own employees and contractors acting on your behalf) to access and/or use the Licensed Work or a substantial set of the features or functionality of the Licensed Work to third parties as a software-as-a-service, platform-as-a-service, infrastructure-as-a-service or other similar services that compete with Licensor products or services.
+
+import './style.scss';
+
+import React, { useEffect, useState } from 'react';
+import TitleComponent from 'components/titleComponent';
+import InputNumberComponent from 'components/InputNumber';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import { sendTrace } from 'services/genericServices';
+import { Form } from 'antd';
+import Button from 'components/button';
+
+const ConnectorScale = ({ connector, open, done }) => {
+    const [loading, setLoading] = useState(false);
+    const [instances, setInstances] = useState(connector?.instances || 1);
+
+    useEffect(() => {
+        open && setInstances(connector?.instances || 1);
+    }, [open]);
+
+    const onFinish = async () => {
+        try {
+            setLoading(true);
+            try {
+                await httpRequest('POST', ApiEndpoints.SCALE_CONNECTOR, {
+                    connector_id: connector?.id,
+                    instances: instances
+                });
+                setLoading(false);
+            } catch (error) {
+                setLoading(false);
+            }
+            sendTrace('scale', {
+                name: connector?.name,
+                type: connector?.type,
+                connector_type: connector?.connector_type,
+                instances: instances
+            });
+            let connectorData = { ...connector };
+            connectorData.instances = instances;
+            done(connectorData);
+        } catch (err) {
+            return;
+        }
+    };
+
+    return (
+        <Form name="form" autoComplete="on" className={'scale-connector'}>
+            <Form.Item name="instances" validateTrigger="onChange" initialValue={connector?.instances || 1}>
+                <TitleComponent
+                    headerTitle={`Scale (${connector?.instances || 1}/15)`}
+                    typeTitle="sub-header"
+                    headerDescription="Choose the number of the connector instances"
+                />
+                <InputNumberComponent
+                    colorType="black"
+                    backgroundColorType="none"
+                    fontFamily="Inter"
+                    borderColorType="gray"
+                    radiusType="semi-round"
+                    height="40px"
+                    boxShadowsType="none"
+                    fontSize="14px"
+                    style={{ width: '100%', height: '40px', display: 'flex', alignItems: 'center' }}
+                    min={1}
+                    max={15}
+                    value={instances}
+                    onChange={(e) => setInstances(e)}
+                    disabled={false}
+                />
+            </Form.Item>
+            <Form.Item>
+                <Button
+                    placeholder={'Save'}
+                    width={'100%'}
+                    colorType={'white'}
+                    fontSize={'14px'}
+                    fontWeight={500}
+                    border="none"
+                    backgroundColorType={'purple'}
+                    onClick={onFinish}
+                    radiusType="circle"
+                    isLoading={loading}
+                    disabled={instances === connector?.instances}
+                />
+            </Form.Item>
+        </Form>
+    );
+};
+
+export default ConnectorScale;

ui_src/src/components/connectorScale/style.scss

@@ -0,0 +1,9 @@
+.scale-connector {
+    padding: 15px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    .ant-form-item {
+        margin: 0px;
+    }
+}

ui_src/src/components/runBenchmarkModal/index.js

@@ -22,9 +22,9 @@ import { SiLinux, SiApple, SiWindows11 } from 'react-icons/si';
 import { LOCAL_STORAGE_BROKER_HOST, LOCAL_STORAGE_ENV, LOCAL_STORAGE_ACCOUNT_ID } from 'const/localStorageConsts';
 
 let write =
-    'mem bench producer --message-size 128 --count 1000 --concurrency 1 --host <host> --account-id <account-id(not needed for open-source)> --user <client type user> --password <password>';
+    'mem bench producer --message-size 128 --count 1000 --concurrency 1 --host <broker_hostname> --account-id <account-id(not needed for open-source)> --user <client type user> --password <password>';
 let read =
-    'mem bench consumer --message-size 128 --count 1000 --concurrency 1 --batch-size 500 --host <broker_hostname> --account-id <account_id(not needed for open-source)> --user <client_type_username> --password <password>';
+    'mem bench consumer --message-size 128 --count 1000 --concurrency 1 --batch-size 500 --host <broker_hostname> --account-id <account-id(not needed for open-source)> --user <client_type_username> --password <password>';
 
 const RunBenchmarkModal = ({ open, clickOutside }) => {
     const [tabValue, setTabValue] = useState('Windows');
@@ -38,11 +38,11 @@ const RunBenchmarkModal = ({ open, clickOutside }) => {
                 : localStorage.getItem(LOCAL_STORAGE_BROKER_HOST)
                 ? localStorage.getItem(LOCAL_STORAGE_BROKER_HOST)
                 : 'memphis.memphis.svc.cluster.local';
-        write = write.replace('<host>', host);
+        write = write.replace('<broker_hostname>', host);
         write = write.replace('<account-id(not needed for open-source)>', parseInt(localStorage.getItem(LOCAL_STORAGE_ACCOUNT_ID)));
-        read = read.replace('<host>', host);
-        read = read.replace('<account-id(not needed for open-source)>', parseInt(localStorage.getItem(LOCAL_STORAGE_ACCOUNT_ID)));
         setWriteLink(write);
+        read = read.replace('<broker_hostname>', host);
+        read = read.replace('<account-id(not needed for open-source)>', parseInt(localStorage.getItem(LOCAL_STORAGE_ACCOUNT_ID)));
         setReadLink(read);
     }, []);
 

ui_src/src/connectors/kafka.js

@@ -136,6 +136,16 @@ export const kafka = {
             type: 'string',
             required: false,
             placeholder: 10
+        },
+        {
+            name: 'instances',
+            display: 'Scale (instances)',
+            placeholder: 1,
+            min: 1,
+            max: 15,
+            type: 'number',
+            required: false,
+            description: 'The number of the connector instances '
         }
     ],
     Sink: [
@@ -255,6 +265,16 @@ export const kafka = {
             type: 'string',
             required: false,
             description: 'The wait time before delivering a batch of messages'
+        },
+        {
+            name: 'instances',
+            display: 'Scale (instances)',
+            placeholder: 1,
+            min: 1,
+            max: 15,
+            type: 'number',
+            required: false,
+            description: 'The number of the connector instances '
         }
     ]
 };

ui_src/src/connectors/memphis.js

@@ -92,6 +92,16 @@ export const memphis = {
                     Ack: []
                 }
             ]
+        },
+        {
+            name: 'instances',
+            display: 'Scale (instances)',
+            placeholder: 1,
+            min: 1,
+            max: 15,
+            type: 'number',
+            required: false,
+            description: 'The number of the connector instances '
         }
     ]
 };

ui_src/src/connectors/redis.js

@@ -85,6 +85,16 @@ export const redis = {
             type: 'string',
             required: false,
             description: 'The wait time before delivering a batch of messages'
+        },
+        {
+            name: 'instances',
+            display: 'Scale (instances)',
+            placeholder: 1,
+            min: 1,
+            max: 15,
+            type: 'number',
+            required: false,
+            description: 'The number of the connector instances '
         }
     ]
 };

ui_src/src/const/apiEndpoints.js

@@ -60,6 +60,7 @@ export const ApiEndpoints = {
     GET_CONNECTOR_ERRORS: '/stations/getConnectorErrors',
     PURGE_CONNECTOR_ERRORS: '/stations/purgeConnectorErrors',
     GET_CONNECTOR_DETAILS: '/stations/getConnectorDetails',
+    SCALE_CONNECTOR: '/stations/scaleConnector',
 
     //Async Tasks
     GET_ASYNC_TASKS: '/asyncTasks/getAsyncTasks',