Skip to content

Commit

Permalink
Add flow table
Browse files Browse the repository at this point in the history
  • Loading branch information
@safchain
Sylvain Afchain authored and safchain committed Jan 31, 2020
1 parent 797e6ba commit 77bc4a7
Show file tree
Hide file tree
Showing 13 changed files with 422 additions and 127 deletions.
229 changes: 118 additions & 111 deletions package-lock.json
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.0.0",
"@fortawesome/fontawesome-free": "^5.10.2",
"@material-ui/core": "^4.3.2",
"@material-ui/core": "^4.9.0",
"@material-ui/icons": "^4.2.1",
"@material-ui/lab": "^4.0.0-alpha.26",
"@types/chai": "^4.2.3",
Expand Down
2 changes: 1 addition & 1 deletion src/ActionPanelStyles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export const styles = (theme: Theme) => createStyles({
lineHeight: 0
},
paper: {
display: 'flex',
display: 'block',
flexWrap: 'wrap',
padding: theme.spacing(2),
marginLeft: 1,
Expand Down
1 change: 0 additions & 1 deletion src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -911,7 +911,6 @@ class App extends React.Component<Props, State> {
<List>{helpListItems}</List>
</Drawer>
<main className={classes.content}>
<div className={classes.appBarSpacer} />
<Container maxWidth="xl" className={classes.container}>
<Topology className={classes.topology} ref={node => this.tc = node} nodeAttrs={this.nodeAttrs.bind(this)} linkAttrs={this.linkAttrs.bind(this)}
onNodeSelected={this.onNodeSelected.bind(this)}
Expand Down
3 changes: 2 additions & 1 deletion src/AppStyles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,6 @@ export const styles = (theme: Theme) => createStyles({
width: theme.spacing(0),
},
},
appBarSpacer: theme.mixins.toolbar,
content: {
flexGrow: 1,
height: '100vh',
Expand Down Expand Up @@ -202,6 +201,8 @@ export const styles = (theme: Theme) => createStyles({
marginLeft: theme.spacing(3),
width: 'auto',
},
lineHeight: 1,
fontSize: '2rem'
},
filtersPanel: {
position: 'absolute',
Expand Down
95 changes: 95 additions & 0 deletions src/CaptureForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,17 @@ import TextField from '@material-ui/core/TextField'
import Button from '@material-ui/core/Button'
import { withStyles } from '@material-ui/core/styles'
import VideocamIcon from '@material-ui/icons/Videocam'
import ExpansionPanel from '@material-ui/core/ExpansionPanel'
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'
import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
import InputLabel from '@material-ui/core/InputLabel'
import Select from '@material-ui/core/Select'
import MenuItem from '@material-ui/core/MenuItem'
import FormControl from '@material-ui/core/FormControl'
import Typography from '@material-ui/core/Typography'
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox'

import { Configuration } from './api/configuration'
import ActionPanel from './ActionPanel'
Expand Down Expand Up @@ -93,6 +104,90 @@ class CaptureForm extends React.Component<Props, State> {
margin="normal"
fullWidth
/>
<ExpansionPanel className={classes.advanced}>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
className={classes.advancedSummary}
>
<Typography className={classes.heading}>Advanced options</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<FormControl className={classes.control}>
<InputLabel id="capture-type-label"
className={classes.selectField}>Capture Type</InputLabel>
<Select
id="capture-type"
value="Default"
labelId="capture-type-label"
>
<MenuItem>PCAP (Packet Capture library based probe)</MenuItem>
<MenuItem>AFPacket (MMap'd AF_PACKET socket reading)</MenuItem>
<MenuItem>sFlow (Socket reading sFlow frames)</MenuItem>
<MenuItem>DPDK</MenuItem>
<MenuItem>OVS Mirror (Leverages mirroring to capture - experimental)</MenuItem>
<MenuItem>eBPF (Flow capture within kernel - experimental)</MenuItem>
</Select>
</FormControl>
<FormControl className={classes.control}>
<InputLabel id="layer-key-label"
className={classes.selectField}>Layers used for Flow Key</InputLabel>
<Select
id="layer-key"
value="Default"
labelId="layer-key-label"
>
<MenuItem>L2 (uses Layer 2 and beyond)</MenuItem>
<MenuItem>L3 (uses layer 3 and beyond)</MenuItem>
</Select>
</FormControl>
<TextField
id="standard-basic"
className={classes.textField}
label="Header size"
margin="normal"
fullWidth
/>
<FormControl className={classes.control}>
<FormControlLabel
control={
<Checkbox
value=""
color="primary"
/>
}
label="Extra TCP metric"
/>
<FormControlLabel
control={
<Checkbox
value=""
color="primary"
/>
}
label="Defragment IPv4 packets"
/>
<FormControlLabel
control={
<Checkbox
value=""
color="primary"
/>
}
label="Reassemble TCP packets"
/>
</FormControl>
<TextField
id="standard-basic"
className={classes.textField}
label="Raw packet limit"
margin="normal"
fullWidth
value="0"
/>
</ExpansionPanelDetails>
</ExpansionPanel>
<Button variant="contained" className={classes.button} color="primary" onClick={this.onClick.bind(this)}>
Start
</Button>
Expand Down
27 changes: 27 additions & 0 deletions src/CaptureFormStyles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,5 +24,32 @@ export const styles = (theme: Theme) => createStyles({
},
button: {
margin: theme.spacing(1),
},
control: {
display: "block !important",
"& .MuiInputBase-root": {
display: "block !important"
},
marginTop: 36,
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1)
},
advanced: {
boxShadow: "unset !important",
'&::before': {
top: 0,
height: 0
}
},
advancedSummary: {
padding: 0,
marginLeft: 8,
marginRight: 8,
color: "#061775",
backgroundColor: "unset !important",
borderColor: "unset",
'& .MuiExpansionPanelSummary-content': {
backgroundColor: "unset",
}
}
})
4 changes: 4 additions & 0 deletions src/Config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -500,6 +500,10 @@ var DefaultConfig = {
label: ""
}

if (link.data.RelationType === "layer2") {
attrs.classes.push("traffic")
}

if (link.data.Directed) {
attrs.directed = true
}
Expand Down
3 changes: 2 additions & 1 deletion src/DataNormalizer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export interface Column {
options: {
sortDirection: string
filterList: Array<any>
display: string
}
}

Expand Down Expand Up @@ -56,7 +57,7 @@ export class Result {

let dir = this._columns.length === 0 ? 'none' : 'none'

this._columns.push({ "name": name, options: { sortDirection: dir, filterList: new Array<any>() } })
this._columns.push({ "name": name, options: { sortDirection: dir, filterList: new Array<any>(), display: 'true' } })
}
}

Expand Down
17 changes: 10 additions & 7 deletions src/DataPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,17 +36,18 @@ interface Props {
classes: any
defaultExpanded?: boolean
normalizer?: (data: any) => any
flatten?: boolean
graph?: (data: any) => Graph
exclude?: Array<string>
sortKeys?: Array<string>
filterKeys?: Array<string>
defaultColumns?: Array<string>
}

interface State {
isExpanded: boolean
data: Result
filterKeys?: Array<string>
columns?: Array<string>
}

class DataPanel extends React.Component<Props, State> {
Expand All @@ -55,11 +56,12 @@ class DataPanel extends React.Component<Props, State> {

constructor(props) {
super(props)

this.state = {
isExpanded: props.defaultExpanded,
data: DataPanel.normalizeData(props.data, props.normalizer),
filterKeys: DataPanel.normalizeFilterKeys(props.data, props.filterKeys)
filterKeys: DataPanel.normalizeFilterKeys(props.data, props.filterKeys),
columns: props.columns,
}
}

Expand All @@ -68,7 +70,7 @@ class DataPanel extends React.Component<Props, State> {
return dataNormalizer.normalize(data)
}

static normalizeFilterKeys(data: any, filterKeys: Array<string>|undefined): Array<string>|undefined {
static normalizeFilterKeys(data: any, filterKeys: Array<string> | undefined): Array<string> | undefined {
if (!filterKeys) {
return
}
Expand All @@ -79,7 +81,7 @@ class DataPanel extends React.Component<Props, State> {
if (state.isExpanded) {
return {
data: DataPanel.normalizeData(props.data, props.normalizer, props.graph, props.exclude, props.sortKeys),
filterKeys: DataPanel.normalizeFilterKeys(props.data, props.filterKeys)
filterKeys: DataPanel.normalizeFilterKeys(props.data, props.filterKeys)
}
}
return null
Expand All @@ -93,7 +95,7 @@ class DataPanel extends React.Component<Props, State> {
this.setState(
{
data: DataPanel.normalizeData(this.state.data, this.props.normalizer, this.props.graph, this.props.exclude, this.props.sortKeys),
filterKeys: DataPanel.normalizeFilterKeys(this.state.data, this.props.filterKeys),
filterKeys: DataPanel.normalizeFilterKeys(this.state.data, this.props.filterKeys),
}
)
}
Expand All @@ -117,7 +119,8 @@ class DataPanel extends React.Component<Props, State> {
this.state.data.rows.length && this.state.isExpanded &&
(
<DataViewer columns={this.state.data.columns} data={this.state.data.rows} filterKeys={this.state.filterKeys}
graph={this.state.data.graph} details={this.state.data.details} onFilterReset={this.onFilterReset.bind(this)}/>
graph={this.state.data.graph} details={this.state.data.details} onFilterReset={this.onFilterReset.bind(this)}
defaultColumns={this.props.defaultColumns} />
)
}
</ExpansionPanelDetails>
Expand Down
25 changes: 21 additions & 4 deletions src/DataViewer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ interface Props {
details: Map<number, any>
filterKeys?: Array<string>
onFilterReset?: () => void
defaultColumns?: Array<string>
}

interface State {
Expand All @@ -49,10 +50,13 @@ interface State {
export class DataViewer extends React.Component<Props, State> {

state: State
applyDefaultColumns: boolean

constructor(props) {
super(props)

this.applyDefaultColumns = true

this.state = {
sortField: "",
sortDirection: "none",
Expand All @@ -62,17 +66,19 @@ export class DataViewer extends React.Component<Props, State> {
}

static getDerivedStateFromProps(props, state) {
if (props.defaultColumns) {
state.defaultColumns = props.defaultColumns
}

if (props.graph) {
var graph = props.graph
if (state.graph) {
graph.data = state.graph.data.concat(graph.data.slice(1))
}
return {
graph: graph
}
state.graph = graph
}

return null
return state
}

private resetFilter() {
Expand Down Expand Up @@ -132,6 +138,10 @@ export class DataViewer extends React.Component<Props, State> {
onColumnSortChange: (field: string, direction: string) => {
this.setState({ sortField: field, sortDirection: direction })
},
onColumnViewChange: (column: string, action: string) => {
console.log(column)
console.log(action)
},
onFilterChange: (field: string, filterList: Array<any>) => {
var newList = new Array<any>()

Expand Down Expand Up @@ -162,6 +172,12 @@ export class DataViewer extends React.Component<Props, State> {
}
}

if (this.applyDefaultColumns && this.props.defaultColumns) {
if (!this.props.defaultColumns.includes(column.name)) {
column.options.display = 'false'
}
}

// use value from config first
if (column.name === "Key" && this.props.filterKeys) {
column.options.filterList = this.props.filterKeys
Expand All @@ -172,6 +188,7 @@ export class DataViewer extends React.Component<Props, State> {
column.options.filterList = filterList
}
}
this.applyDefaultColumns = false

return (
<React.Fragment>
Expand Down
Loading

0 comments on commit 77bc4a7

Please sign in to comment.