github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-08-09 12:29:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix elastic time picker ui css (#1204)

Browse Source
This commit is contained in:
AmitUp9 2022-07-14 11:11:05 +03:00 committed by GitHub
parent d11770681b
commit d4b9fea5a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 62 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
ui-common/src/components/modals/TrafficStatsModal/TimelineBarChart/TimeRangePicker/TimeTangePicker.tsx
View File

@ -1,10 +1,12 @@
import React, { useState, Fragment } from 'react';
import { EuiProvider } from '@elastic/eui';
import {
EuiSuperDatePicker,
EuiSpacer,
} from '@elastic/eui';
import dateMath from '@elastic/datemath';
import '@elastic/eui/dist/eui_theme_light.css';
interface TimeRangePickerProps {
refreshStats: (startTime, endTime) => void;
@ -72,21 +74,23 @@ export const TimeRangePicker: React.FC<TimeRangePickerProps> = ({ refreshStats }
};
return (
<Fragment>
<EuiSpacer />
<EuiSuperDatePicker
width='auto'
isLoading={isLoading}
start={start}
end={end}
onTimeChange={onTimeChange}
onRefresh={onRefresh}
isPaused={isPaused}
refreshInterval={refreshInterval}
onRefreshChange={onRefreshChange}
recentlyUsedRanges={recentlyUsedRanges}
/>
<EuiSpacer />
</Fragment>
<EuiProvider>
<Fragment>
<EuiSpacer />
<EuiSuperDatePicker
width='auto'
isLoading={isLoading}
start={start}
end={end}
onTimeChange={onTimeChange}
onRefresh={onRefresh}
isPaused={isPaused}
refreshInterval={refreshInterval}
onRefreshChange={onRefreshChange}
recentlyUsedRanges={recentlyUsedRanges}
/>
<EuiSpacer />
</Fragment>
</EuiProvider>
);
};

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

@ -7,8 +7,6 @@ import { TimelineBarChart } from "./TimelineBarChart/TimelineBarChart";
import { LoadingWrapper } from "../../UI/withLoading/withLoading";
import { ALL_PROTOCOLS, StatsMode } from "./consts";
import { TimeRangePicker } from "./TimelineBarChart/TimeRangePicker/TimeTangePicker";
import { EuiProvider } from '@elastic/eui';
import '@elastic/eui/dist/eui_theme_light.css';
const modalStyle = {
position: 'absolute',
@ -68,53 +66,51 @@ export const TrafficStatsModal: React.FC<TrafficStatsModalProps> = ({ isOpen, on
}, 500);
return (
<EuiProvider>
<Modal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
open={isOpen}
onClose={onClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{ timeout: 500 }}>
<Fade in={isOpen}>
<Box sx={modalStyle}>
<div className={styles.closeIcon}>
<img src={closeIcon} alt="close" onClick={() => onClose()} style={{ cursor: "pointer", userSelect: "none" }} />
</div>
<div className={styles.headlineContainer}>
<div className={styles.title}>Traffic Statistics</div>
</div>
<div className={styles.mainContainer}>
<div className={styles.selectContainer}>
<div>
<TimeRangePicker refreshStats={refreshStats} />
</div>
<div>
<span style={{ marginRight: 15 }}>Breakdown By</span>
<select className={styles.select} value={statsMode} onChange={(e) => setStatsMode(e.target.value)}>
{modes.map(mode => <option key={mode} value={mode}>{mode}</option>)}
</select>
</div>
<div>
<span style={{ marginRight: 15 }}>Protocol</span>
<select className={styles.select} value={selectedProtocol} onChange={(e) => setSelectedProtocol(e.target.value)}>
{protocols.map(protocol => <option key={protocol} value={protocol}>{protocol}</option>)}
</select>
</div>
<Modal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
open={isOpen}
onClose={onClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{ timeout: 500 }}>
<Fade in={isOpen}>
<Box sx={modalStyle}>
<div className={styles.closeIcon}>
<img src={closeIcon} alt="close" onClick={() => onClose()} style={{ cursor: "pointer", userSelect: "none" }} />
</div>
<div className={styles.headlineContainer}>
<div className={styles.title}>Traffic Statistics</div>
</div>
<div className={styles.mainContainer}>
<div className={styles.selectContainer}>
<div>
<TimeRangePicker refreshStats={refreshStats} />
</div>
<div>
<LoadingWrapper isLoading={isLoading} loaderMargin={20} loaderHeight={50}>
<div>
<TrafficPieChart pieChartMode={statsMode} data={pieStatsData} selectedProtocol={selectedProtocol} />
<TimelineBarChart timeLineBarChartMode={statsMode} data={timelineStatsData} selectedProtocol={selectedProtocol} />
</div>
</LoadingWrapper>
<span style={{ marginRight: 15 }}>Breakdown By</span>
<select className={styles.select} value={statsMode} onChange={(e) => setStatsMode(e.target.value)}>
{modes.map(mode => <option key={mode} value={mode}>{mode}</option>)}
</select>
</div>
<div>
<span style={{ marginRight: 15 }}>Protocol</span>
<select className={styles.select} value={selectedProtocol} onChange={(e) => setSelectedProtocol(e.target.value)}>
{protocols.map(protocol => <option key={protocol} value={protocol}>{protocol}</option>)}
</select>
</div>
</div>
</Box>
</Fade>
</Modal>
</EuiProvider>
<div>
<LoadingWrapper isLoading={isLoading} loaderMargin={20} loaderHeight={50}>
<div>
<TrafficPieChart pieChartMode={statsMode} data={pieStatsData} selectedProtocol={selectedProtocol} />
<TimelineBarChart timeLineBarChartMode={statsMode} data={timelineStatsData} selectedProtocol={selectedProtocol} />
</div>
</LoadingWrapper>
</div>
</div>
</Box>
</Fade>
</Modal>
);
}

1
ui/public/index.html
View File

@ -9,7 +9,6 @@
name="description"
content="Web site created using create-react-app"
/>
<meta name="eui-style-insert">
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a