github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-08-10 04:48:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

add date to timeline ticks (#1191)

Browse Source
This commit is contained in:
AmitUp9 2022-07-07 14:09:41 +03:00 committed by GitHub
parent 710411e112
commit c010d336bb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui-common/src/components/modals/TrafficStatsModal/TimelineBarChart/TimelineBarChart.module.sass
View File

@ -2,3 +2,7 @@
width: 100% width: 100%
display: flex display: flex
justify-content: center justify-content: center
.axisText
font-size: 12px
opacity: 0.9

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

@ -21,14 +21,14 @@ export const TimelineBarChart: React.FC<TimelineBarChartProps> = ({ timeLineBarC
const [protocolsNamesAndColors, setProtocolsNamesAndColors] = useState([]); const [protocolsNamesAndColors, setProtocolsNamesAndColors] = useState([]);
const [methodsStats, setMethodsStats] = useState(null); const [methodsStats, setMethodsStats] = useState(null);
const [methodsNamesAndColors, setMethodsNamesAndColors] = useState(null); const [methodsNamesAndColors, setMethodsNamesAndColors] = useState(null);
useEffect(() => { useEffect(() => {
if (!data) return; if (!data) return;
const protocolsBarsData = []; const protocolsBarsData = [];
const prtcNames = []; const prtcNames = [];
data.sort((a, b) => a.timestamp < b.timestamp ? -1 : 1).forEach(protocolObj => { data.sort((a, b) => a.timestamp < b.timestamp ? -1 : 1).forEach(protocolObj => {
let newProtocolObj: { [k: string]: any } = {}; let newProtocolObj: { [k: string]: any } = {};
newProtocolObj.timestamp = Utils.getHoursAndMinutes(protocolObj.timestamp); newProtocolObj.timestamp = Utils.formatDate(protocolObj.timestamp);
protocolObj.protocols.forEach(protocol => { protocolObj.protocols.forEach(protocol => {
newProtocolObj[`${protocol.name}`] = protocol[StatsMode[timeLineBarChartMode]]; newProtocolObj[`${protocol.name}`] = protocol[StatsMode[timeLineBarChartMode]];
prtcNames.push({ name: protocol.name, color: protocol.color }); prtcNames.push({ name: protocol.name, color: protocol.color });
@ -50,10 +50,10 @@ export const TimelineBarChart: React.FC<TimelineBarChartProps> = ({ timeLineBarC
const protocolsMethods = []; const protocolsMethods = [];
data.sort((a, b) => a.timestamp < b.timestamp ? -1 : 1).forEach(protocolObj => { data.sort((a, b) => a.timestamp < b.timestamp ? -1 : 1).forEach(protocolObj => {
let newMethodObj: { [k: string]: any } = {}; let newMethodObj: { [k: string]: any } = {};
newMethodObj.timestamp = Utils.getHoursAndMinutes(protocolObj.timestamp); newMethodObj.timestamp = Utils.formatDate(protocolObj.timestamp);
protocolObj.protocols.find(protocol => protocol.name === selectedProtocol)?.methods.forEach(method => { protocolObj.protocols.find(protocol => protocol.name === selectedProtocol)?.methods.forEach(method => {
newMethodObj[`${method.name}`] = method[StatsMode[timeLineBarChartMode]] newMethodObj[`${method.name}`] = method[StatsMode[timeLineBarChartMode]]
protocolsMethodsNamesAndColors.push({name: method.name, color: method.color}); protocolsMethodsNamesAndColors.push({ name: method.name, color: method.color });
}) })
protocolsMethods.push(newMethodObj); protocolsMethods.push(newMethodObj);
}) })
@ -68,17 +68,13 @@ export const TimelineBarChart: React.FC<TimelineBarChartProps> = ({ timeLineBarC
const renderTick = (tickProps) => { const renderTick = (tickProps) => {
const { x, y, payload } = tickProps; const { x, y, payload } = tickProps;
const { index, value } = payload; const { offset, value } = payload;
const pathX = Math.floor(x - offset) + 0.5;
if (protocolStats.length > 5) { return <React.Fragment>
if (index % 3 === 0) { <text x={pathX} y={y + 10} textAnchor="middle" className={styles.axisText}>{`${value}`}</text>;
return <text x={x} y={y + 10} textAnchor="end">{`${value}`}</text>; <path d={`M${pathX},${y - 4}v${-10}`} stroke="red" />;
} </React.Fragment>
return null;
}
else {
return <text x={x} y={y + 10} textAnchor="end">{`${value}`}</text>;
}
}; };
return ( return (
@ -95,8 +91,8 @@ export const TimelineBarChart: React.FC<TimelineBarChartProps> = ({ timeLineBarC
bottom: 5 bottom: 5
}} }}
> >
<XAxis dataKey="timestamp" tick={renderTick} tickLine={false} interval="preserveStart" /> <XAxis dataKey="timestamp" tickLine={false} tick={renderTick} interval="preserveStart"/>
<YAxis tickFormatter={(value) => timeLineBarChartMode === "VOLUME" ? Utils.humanFileSize(value) : value} interval="preserveEnd"/> <YAxis tickFormatter={(value) => timeLineBarChartMode === "VOLUME" ? Utils.humanFileSize(value) : value} interval="preserveEnd" />
<Tooltip formatter={(value) => timeLineBarChartMode === "VOLUME" ? Utils.humanFileSize(value) : value + " Requests"} /> <Tooltip formatter={(value) => timeLineBarChartMode === "VOLUME" ? Utils.humanFileSize(value) : value + " Requests"} />
{bars} {bars}
</BarChart>} </BarChart>}

14
ui-common/src/helpers/Utils.ts
View File

@ -37,6 +37,20 @@ export class Utils {
return hoursAndMinutes; return hoursAndMinutes;
} }
static formatDate = (date) => {
let d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
const hoursAndMinutes = Utils.getHoursAndMinutes(date);
if (month.length < 2)
month = '0' + month;
if (day.length < 2)
day = '0' + day;
const newDate = [year, month, day].join('-');
return [hoursAndMinutes, newDate].join(' ');
}
static creatUniqueObjArrayByProp = (objArray, prop) => { static creatUniqueObjArrayByProp = (objArray, prop) => {
const map = new Map(objArray.map((item) => [item[prop], item])).values() const map = new Map(objArray.map((item) => [item[prop], item])).values()
return Array.from(map); return Array.from(map);