github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-08-11 21:32:37 +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 React, { useState, Fragment } from 'react';
import { EuiProvider } from '@elastic/eui';
import { import {
EuiSuperDatePicker, EuiSuperDatePicker,
EuiSpacer, EuiSpacer,
} from '@elastic/eui'; } from '@elastic/eui';
import dateMath from '@elastic/datemath'; import dateMath from '@elastic/datemath';
import '@elastic/eui/dist/eui_theme_light.css';
interface TimeRangePickerProps { interface TimeRangePickerProps {
refreshStats: (startTime, endTime) => void; refreshStats: (startTime, endTime) => void;
@ -72,21 +74,23 @@ export const TimeRangePicker: React.FC<TimeRangePickerProps> = ({ refreshStats }
}; };
return ( return (
<Fragment> <EuiProvider>
<EuiSpacer /> <Fragment>
<EuiSuperDatePicker <EuiSpacer />
width='auto' <EuiSuperDatePicker
isLoading={isLoading} width='auto'
start={start} isLoading={isLoading}
end={end} start={start}
onTimeChange={onTimeChange} end={end}
onRefresh={onRefresh} onTimeChange={onTimeChange}
isPaused={isPaused} onRefresh={onRefresh}
refreshInterval={refreshInterval} isPaused={isPaused}
onRefreshChange={onRefreshChange} refreshInterval={refreshInterval}
recentlyUsedRanges={recentlyUsedRanges} onRefreshChange={onRefreshChange}
/> recentlyUsedRanges={recentlyUsedRanges}
<EuiSpacer /> />
</Fragment> <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 { LoadingWrapper } from "../../UI/withLoading/withLoading";
import { ALL_PROTOCOLS, StatsMode } from "./consts"; import { ALL_PROTOCOLS, StatsMode } from "./consts";
import { TimeRangePicker } from "./TimelineBarChart/TimeRangePicker/TimeTangePicker"; import { TimeRangePicker } from "./TimelineBarChart/TimeRangePicker/TimeTangePicker";
import { EuiProvider } from '@elastic/eui';
import '@elastic/eui/dist/eui_theme_light.css';
const modalStyle = { const modalStyle = {
position: 'absolute', position: 'absolute',
@ -68,53 +66,51 @@ export const TrafficStatsModal: React.FC<TrafficStatsModalProps> = ({ isOpen, on
}, 500); }, 500);
return ( return (
<EuiProvider> <Modal
<Modal aria-labelledby="transition-modal-title"
aria-labelledby="transition-modal-title" aria-describedby="transition-modal-description"
aria-describedby="transition-modal-description" open={isOpen}
open={isOpen} onClose={onClose}
onClose={onClose} closeAfterTransition
closeAfterTransition BackdropComponent={Backdrop}
BackdropComponent={Backdrop} BackdropProps={{ timeout: 500 }}>
BackdropProps={{ timeout: 500 }}> <Fade in={isOpen}>
<Fade in={isOpen}> <Box sx={modalStyle}>
<Box sx={modalStyle}> <div className={styles.closeIcon}>
<div className={styles.closeIcon}> <img src={closeIcon} alt="close" onClick={() => onClose()} style={{ cursor: "pointer", userSelect: "none" }} />
<img src={closeIcon} alt="close" onClick={() => onClose()} style={{ cursor: "pointer", userSelect: "none" }} /> </div>
</div> <div className={styles.headlineContainer}>
<div className={styles.headlineContainer}> <div className={styles.title}>Traffic Statistics</div>
<div className={styles.title}>Traffic Statistics</div> </div>
</div> <div className={styles.mainContainer}>
<div className={styles.mainContainer}> <div className={styles.selectContainer}>
<div className={styles.selectContainer}> <div>
<div> <TimeRangePicker refreshStats={refreshStats} />
<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>
</div> </div>
<div> <div>
<LoadingWrapper isLoading={isLoading} loaderMargin={20} loaderHeight={50}> <span style={{ marginRight: 15 }}>Breakdown By</span>
<div> <select className={styles.select} value={statsMode} onChange={(e) => setStatsMode(e.target.value)}>
<TrafficPieChart pieChartMode={statsMode} data={pieStatsData} selectedProtocol={selectedProtocol} /> {modes.map(mode => <option key={mode} value={mode}>{mode}</option>)}
<TimelineBarChart timeLineBarChartMode={statsMode} data={timelineStatsData} selectedProtocol={selectedProtocol} /> </select>
</div> </div>
</LoadingWrapper> <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>
</div> </div>
</Box> <div>
</Fade> <LoadingWrapper isLoading={isLoading} loaderMargin={20} loaderHeight={50}>
</Modal> <div>
</EuiProvider> <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" name="description"
content="Web site created using create-react-app" content="Web site created using create-react-app"
/> />
<meta name="eui-style-insert">
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!-- <!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a