github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-09-24 03:28:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge traffic stats endpoints to one and add auto interval logic (#1174)

Browse Source
This commit is contained in:
gadotroee
2022-07-04 10:01:49 +03:00
committed by GitHub
parent 57078517a4
commit d6944d467c
9 changed files with 138 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
ui-common/src/components/modals/TrafficStatsModal/TimelineBarChart/TimelineBarChart.tsx
View File

@@ -26,7 +26,7 @@ export const TimelineBarChart: React.FC<TimelineBarChartProps> = ({ timeLineBarC
if (!data) return;
const protocolsBarsData = [];
const prtcNames = [];
data.forEach(protocolObj => {
data.sort((a, b) => a.timestamp < b.timestamp ? -1 : 1).forEach(protocolObj => {
let newProtocolbj: { [k: string]: any } = {};
newProtocolbj.timestamp = Utils.getHoursAndMinutes(protocolObj.timestamp);
protocolObj.protocols.forEach(protocol => {
@@ -36,7 +36,6 @@ export const TimelineBarChart: React.FC<TimelineBarChartProps> = ({ timeLineBarC
protocolsBarsData.push(newProtocolbj);
})
const uniqueObjArray = Utils.creatUniqueObjArrayByProp(prtcNames, "name")
protocolsBarsData.sort((a, b) => a.timestamp < b.timestamp ? -1 : 1);
setProtocolStats(protocolsBarsData);
setProtocolsNamesAndColors(uniqueObjArray);
}, [data, timeLineBarChartMode])
@@ -49,7 +48,7 @@ export const TimelineBarChart: React.FC<TimelineBarChartProps> = ({ timeLineBarC
}
const commandsNames = [];
const protocolsCommands = [];
data.forEach(protocolObj => {
data.sort((a, b) => a.timestamp < b.timestamp ? -1 : 1).forEach(protocolObj => {
let newCommandlbj: { [k: string]: any } = {};
newCommandlbj.timestamp = Utils.getHoursAndMinutes(protocolObj.timestamp);
protocolObj.protocols.find(protocol => protocol.name === selectedProtocol)?.methods.forEach(command => {
@@ -59,21 +58,33 @@ export const TimelineBarChart: React.FC<TimelineBarChartProps> = ({ timeLineBarC
})
protocolsCommands.push(newCommandlbj);
})
protocolsCommands.sort((a, b) => a.timestamp < b.timestamp ? -1 : 1);
setcommandNames(commandsNames);
setCommandStats(protocolsCommands);
}, [data, timeLineBarChartMode, selectedProtocol])
const bars = useMemo(() => (commandNames || protocolsNamesAndColors).map((entry) => {
return <Bar key={entry.name || entry} dataKey={entry.name || entry} stackId="a" fill={entry.color || Utils.stringToColor(entry)} />
return <Bar key={entry.name || entry} dataKey={entry.name || entry} stackId="a" fill={entry.color || Utils.stringToColor(entry)} barSize={30} />
}), [protocolsNamesAndColors, commandNames])
const renderTick = (tickProps) => {
const { x, y, payload } = tickProps;
const { index, value } = payload;
if (index % 3 === 0) {
return <text x={x} y={y + 10} textAnchor="end">{`${value}`}</text>;
}
return null;
};
return (
<div className={styles.barChartContainer}>
{protocolStats.length > 0 && <BarChart
width={730}
width={750}
height={250}
data={commandStats || protocolStats}
barCategoryGap={0}
barSize={30}
margin={{
top: 20,
right: 30,
@@ -81,7 +92,7 @@ export const TimelineBarChart: React.FC<TimelineBarChartProps> = ({ timeLineBarC
bottom: 5
}}
>
<XAxis dataKey="timestamp" />
<XAxis dataKey="timestamp" tick={renderTick} tickLine={false} />
<YAxis tickFormatter={(value) => timeLineBarChartMode === "VOLUME" ? Utils.humanFileSize(value) : value} />
<Tooltip formatter={(value) => timeLineBarChartMode === "VOLUME" ? Utils.humanFileSize(value) : value + " Requests"} />
{bars}

21
ui-common/src/components/modals/TrafficStatsModal/TrafficStatsModal.tsx
View File

@@ -13,7 +13,7 @@ const modalStyle = {
top: '6%',
left: '50%',
transform: 'translate(-50%, 0%)',
width: '50vw',
width: '60vw',
height: '82vh',
bgcolor: 'background.paper',
borderRadius: '5px',
@@ -30,14 +30,14 @@ export enum StatsMode {
interface TrafficStatsModalProps {
isOpen: boolean;
onClose: () => void;
getPieStatsDataApi: () => Promise<any>
getTimelineStatsDataApi: () => Promise<any>
getTrafficStatsDataApi: () => Promise<any>
}
export const PROTOCOLS = ["ALL", "gRPC", "REDIS", "HTTP", "GQL", "AMQP", "KFAKA"];
export const PROTOCOLS = ["ALL", "gRPC", "REDIS", "HTTP", "GQL", "AMQP", "KAFKA"];
export const ALL_PROTOCOLS = PROTOCOLS[0];
export const TrafficStatsModal: React.FC<TrafficStatsModalProps> = ({ isOpen, onClose, getPieStatsDataApi, getTimelineStatsDataApi }) => {
export const TrafficStatsModal: React.FC<TrafficStatsModalProps> = ({ isOpen, onClose, getTrafficStatsDataApi }) => {
const modes = Object.keys(StatsMode).filter(x => !(parseInt(x) >= 0));
const [statsMode, setStatsMode] = useState(modes[0]);
@@ -48,14 +48,13 @@ export const TrafficStatsModal: React.FC<TrafficStatsModalProps> = ({ isOpen, on
const commonClasses = useCommonStyles();
const getTrafficStats = useCallback(async () => {
if (isOpen && getPieStatsDataApi) {
if (isOpen && getTrafficStatsDataApi) {
(async () => {
try {
setIsLoading(true);
const pieData = await getPieStatsDataApi();
setPieStatsData(pieData);
const timelineData = await getTimelineStatsDataApi();
setTimelineStatsData(timelineData);
const statsData = await getTrafficStatsDataApi();
setPieStatsData(statsData.pie);
setTimelineStatsData(statsData.timeline);
} catch (e) {
console.error(e)
} finally {
@@ -63,7 +62,7 @@ export const TrafficStatsModal: React.FC<TrafficStatsModalProps> = ({ isOpen, on
}
})()
}
}, [isOpen, getPieStatsDataApi, getTimelineStatsDataApi, setPieStatsData, setTimelineStatsData])
}, [isOpen, getTrafficStatsDataApi, setPieStatsData, setTimelineStatsData])
useEffect(() => {
getTrafficStats();