Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

partition-default-view #1649

Merged
merged 1 commit into from
Jan 23, 2024
Merged

partition-default-view #1649

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 16 additions & 16 deletions ui_src/src/components/partitionsFilter/index.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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