Skip to content

Commit a10a43d

Browse files
avrhamNeemanavrhamNeeman
authored
Merge pull request #1311 from memphisdev/copy-master-2
merge from cloud
2 parents 5e7f7f5 + 4af4aaa commit a10a43d

File tree

11 files changed

+94
-99
lines changed

11 files changed

+94
-99
lines changed

‎ui_src/src/App.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import './App.scss';
1515
import { Switch, Route, withRouter } from 'react-router-dom';
1616
import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
1717
import { JSONCodec, StringCodec, connect } from 'nats.ws';
18+
import { useStiggContext } from '@stigg/react-sdk';
1819
import { useMediaQuery } from 'react-responsive';
1920
import { useHistory } from 'react-router-dom';
2021
import { message, notification } from 'antd';
@@ -30,21 +31,23 @@ import {
3031
USER_IMAGE
3132
} from './const/localStorageConsts';
3233
import { CLOUD_URL, ENVIRONMENT, HANDLE_REFRESH_INTERVAL, WS_PREFIX, WS_SERVER_URL_PRODUCTION } from './config';
33-
import { handleRefreshTokenRequest, httpRequest } from './services/http';
34+
import { isCheckoutCompletedTrue, isCloud } from './services/valueConvertor';
3435
import infoNotificationIcon from './assets/images/infoNotificationIcon.svg';
36+
import { handleRefreshTokenRequest, httpRequest } from './services/http';
3537
import redirectIcon from './assets/images/redirectIcon.svg';
3638
import successIcon from './assets/images/successIcon.svg';
3739
import close from './assets/images/closeNotification.svg';
40+
import { showMessages } from './services/genericServices';
3841
import StationOverview from './domain/stationOverview';
3942
import errorIcon from './assets/images/errorIcon.svg';
4043
import MessageJourney from './domain/messageJourney';
4144
import Administration from './domain/administration';
4245
import { ApiEndpoints } from './const/apiEndpoints';
43-
import { isCheckoutCompletedTrue, isCloud } from './services/valueConvertor';
4446
import warnIcon from './assets/images/warnIcon.svg';
4547
import AppWrapper from './components/appWrapper';
4648
import StationsList from './domain/stationsList';
4749
import SchemaManagment from './domain/schema';
50+
import Functions from './domain/functions';
4851
import PrivateRoute from './PrivateRoute';
4952
import AuthService from './services/auth';
5053
import Overview from './domain/overview';
@@ -53,9 +56,6 @@ import { Context } from './hooks/store';
5356
import Profile from './domain/profile';
5457
import pathDomains from './router';
5558
import Users from './domain/users';
56-
import Functions from './domain/functions';
57-
import { useStiggContext } from '@stigg/react-sdk';
58-
import { showMessages } from './services/genericServices';
5959

6060
let SysLogs = undefined;
6161
let Login = undefined;

‎ui_src/src/domain/streamLineage/components/connection/index.js‎

Lines changed: 13 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -13,29 +13,22 @@
1313
import './style.scss';
1414

1515
import React from 'react';
16-
import { HiOutlineChartSquareBar } from 'react-icons/hi';
1716

18-
const Connection = ({ id, producers, consumers }) => {
17+
const Connection = ({ id, producer, consumer }) => {
1918
return (
2019
<div className="connection-wrapper">
21-
<div className="connection-header">
22-
<HiOutlineChartSquareBar />
23-
<div className="connection-id">Application</div>
24-
</div>
25-
{producers?.length > 0 &&
26-
producers?.map((producer, index) => (
27-
<div key={index} className="rectangle producer">
28-
<p>{producer.name}</p>
29-
<div className="count">{producer.count}</div>
30-
</div>
31-
))}
32-
{consumers?.length > 0 &&
33-
consumers.map((consumer, index) => (
34-
<div key={index} className="rectangle consumer">
35-
<p>{consumer.name}</p>
36-
<div className="count">{consumer.count}</div>
37-
</div>
38-
))}
20+
{producer && (
21+
<div key={id} className="rectangle producer">
22+
<p>{producer.name}</p>
23+
<div className="count">{producer.count}</div>
24+
</div>
25+
)}
26+
{consumer && (
27+
<div key={id} className="rectangle consumer">
28+
<p>{consumer.name}</p>
29+
<div className="count">{consumer.count}</div>
30+
</div>
31+
)}
3932
</div>
4033
);
4134
};

‎ui_src/src/domain/streamLineage/components/connection/style.scss‎

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
.connection-wrapper{
22
border-radius: 4px;
3-
background: white;
4-
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
53
width: 98%;
64
height: 95%;
75
margin: 2px;
@@ -10,26 +8,8 @@
108
flex-direction: column;
119
align-items: center;
1210
justify-content: space-around;
13-
.connection-header{
14-
display: flex;
15-
align-items: center;
16-
gap: 5px;
17-
font-family: 'InterMedium';
18-
font-size: 14px;
19-
width: 90%;
20-
svg{
21-
width: 20px;
22-
height: 20px;
23-
}
24-
.connection-id{
25-
width: 90%;
26-
white-space: nowrap;
27-
overflow: hidden;
28-
text-overflow: ellipsis;
29-
}
30-
}
3111
.rectangle{
32-
width: 90%;
12+
width: 100%;
3313
height: 45px;
3414
display: flex;
3515
border-radius: 4px;

‎ui_src/src/domain/streamLineage/components/station/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,14 +42,14 @@ const Station = ({ stationName, dls_messages, total_messages, schema_name }) =>
4242
<BiSolidEnvelope />
4343
</div>
4444
<div className="station-messages-title">Messages</div>
45-
<div className="station-messages-count">{total_messages}</div>
45+
<div className="station-messages-count">{total_messages.toLocaleString()}</div>
4646
</div>
4747
<div className="station-messages">
4848
<div className="icon-wrapper">
4949
<PiWarningFill />
5050
</div>
5151
<div className="station-messages-title">Dead-letter</div>
52-
<div className="station-messages-count">{dls_messages}</div>
52+
<div className="station-messages-count">{dls_messages.toLocaleString()}</div>
5353
</div>
5454
</div>
5555
</div>

‎ui_src/src/domain/streamLineage/index.js‎

Lines changed: 58 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -88,50 +88,63 @@ const StreamLineage = ({ expend, setExpended, createStationTrigger }) => {
8888
};
8989
nodesList.push(node);
9090
});
91-
const sortedArray = data['apps']?.slice().sort((a, b) => {
91+
const sortedProducers = data['producers']?.slice().sort((a, b) => {
9292
return a.app_id.localeCompare(b.app_id);
9393
});
94-
sortedArray?.map((row, index) => {
94+
const sortedConsumers = data['consumers']?.slice().sort((a, b) => {
95+
return a.app_id.localeCompare(b.app_id);
96+
});
97+
sortedProducers?.map((producer, index) => {
9598
let node = {
96-
id: row.app_id,
97-
text: 'app',
98-
width: 300,
99-
height: 100 + row.producers.length * 30 + row.consumers.length * 30,
99+
id: `${producer.name}-${producer.app_id}`,
100+
text: 'producer',
101+
width: 200,
102+
height: 100,
100103
data: {
101-
value: 'app',
102-
producers: row.producers,
103-
consumers: row.consumers
104+
value: 'producer',
105+
producer_details: producer
106+
}
107+
};
108+
let edge = {
109+
id: `${producer.app_id}-${producer.station_id}`,
110+
from: `${producer.name}-${producer.app_id}`,
111+
to: producer.station_id,
112+
// fromPort: row.app_id,
113+
toPort: `${producer.station_id}_west`,
114+
selectionDisabled: true,
115+
data: {
116+
active: true,
117+
is_producer: true
104118
}
105119
};
106-
row.from.map((from, index) => {
107-
let edge = {
108-
id: `${row.app_id}-${from.station_id}`,
109-
from: from.station_id,
110-
to: row.app_id,
111-
fromPort: `${from.station_id}_east`,
112-
toPort: row.app_id,
113-
selectionDisabled: true,
114-
data: {
115-
active: from.active
116-
}
117-
};
118-
edgesList.push(edge);
119-
});
120-
row.to.map((to, index) => {
121-
let edge = {
122-
id: `${row.app_id}-${to.station_id}`,
123-
from: row.app_id,
124-
to: to.station_id,
125-
fromPort: row.app_id,
126-
toPort: `${to.station_id}_west`,
127-
selectionDisabled: true,
128-
data: {
129-
active: to.active
130-
}
131-
};
132-
edgesList.push(edge);
133-
});
134120
nodesList.push(node);
121+
edgesList.push(edge);
122+
});
123+
sortedConsumers?.map((consumer, index) => {
124+
let node = {
125+
id: `${consumer.name}-${consumer.app_id}`,
126+
text: 'consumer',
127+
width: 200,
128+
height: 100,
129+
data: {
130+
value: 'consumer',
131+
consumer_details: consumer
132+
}
133+
};
134+
let edge = {
135+
id: `${consumer.app_id}-${consumer.station_id}`,
136+
from: consumer.station_id,
137+
to: `${consumer.name}-${consumer.app_id}`,
138+
fromPort: `${consumer.station_id}_east`,
139+
// toPort: row.app_id,
140+
selectionDisabled: true,
141+
data: {
142+
active: true,
143+
is_producer: false
144+
}
145+
};
146+
nodesList.push(node);
147+
edgesList.push(edge);
135148
});
136149
setEdges(edgesList);
137150
setNodes(nodesList);
@@ -221,9 +234,8 @@ const StreamLineage = ({ expend, setExpended, createStationTrigger }) => {
221234
<Node style={{ stroke: 'transparent', fill: 'transparent', strokeWidth: 1 }} label={<Label style={{ display: 'none' }} />}>
222235
{(event) => (
223236
<foreignObject height={event.height} width={event.width} x={0} y={0} className="node-wrapper">
224-
{event.node.data.value === 'app' && (
225-
<Connection id={event.node.id} producers={event.node.data.producers} consumers={event.node.data.consumers} />
226-
)}
237+
{event.node.data.value === 'producer' && <Connection id={event.node.id} producer={event.node.data.producer_details} />}
238+
{event.node.data.value === 'consumer' && <Connection id={event.node.id} consumer={event.node.data.consumer_details} />}
227239
{event.node.data.value === 'station' && (
228240
<Station
229241
stationName={event.node.data.name}
@@ -237,7 +249,12 @@ const StreamLineage = ({ expend, setExpended, createStationTrigger }) => {
237249
</Node>
238250
}
239251
arrow={null}
240-
edge={(edge) => <Edge {...edge} className={edge?.data?.active === true ? 'edge processing' : 'edge'} />}
252+
edge={(edge) => (
253+
<Edge
254+
{...edge}
255+
className={edge?.data?.active === true ? (edge?.data?.is_producer ? 'edge produce-processing' : 'edge consume-processing') : 'edge'}
256+
/>
257+
)}
241258
/>
242259
</div>
243260
)}

‎ui_src/src/domain/streamLineage/style.scss‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -123,8 +123,13 @@ $grid-color: rgba(150, 150, 150, .3);
123123
stroke-width: 8;
124124
stroke: rgba(101,87,255,.1);
125125
}
126-
.processing {
127-
stroke: #34C759;
126+
.produce-processing {
127+
stroke: #FFC633;
128+
stroke-dasharray: 5;
129+
animation: dashdraw .5s linear infinite;
130+
}
131+
.consume-processing {
132+
stroke: #61DFC6;
128133
stroke-dasharray: 5;
129134
animation: dashdraw .5s linear infinite;
130135
}

‎ui_static_files/build/asset-manifest.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"files": {
3-
"main.css": "/static/css/main.b6d31690.css",
4-
"main.js": "/static/js/main.09b9a5c9.js",
3+
"main.css": "/static/css/main.d5e3d4f3.css",
4+
"main.js": "/static/js/main.4d0f5c7a.js",
55
"static/js/617.a5f8c4fc.chunk.js": "/static/js/617.a5f8c4fc.chunk.js",
66
"static/js/2542.27de8743.chunk.js": "/static/js/2542.27de8743.chunk.js",
77
"static/js/1737.e134cfd4.chunk.js": "/static/js/1737.e134cfd4.chunk.js",
@@ -294,7 +294,7 @@
294294
"static/media/closeNotification.svg": "/static/media/closeNotification.7551e8366682f9c6585bb1a694c4112a.svg"
295295
},
296296
"entrypoints": [
297-
"static/css/main.b6d31690.css",
298-
"static/js/main.09b9a5c9.js"
297+
"static/css/main.d5e3d4f3.css",
298+
"static/js/main.4d0f5c7a.js"
299299
]
300300
}

‎ui_static_files/build/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +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.09b9a5c9.js"></script><link href="/static/css/main.b6d31690.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
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.4d0f5c7a.js"></script><link href="/static/css/main.d5e3d4f3.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

ui_static_files/build/static/css/main.b6d31690.css renamed to ui_static_files/build/static/css/main.d5e3d4f3.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

ui_static_files/build/static/js/main.09b9a5c9.js renamed to ui_static_files/build/static/js/main.4d0f5c7a.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)