Merge pull request #1341 from memphisdev/ui-enhancements

drop and resend issue
superstreamlabs · Sep 21, 2023 · e2f4f44 · e2f4f44
2 parents e3fdc47 + 0fd312d
commit e2f4f44
Show file tree

Hide file tree

Showing 13 changed files with 44 additions and 24 deletions.
diff --git a/ui_src/src/components/createStationForm/index.js b/ui_src/src/components/createStationForm/index.js
@@ -26,7 +26,7 @@ import TitleComponent from '../titleComponent';
 import SelectCheckBox from '../selectCheckBox';
 import { Context } from '../../hooks/store';
 import UpgradePlans from '../upgradePlans';
-import SelectSchema from '../customSelect';
+import CustomSelect from '../customSelect';
 import RadioButton from '../radioButton';
 import LockFeature from '../lockFeature';
 import SelectComponent from '../select';
@@ -474,7 +474,7 @@ const CreateStationForm = ({ createStationFormRef, getStartedStateRef, finishUpd
                         </div>
                         {!getStarted && useSchema && (
                             <Form.Item name="schemaValue" initialValue={schemas?.length > 0 ? schemas[0]?.name : null}>
-                                <SelectSchema
+                                <CustomSelect
                                     placeholder={creationForm.schemaValue || 'Select schema'}
                                     value={creationForm.schemaValue || schemas[0]}
                                     options={schemas}
@@ -496,7 +496,7 @@ const CreateStationForm = ({ createStationFormRef, getStartedStateRef, finishUpd
 
                     {dlsConfiguration && (
                         <Form.Item name="dlsStation" initialValue={null}>
-                            <SelectSchema
+                            <CustomSelect
                                 placeholder={creationForm.dlsStation || 'None'}
                                 value={creationForm.dlsStation || stations[0]}
                                 options={stations}

diff --git a/ui_src/src/components/customSelect/index.js b/ui_src/src/components/customSelect/index.js
@@ -108,7 +108,7 @@ const CustomSelect = ({ options, onChange, value, placeholder, type = 'schema',
                                     <p className="schema-name">{schema?.name}</p>
                                 </div>
                                 <p className="created-by">
-                                    {type === 'schema' ? <>{schema?.type} &#8226;</> : null}
+                                    {type === 'schema' ? <>{schema?.type} &#8226; </> : null}
                                     {parsingDate(schema?.created_at)}
                                 </p>
                             </>

diff --git a/ui_src/src/components/sdkExample/index.js b/ui_src/src/components/sdkExample/index.js
@@ -311,7 +311,7 @@ const SdkExample = ({ consumer, showTabs = true, stationName, username, connecti
                 if (lang === 'Go') codeEx.producer = codeEx.producer?.replaceAll(', memphis.MsgHeaders(hdrs)', '');
                 else if (lang === 'Python') codeEx.producer = codeEx.producer?.replaceAll(', headers=headers', '');
                 else if (lang === '.NET (C#)') codeEx.producer = codeEx.producer?.replaceAll(', commonHeaders', '');
-                else if (lang === 'TypeScript') codeEx.producer = removeLineWithSubstring(codeEx.producer, 'headers: headers');
+                else if (lang === 'TypeScript' || lang === 'Node.js') codeEx.producer = removeLineWithSubstring(codeEx.producer, 'headers: headers');
             }
 
             setCodeExample(codeEx);
@@ -531,7 +531,7 @@ const SdkExample = ({ consumer, showTabs = true, stationName, username, connecti
                         )}
                         {
                             <div className="code-builder">
-                                <Collapse ghost expandIcon={({ isActive }) => <ExpandIcon isActive={isActive} />}>
+                                <Collapse ghost defaultActiveKey={['0']} expandIcon={({ isActive }) => <ExpandIcon isActive={isActive} />}>
                                     <Panel
                                         header={
                                             <div className="header">

diff --git a/ui_src/src/const/codeExample.js b/ui_src/src/const/codeExample.js
@@ -309,7 +309,7 @@ if __name__ == "__main__":
     },
 
     '.NET (C#)': {
-        langCode: 'C#',
+        langCode: 'cpp',
         installation: `dotnet add package Memphis.Client`,
         producer: `using System.Collections.Specialized;
 using System.Text;
@@ -327,7 +327,7 @@ namespace Producer
                 var options = MemphisClientFactory.GetDefaultOptions();
                 options.Host = "<memphis-host>";
                 options.Username = "<application type username>";
-                options.Password = "<password>";
+                options.Password = "<broker-token>";
                 var client = await MemphisClientFactory.CreateClient(options);
                 options.AccountId = "<account-id>";
 
@@ -380,7 +380,7 @@ namespace Consumer
                 var options = MemphisClientFactory.GetDefaultOptions();
                 options.Host = "<memphis-host>";
                 options.Username = "<application type username>";
-                options.Password = "<password>";
+                options.Password = "<broker-token>";
                 var client = await MemphisClientFactory.CreateClient(options);
                 options.AccountId = "<account-id>";
 
@@ -900,7 +900,7 @@ console.log(response);
 });`
     },
     '.NET (C#)': {
-        langCode: 'C#',
+        langCode: 'cpp',
         producer: `using System;
 using System.Net.Http;
 using System.Threading.Tasks;

diff --git a/ui_src/src/domain/messageJourney/components/poisonMessage/index.js b/ui_src/src/domain/messageJourney/components/poisonMessage/index.js
@@ -20,19 +20,24 @@ import { httpRequest } from '../../../../services/http';
 import { ApiEndpoints } from '../../../../const/apiEndpoints';
 import { message as messageAnt } from 'antd';
 
-const PoisonMessage = ({ messageId, details, message, headers, processing, returnBack, schemaType }) => {
+const PoisonMessage = ({ stationName, messageId, details, message, headers, processing, returnBack, schemaType }) => {
     const [resendProcess, setResendProcess] = useState(false);
     const [ignoreProcess, setIgnoreProcess] = useState(false);
-    const url = window.location.href;
-    const stationName = url.split('stations/')[1].split('/')[0];
 
     const handleIgnore = async () => {
         setIgnoreProcess(true);
         try {
-            await httpRequest('POST', `${ApiEndpoints.DROP_DLS_MESSAGE}`, { dls_type: 'poison', dls_message_ids: [messageId], station_name: stationName });
+            await httpRequest('POST', `${ApiEndpoints.DROP_DLS_MESSAGE}`, { dls_type: 'poison', dls_message_ids: [Number(messageId)], station_name: stationName });
             setTimeout(() => {
                 setIgnoreProcess(false);
                 returnBack();
+                messageAnt.success({
+                    key: 'memphisSuccessMessage',
+                    content: 'The message was drop successfully',
+                    duration: 5,
+                    style: { cursor: 'pointer' },
+                    onClick: () => message.destroy('memphisSuccessMessage')
+                });
             }, 1500);
         } catch (error) {
             setIgnoreProcess(false);
@@ -43,7 +48,7 @@ const PoisonMessage = ({ messageId, details, message, headers, processing, retur
         setResendProcess(true);
         processing(true);
         try {
-            await httpRequest('POST', `${ApiEndpoints.RESEND_POISON_MESSAGE_JOURNEY}`, { poison_message_ids: [messageId], station_name: stationName });
+            await httpRequest('POST', `${ApiEndpoints.RESEND_POISON_MESSAGE_JOURNEY}`, { poison_message_ids: [Number(messageId)], station_name: stationName });
             setTimeout(() => {
                 setResendProcess(false);
                 processing(false);

diff --git a/ui_src/src/domain/overview/genericDetails/style.scss b/ui_src/src/domain/overview/genericDetails/style.scss
@@ -161,12 +161,16 @@
                     cursor: pointer;
                     .left {
                         display: flex;
+                        align-items: center;
                         svg {
                             width: 20px;
                             margin-right: 5px;
                         }
                         p {
                             font-family: 'InterMedium';
+                            max-width: 240px;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
                         }
                     }
                 }

diff --git a/ui_src/src/domain/overview/index.js b/ui_src/src/domain/overview/index.js
@@ -77,6 +77,17 @@ function OverView() {
 
     const arrangeData = (data) => {
         data.stations?.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
+        data.delayed_cgs?.sort(function (a, b) {
+            let nameA = a.station_name.toUpperCase();
+            let nameB = b.station_name.toUpperCase();
+            if (nameA < nameB) {
+                return -1;
+            }
+            if (nameA > nameB) {
+                return 1;
+            }
+            return 0;
+        });
         data.system_components?.sort(function (a, b) {
             let nameA = a.name.toUpperCase();
             let nameB = b.name.toUpperCase();
@@ -157,7 +168,6 @@ function OverView() {
         };
 
         subscribeToOverviewData();
-
         return () => {
             if (sub) {
                 try {

diff --git a/ui_src/src/domain/overview/stations/style.scss b/ui_src/src/domain/overview/stations/style.scss
@@ -91,6 +91,7 @@
                     padding-left: 20px;
                     display: flex;
                     flex-direction: column;
+                    display: block;
                     span {
                         font-size: 10px;
                         color: var(--black, rgba(74, 73, 92, 0.8));

diff --git a/ui_static_files/build/asset-manifest.json b/ui_static_files/build/asset-manifest.json
@@ -1,7 +1,7 @@
 {
   "files": {
-    "main.css": "/static/css/main.66c3273e.css",
-    "main.js": "/static/js/main.0832c90b.js",
+    "main.css": "/static/css/main.d7edbc79.css",
+    "main.js": "/static/js/main.fee2b126.js",
     "static/js/617.a5f8c4fc.chunk.js": "/static/js/617.a5f8c4fc.chunk.js",
     "static/js/2542.27de8743.chunk.js": "/static/js/2542.27de8743.chunk.js",
     "static/js/1737.e134cfd4.chunk.js": "/static/js/1737.e134cfd4.chunk.js",
@@ -295,7 +295,7 @@
     "static/media/closeNotification.svg": "/static/media/closeNotification.7551e8366682f9c6585bb1a694c4112a.svg"
   },
   "entrypoints": [
-    "static/css/main.66c3273e.css",
-    "static/js/main.0832c90b.js"
+    "static/css/main.d7edbc79.css",
+    "static/js/main.fee2b126.js"
   ]
 }
diff --git a/ui_static_files/build/index.html b/ui_static_files/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Memphis.dev console is designed to simplify your work and give you a graphical user interface for controlling your stations, security, integrations, and observing your data and other vital metrics"/><link rel="manifest" href="/manifest.json"/><title>Memphis.dev Console</title><link rel="apple-touch-icon" sizes="57x57" href="/img/favicon/apple-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="/img/favicon/apple-icon-60x60.png"><link rel="apple-touch-icon" sizes="72x72" href="/img/favicon/apple-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="/img/favicon/apple-icon-76x76.png"><link rel="apple-touch-icon" sizes="114x114" href="/img/favicon/apple-icon-114x114.png"><link rel="apple-touch-icon" sizes="120x120" href="/img/favicon/apple-icon-120x120.png"><link rel="apple-touch-icon" sizes="144x144" href="/img/favicon/apple-icon-144x144.png"><link rel="apple-touch-icon" sizes="152x152" href="/img/favicon/apple-icon-152x152.png"><link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-icon-180x180.png"><link rel="icon" type="image/png" sizes="192x192" href="/img/favicon/android-icon-192x192.png"><link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png"><link rel="icon" type="image/png" sizes="96x96" href="/img/favicon/favicon-96x96.png"><link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png"><meta name="msapplication-TileColor" content="#ffffff"><meta name="msapplication-TileImage" content="/img/favicon/ms-icon-144x144.png"><meta name="theme-color" content="#ffffff"><script defer="defer" src="/static/js/main.0832c90b.js"></script><link href="/static/css/main.66c3273e.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Memphis.dev console is designed to simplify your work and give you a graphical user interface for controlling your stations, security, integrations, and observing your data and other vital metrics"/><link rel="manifest" href="/manifest.json"/><title>Memphis.dev Console</title><link rel="apple-touch-icon" sizes="57x57" href="/img/favicon/apple-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="/img/favicon/apple-icon-60x60.png"><link rel="apple-touch-icon" sizes="72x72" href="/img/favicon/apple-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="/img/favicon/apple-icon-76x76.png"><link rel="apple-touch-icon" sizes="114x114" href="/img/favicon/apple-icon-114x114.png"><link rel="apple-touch-icon" sizes="120x120" href="/img/favicon/apple-icon-120x120.png"><link rel="apple-touch-icon" sizes="144x144" href="/img/favicon/apple-icon-144x144.png"><link rel="apple-touch-icon" sizes="152x152" href="/img/favicon/apple-icon-152x152.png"><link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-icon-180x180.png"><link rel="icon" type="image/png" sizes="192x192" href="/img/favicon/android-icon-192x192.png"><link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png"><link rel="icon" type="image/png" sizes="96x96" href="/img/favicon/favicon-96x96.png"><link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png"><meta name="msapplication-TileColor" content="#ffffff"><meta name="msapplication-TileImage" content="/img/favicon/ms-icon-144x144.png"><meta name="theme-color" content="#ffffff"><script defer="defer" src="/static/js/main.fee2b126.js"></script><link href="/static/css/main.d7edbc79.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/..._files/build/static/css/main.66c3273e.css → ..._files/build/static/css/main.d7edbc79.css b/..._files/build/static/css/main.66c3273e.css → ..._files/build/static/css/main.d7edbc79.css
diff --git a/...ic_files/build/static/js/main.0832c90b.js → ...ic_files/build/static/js/main.fee2b126.js b/...ic_files/build/static/js/main.0832c90b.js → ...ic_files/build/static/js/main.fee2b126.js
diff --git a/...ld/static/js/main.0832c90b.js.LICENSE.txt → ...ld/static/js/main.fee2b126.js.LICENSE.txt b/...ld/static/js/main.0832c90b.js.LICENSE.txt → ...ld/static/js/main.fee2b126.js.LICENSE.txt