Skip to content

Commit

Permalink
partition-default-view (#1649)
Browse files Browse the repository at this point in the history
  • Loading branch information
@SvetaMemphis
SvetaMemphis authored Jan 23, 2024
1 parent a94387f commit ebb8434
Show file tree
Hide file tree
Showing 10 changed files with 161 additions and 139 deletions.
32 changes: 16 additions & 16 deletions ui_src/src/components/partitionsFilter/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,20 +12,23 @@

import './style.scss';

import React, { useContext, useState } from 'react';
import { Divider, Popover } from 'antd';
import React, { useContext, useState, useEffect } from 'react';
import { Popover } from 'antd';
import { ReactComponent as PartitionIcon } from 'assets/images/partitionIcon.svg';
import { ReactComponent as CollapseArrowIcon } from 'assets/images/collapseArrow.svg';
import { StationStoreContext } from 'domain/stationOverview';

const PartitionsFilter = ({ partitions_number }) => {
const [stationState, stationDispatch] = useContext(StationStoreContext);
const [isOpen, setIsOpen] = useState(false);
const [selectedPartition, setSelectedPartition] = useState(-1);
const [selectedPartition, setSelectedPartition] = useState(1);

useEffect(() => {
setSelectedPartition(stationState?.stationPartition);
}, [stationState?.stationPartition]);
const handleApply = (i) => {
setSelectedPartition(i === 0 ? -1 : i);
stationDispatch({ type: 'SET_STATION_PARTITION', payload: i === 0 ? -1 : i });
setSelectedPartition(i);
stationDispatch({ type: 'SET_STATION_PARTITION', payload: i });
setIsOpen(false);
};

Expand All @@ -34,17 +37,14 @@ const PartitionsFilter = ({ partitions_number }) => {
};

const getItems = () => {
let elements = [];
for (let i = 0; i <= partitions_number; i++) {
elements.push(
<div className="partition-item" key={i} onClick={() => handleApply(i)}>
<PartitionIcon alt="PartitionIcon" />
<label> {i == 0 ? 'All partitions' : `Partition ${i}`}</label>
</div>
);
}
return elements;
return Array.apply(null, { length: partitions_number }).map((_, index) => (
<div className="partition-item" key={index} onClick={() => handleApply(index + 1)}>
<PartitionIcon alt="PartitionIcon" />
<label> {`Partition ${index + 1}`}</label>
</div>
));
};

const getContent = () => {
return <div className="filter-partitions-container">{getItems()}</div>;
};
Expand All @@ -54,7 +54,7 @@ const PartitionsFilter = ({ partitions_number }) => {
<div className="filter-partition-btn">
<div className="filter-partition-container">
<PartitionIcon alt="PartitionIcon" />
<div>{selectedPartition == -1 ? `All partitions` : `Partition ${selectedPartition}`}</div>
<div>{`Partition ${selectedPartition}`}</div>
<CollapseArrowIcon alt="CollapseArrow" className={isOpen ? 'collapse-arrow open' : 'collapse-arrow close'} />
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion ui_src/src/components/sideBar/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -464,7 +464,6 @@ function SideBar() {

return (
<div className={'sidebar-container ' + (expandSidebar ? 'expand' : 'collapse')}>
{state.route !== 'overview' && <AsyncTasks />}
<div className="upper-icons">
<div
className={'upper-icons-toggle ' + (expandSidebar ? 'open' : 'close')}
Expand All @@ -474,6 +473,7 @@ function SideBar() {
>
<ArrowRight />
</div>
{state.route !== 'overview' && <AsyncTasks />}
<span className="logo-wrapper">
<img
src={getCompanyLogoSrc()}
Expand Down
152 changes: 80 additions & 72 deletions ui_src/src/domain/stationOverview/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import { StringCodec, JSONCodec } from 'nats.ws';
const initializeState = {
stationMetaData: { is_native: true },
stationSocketData: {},
stationPartition: -1,
stationPartition: 1,
stationFunctions: {}
};
let sub;
Expand All @@ -39,8 +39,14 @@ const StationOverview = () => {
const history = useHistory();
const [state, dispatch] = useContext(Context);
const [isLoading, setisLoading] = useState(false);
const [isReloading, setisReloading] = useState(false);
const [socketOn, setSocketOn] = useState(false);
const location = useLocation();
const [referredFunction, setReferredFunction] = useState(null);

useEffect(() => {
location?.selectedFunction && setReferredFunction(location?.selectedFunction);
}, [location?.selectedFunction]);

const sortData = (data) => {
data.audit_logs?.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
Expand Down Expand Up @@ -68,98 +74,100 @@ const StationOverview = () => {
};

const getStationDetails = async () => {
setisReloading(true);
try {
const data = await httpRequest(
'GET',
`${ApiEndpoints.GET_STATION_DATA}?station_name=${stationName}&partition_number=${stationState?.stationPartition || -1}`
);
const data = await httpRequest('GET', `${ApiEndpoints.GET_STATION_DATA}?station_name=${stationName}&partition_number=${stationState?.stationPartition || 1}`);
await sortData(data);
stationDispatch({ type: 'SET_SOCKET_DATA', payload: data });
stationDispatch({ type: 'SET_SCHEMA_TYPE', payload: data.schema.schema_type });
setisLoading(false);
setisReloading(false);
} catch (error) {
setisLoading(false);
setisReloading(false);
if (error.status === 404) {
history.push(pathDomains.stations);
}
}
};

useEffect(() => {
if (socketOn) {
getStationDetails();
}
// if (socketOn) {
// getStationDetails();
// }
getStationDetails();
}, [stationState?.stationPartition || stationState?.stationSocketData?.total_messages || stationState?.stationSocketData?.total_dls_messages, stationName]);

// const startListen = async () => {
// const jc = JSONCodec();
// const sc = StringCodec();

// const listenForUpdates = async () => {
// try {
// if (sub) {
// for await (const msg of sub) {
// let data = jc.decode(msg.data);
// sortData(data);
// stationDispatch({ type: 'SET_SOCKET_DATA', payload: data });
// if (!socketOn) {
// setSocketOn(true);
// }
// }
// }
// } catch (err) {
// console.error(`Error receiving data updates for station overview:`, err);
// }
// };

// try {
// const rawBrokerName = await state.socket?.request(
// `$memphis_ws_subs.station_overview_data.${stationName}.${stationState?.stationPartition || -1}`,
// sc.encode('SUB')
// );
// if (rawBrokerName) {
// const brokerName = JSON.parse(sc.decode(rawBrokerName?._rdata))['name'];
// sub = state.socket?.subscribe(`$memphis_ws_pubs.station_overview_data.${stationName}.${stationState?.stationPartition || -1}.${brokerName}`);
// listenForUpdates();
// }
// } catch (err) {
// console.error('Error subscribing to station overview data:', err);
// }
// };

// const stopListen = async () => {
// if (sub) {
// try {
// await sub.unsubscribe();
// } catch (err) {
// console.error('Error unsubscribing from station overview data:', err);
// }
// }
// };

// useEffect(() => {
// if (state.socket) {
// startListen();
// }
// return () => {
// stopListen();
// };
// }, [state.socket, stationName]);

// useEffect(() => {
// if (sub && socketOn) {
// stopListen();
// startListen();
// }
// }, [stationState?.stationPartition, stationName]);

useEffect(() => {
setisLoading(true);
dispatch({ type: 'SET_ROUTE', payload: 'stations' });
getStaionMetaData();
getStationDetails();
stationDispatch({ type: 'SET_STATION_PARTITION', payload: -1 });
stationDispatch({ type: 'SET_STATION_PARTITION', payload: 1 });
}, [stationName]);

const startListen = async () => {
const jc = JSONCodec();
const sc = StringCodec();

const listenForUpdates = async () => {
try {
if (sub) {
for await (const msg of sub) {
let data = jc.decode(msg.data);
sortData(data);
stationDispatch({ type: 'SET_SOCKET_DATA', payload: data });
if (!socketOn) {
setSocketOn(true);
}
}
}
} catch (err) {
console.error(`Error receiving data updates for station overview:`, err);
}
};

try {
const rawBrokerName = await state.socket?.request(
`$memphis_ws_subs.station_overview_data.${stationName}.${stationState?.stationPartition || -1}`,
sc.encode('SUB')
);
if (rawBrokerName) {
const brokerName = JSON.parse(sc.decode(rawBrokerName?._rdata))['name'];
sub = state.socket?.subscribe(`$memphis_ws_pubs.station_overview_data.${stationName}.${stationState?.stationPartition || -1}.${brokerName}`);
listenForUpdates();
}
} catch (err) {
console.error('Error subscribing to station overview data:', err);
}
};

const stopListen = async () => {
if (sub) {
try {
await sub.unsubscribe();
} catch (err) {
console.error('Error unsubscribing from station overview data:', err);
}
}
};

useEffect(() => {
if (state.socket) {
startListen();
}
return () => {
stopListen();
};
}, [state.socket, stationName]);

useEffect(() => {
if (sub && socketOn) {
stopListen();
startListen();
}
}, [stationState?.stationPartition, stationName]);

return (
<StationStoreContext.Provider value={[stationState, stationDispatch]}>
<React.Fragment>
Expand All @@ -174,7 +182,7 @@ const StationOverview = () => {
<StationOverviewHeader refresh={() => getStationDetails()} />
</div>
<div className="station-observability">
<StationObservabilty referredFunction={location?.selectedFunction} />
<StationObservabilty referredFunction={referredFunction} loading={isReloading} />
</div>
</div>
)}
Expand Down
4 changes: 2 additions & 2 deletions ui_src/src/domain/stationOverview/stationObservabilty/components/functionCard/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import { httpRequest } from 'services/http';
import { convertLongNumbers } from 'services/valueConvertor';
import { StationStoreContext } from 'domain/stationOverview';
import FunctionDetails from 'domain/functions/components/functionDetails';
import Drawer from "components/drawer";
import Drawer from 'components/drawer';
import Tooltip from 'components/tooltip/tooltip';

export default function FunctionCard({
Expand Down Expand Up @@ -77,7 +77,7 @@ export default function FunctionCard({
try {
const data = await httpRequest(
'GET',
`${ApiEndpoints.GET_FUNCTIONS_OVERVIEW}?station_name=${stationState?.stationMetaData?.name}&partition=${stationState?.stationPartition || -1}`
`${ApiEndpoints.GET_FUNCTIONS_OVERVIEW}?station_name=${stationState?.stationMetaData?.name}&partition=${stationState?.stationPartition || 1}`
);
stationDispatch({ type: 'SET_STATION_FUNCTIONS', payload: data });
} catch (e) {
Expand Down
2 changes: 1 addition & 1 deletion ui_src/src/domain/stationOverview/stationObservabilty/components/functionData/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import { ReactComponent as CodeGrayIcon } from 'assets/images/codeGrayIcon.svg';
import { ReactComponent as PurpleQuestionMark } from 'assets/images/purpleQuestionMark.svg';
import { parsingDate, messageParser } from 'services/valueConvertor';
import Spinner from 'components/spinner';
import Drawer from "components/drawer";
import Drawer from 'components/drawer';
import { IoClose } from 'react-icons/io5';
import OverflowTip from 'components/tooltip/overflowtip';

Expand Down
30 changes: 15 additions & 15 deletions ui_src/src/domain/stationOverview/stationObservabilty/components/functionsOverview/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { ReactComponent as AddFunctionIcon } from 'assets/images/addFunction.svg
import { ReactComponent as PlusIcon } from 'assets/images/plusIcon.svg';
import { ReactComponent as ProcessedIcon } from 'assets/images/processIcon.svg';
import { IoClose } from 'react-icons/io5';
import Drawer from "components/drawer";
import Drawer from 'components/drawer';
import dataPassLineLottie from 'assets/lotties/dataPassLine.json';
import dataPassLineEmptyLottie from 'assets/lotties/dataPassLineEmpty.json';
import Lottie from 'lottie-react';
Expand All @@ -34,7 +34,7 @@ import Spinner from 'components/spinner';

let sub;

const FunctionsOverview = ({ referredFunction, dismissFunction, moveToGenralView }) => {
const FunctionsOverview = ({ referredFunction, dismissFunction, moveToGenralView, loading }) => {
const [stationState, stationDispatch] = useContext(StationStoreContext);
const [currentFunction, setCurrentFunction] = useState(null);
const [functionDetails, setFunctionDetails] = useState(null);
Expand Down Expand Up @@ -129,7 +129,7 @@ const FunctionsOverview = ({ referredFunction, dismissFunction, moveToGenralView
try {
const data = await httpRequest(
'GET',
`${ApiEndpoints.GET_FUNCTIONS_OVERVIEW}?station_name=${stationState?.stationMetaData?.name}&partition=${stationState?.stationPartition || -1}`
`${ApiEndpoints.GET_FUNCTIONS_OVERVIEW}?station_name=${stationState?.stationMetaData?.name}&partition=${stationState?.stationPartition || 1}`
);
stationDispatch({ type: 'SET_STATION_FUNCTIONS', payload: data });
setLoading(false);
Expand All @@ -154,7 +154,7 @@ const FunctionsOverview = ({ referredFunction, dismissFunction, moveToGenralView

const handleAddFunction = async (requestBody) => {
requestBody.station_name = stationState?.stationMetaData?.name;
requestBody.partition = stationState?.stationPartition || -1;
requestBody.partition = stationState?.stationPartition || 1;
try {
await httpRequest('POST', ApiEndpoints.ADD_FUNCTION, requestBody);
getFunctionsOverview();
Expand Down Expand Up @@ -212,20 +212,19 @@ const FunctionsOverview = ({ referredFunction, dismissFunction, moveToGenralView
<Lottie animationData={isDataMoving ? dataPassLineLottie : dataPassLineEmptyLottie} loop={true} />
<Lottie animationData={isDataMoving ? dataPassLineLottie : dataPassLineEmptyLottie} loop={true} />
</div>
{isLoading && (
{isLoading || loading ? (
<div className="loading">
<Spinner />
</div>
)}
{stationState?.stationFunctions?.functions && stationState?.stationFunctions?.functions?.length > 0 && (
) : stationState?.stationFunctions?.functions && stationState?.stationFunctions?.functions?.length > 0 ? (
<div className="function-overview">
<div className="tab-functions-inner-left">
<div className={stationState?.stationFunctions?.functions?.length < 2 ? `tab-functions-inner-one-card` : `tab-functions-inner-cards`}>
{stationState?.stationFunctions?.functions?.map((functionItem, index) => (
<FunctionCard
functionItem={functionItem}
stationName={stationState?.stationMetaData?.name}
partiotionNumber={stationState?.stationPartition || -1}
partiotionNumber={stationState?.stationPartition || 1}
onClick={() => {
setCurrentFunction(functionItem);
setOpenBottomDetails(true);
Expand All @@ -251,14 +250,15 @@ const FunctionsOverview = ({ referredFunction, dismissFunction, moveToGenralView
</div>
</div>
</div>
)}
{stationState?.stationFunctions?.functions?.length === 0 && (
<div className="functions-empty-wrap">
<div className="functions-empty" onClick={() => setOpenFunctionsModal(true)}>
<AddFunctionIcon />
<span>Add Function</span>
) : (
stationState?.stationFunctions?.functions?.length === 0 && (
<div className="functions-empty-wrap">
<div className="functions-empty" onClick={() => setOpenFunctionsModal(true)}>
<AddFunctionIcon />
<span>Add Function</span>
</div>
</div>
</div>
)
)}
</div>
</div>
Expand Down
Loading

0 comments on commit ebb8434

Please sign in to comment.