merge from cloud

ui_src/src/App.js

@@ -15,6 +15,7 @@ import './App.scss';
 import { Switch, Route, withRouter } from 'react-router-dom';
 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { JSONCodec, StringCodec, connect } from 'nats.ws';
+import { useStiggContext } from '@stigg/react-sdk';
 import { useMediaQuery } from 'react-responsive';
 import { useHistory } from 'react-router-dom';
 import { message, notification } from 'antd';
@@ -30,21 +31,23 @@ import {
  USER_IMAGE
 } from './const/localStorageConsts';
 import { CLOUD_URL, ENVIRONMENT, HANDLE_REFRESH_INTERVAL, WS_PREFIX, WS_SERVER_URL_PRODUCTION } from './config';
-import { handleRefreshTokenRequest, httpRequest } from './services/http';
+import { isCheckoutCompletedTrue, isCloud } from './services/valueConvertor';
 import infoNotificationIcon from './assets/images/infoNotificationIcon.svg';
+import { handleRefreshTokenRequest, httpRequest } from './services/http';
 import redirectIcon from './assets/images/redirectIcon.svg';
 import successIcon from './assets/images/successIcon.svg';
 import close from './assets/images/closeNotification.svg';
+import { showMessages } from './services/genericServices';
 import StationOverview from './domain/stationOverview';
 import errorIcon from './assets/images/errorIcon.svg';
 import MessageJourney from './domain/messageJourney';
 import Administration from './domain/administration';
 import { ApiEndpoints } from './const/apiEndpoints';
-import { isCheckoutCompletedTrue, isCloud } from './services/valueConvertor';
 import warnIcon from './assets/images/warnIcon.svg';
 import AppWrapper from './components/appWrapper';
 import StationsList from './domain/stationsList';
 import SchemaManagment from './domain/schema';
+import Functions from './domain/functions';
 import PrivateRoute from './PrivateRoute';
 import AuthService from './services/auth';
 import Overview from './domain/overview';
@@ -53,9 +56,6 @@ import { Context } from './hooks/store';
 import Profile from './domain/profile';
 import pathDomains from './router';
 import Users from './domain/users';
-import Functions from './domain/functions';
-import { useStiggContext } from '@stigg/react-sdk';
-import { showMessages } from './services/genericServices';
 
 let SysLogs = undefined;
 let Login = undefined;

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

@@ -13,29 +13,22 @@
 import './style.scss';
 
 import React from 'react';
-import { HiOutlineChartSquareBar } from 'react-icons/hi';
 
-const Connection = ({ id, producers, consumers }) => {
+const Connection = ({ id, producer, consumer }) => {
  return (
  <div className="connection-wrapper">
- <div className="connection-header">
- <HiOutlineChartSquareBar />
- <div className="connection-id">Application</div>
- </div>
- {producers?.length > 0 &&
- producers?.map((producer, index) => (
- <div key={index} className="rectangle producer">
- <p>{producer.name}</p>
- <div className="count">{producer.count}</div>
- </div>
- ))}
- {consumers?.length > 0 &&
- consumers.map((consumer, index) => (
- <div key={index} className="rectangle consumer">
- <p>{consumer.name}</p>
- <div className="count">{consumer.count}</div>
- </div>
- ))}
+ {producer && (
+ <div key={id} className="rectangle producer">
+ <p>{producer.name}</p>
+ <div className="count">{producer.count}</div>
+ </div>
+ )}
+ {consumer && (
+ <div key={id} className="rectangle consumer">
+ <p>{consumer.name}</p>
+ <div className="count">{consumer.count}</div>
+ </div>
+ )}
  </div>
  );
 };

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

@@ -1,7 +1,5 @@
 .connection-wrapper{
  border-radius: 4px;
- background: white;
- box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
  width: 98%;
  height: 95%;
  margin: 2px;
@@ -10,26 +8,8 @@
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
- .connection-header{
- display: flex;
- align-items: center;
- gap: 5px;
- font-family: 'InterMedium';
- font-size: 14px;
- width: 90%;
- svg{
- width: 20px;
- height: 20px;
- }
- .connection-id{
- width: 90%;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
  .rectangle{
- width: 90%;
+ width: 100%;
  height: 45px;
  display: flex;
  border-radius: 4px;

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

@@ -42,14 +42,14 @@ const Station = ({ stationName, dls_messages, total_messages, schema_name }) =>
  <BiSolidEnvelope />
  </div>
  <div className="station-messages-title">Messages</div>
- <div className="station-messages-count">{total_messages}</div>
+ <div className="station-messages-count">{total_messages.toLocaleString()}</div>
  </div>
  <div className="station-messages">
  <div className="icon-wrapper">
  <PiWarningFill />
  </div>
  <div className="station-messages-title">Dead-letter</div>
- <div className="station-messages-count">{dls_messages}</div>
+ <div className="station-messages-count">{dls_messages.toLocaleString()}</div>
  </div>
  </div>
  </div>

ui_src/src/domain/streamLineage/index.js

@@ -88,50 +88,63 @@ const StreamLineage = ({ expend, setExpended, createStationTrigger }) => {
  };
  nodesList.push(node);
  });
- const sortedArray = data['apps']?.slice().sort((a, b) => {
+ const sortedProducers = data['producers']?.slice().sort((a, b) => {
  return a.app_id.localeCompare(b.app_id);
  });
- sortedArray?.map((row, index) => {
+ const sortedConsumers = data['consumers']?.slice().sort((a, b) => {
+ return a.app_id.localeCompare(b.app_id);
+ });
+ sortedProducers?.map((producer, index) => {
  let node = {
- id: row.app_id,
- text: 'app',
- width: 300,
- height: 100 + row.producers.length * 30 + row.consumers.length * 30,
+ id: `${producer.name}-${producer.app_id}`,
+ text: 'producer',
+ width: 200,
+ height: 100,
  data: {
- value: 'app',
- producers: row.producers,
- consumers: row.consumers
+ value: 'producer',
+ producer_details: producer
+ }
+ };
+ let edge = {
+ id: `${producer.app_id}-${producer.station_id}`,
+ from: `${producer.name}-${producer.app_id}`,
+ to: producer.station_id,
+ // fromPort: row.app_id,
+ toPort: `${producer.station_id}_west`,
+ selectionDisabled: true,
+ data: {
+ active: true,
+ is_producer: true
  }
  };
- row.from.map((from, index) => {
- let edge = {
- id: `${row.app_id}-${from.station_id}`,
- from: from.station_id,
- to: row.app_id,
- fromPort: `${from.station_id}_east`,
- toPort: row.app_id,
- selectionDisabled: true,
- data: {
- active: from.active
- }
- };
- edgesList.push(edge);
- });
- row.to.map((to, index) => {
- let edge = {
- id: `${row.app_id}-${to.station_id}`,
- from: row.app_id,
- to: to.station_id,
- fromPort: row.app_id,
- toPort: `${to.station_id}_west`,
- selectionDisabled: true,
- data: {
- active: to.active
- }
- };
- edgesList.push(edge);
- });
  nodesList.push(node);
+ edgesList.push(edge);
+ });
+ sortedConsumers?.map((consumer, index) => {
+ let node = {
+ id: `${consumer.name}-${consumer.app_id}`,
+ text: 'consumer',
+ width: 200,
+ height: 100,
+ data: {
+ value: 'consumer',
+ consumer_details: consumer
+ }
+ };
+ let edge = {
+ id: `${consumer.app_id}-${consumer.station_id}`,
+ from: consumer.station_id,
+ to: `${consumer.name}-${consumer.app_id}`,
+ fromPort: `${consumer.station_id}_east`,
+ // toPort: row.app_id,
+ selectionDisabled: true,
+ data: {
+ active: true,
+ is_producer: false
+ }
+ };
+ nodesList.push(node);
+ edgesList.push(edge);
  });
  setEdges(edgesList);
  setNodes(nodesList);
@@ -221,9 +234,8 @@ const StreamLineage = ({ expend, setExpended, createStationTrigger }) => {
  <Node style={{ stroke: 'transparent', fill: 'transparent', strokeWidth: 1 }} label={<Label style={{ display: 'none' }} />}>
  {(event) => (
  <foreignObject height={event.height} width={event.width} x={0} y={0} className="node-wrapper">
- {event.node.data.value === 'app' && (
- <Connection id={event.node.id} producers={event.node.data.producers} consumers={event.node.data.consumers} />
- )}
+ {event.node.data.value === 'producer' && <Connection id={event.node.id} producer={event.node.data.producer_details} />}
+ {event.node.data.value === 'consumer' && <Connection id={event.node.id} consumer={event.node.data.consumer_details} />}
  {event.node.data.value === 'station' && (
  <Station
  stationName={event.node.data.name}
@@ -237,7 +249,12 @@ const StreamLineage = ({ expend, setExpended, createStationTrigger }) => {
  </Node>
  }
  arrow={null}
- edge={(edge) => <Edge {...edge} className={edge?.data?.active === true ? 'edge processing' : 'edge'} />}
+ edge={(edge) => (
+ <Edge
+ {...edge}
+ className={edge?.data?.active === true ? (edge?.data?.is_producer ? 'edge produce-processing' : 'edge consume-processing') : 'edge'}
+ />
+ )}
  />
  </div>
  )}

ui_src/src/domain/streamLineage/style.scss

@@ -123,8 +123,13 @@ $grid-color: rgba(150, 150, 150, .3);
  stroke-width: 8;
  stroke: rgba(101,87,255,.1);
  }
- .processing {
- stroke: #34C759;
+ .produce-processing {
+ stroke: #FFC633;
+ stroke-dasharray: 5;
+ animation: dashdraw .5s linear infinite;
+ }
+ .consume-processing {
+ stroke: #61DFC6;
  stroke-dasharray: 5;
  animation: dashdraw .5s linear infinite;
  }

ui_static_files/build/asset-manifest.json

@@ -1,7 +1,7 @@
 {
  "files": {
- "main.css": "/static/css/main.b6d31690.css",
- "main.js": "/static/js/main.09b9a5c9.js",
+ "main.css": "/static/css/main.d5e3d4f3.css",
+ "main.js": "/static/js/main.4d0f5c7a.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",
@@ -294,7 +294,7 @@
  "static/media/closeNotification.svg": "/static/media/closeNotification.7551e8366682f9c6585bb1a694c4112a.svg"
  },
  "entrypoints": [
- "static/css/main.b6d31690.css",
- "static/js/main.09b9a5c9.js"
+ "static/css/main.d5e3d4f3.css",
+ "static/js/main.4d0f5c7a.js"
  ]
 }

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.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>
+<!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>