Skip to content

Commit

Permalink
Add graph and icon to panels
Browse files Browse the repository at this point in the history
  • Loading branch information
safchain committed Oct 21, 2019
1 parent bf5a90e commit 1f803d7
Show file tree
Hide file tree
Showing 12 changed files with 278 additions and 173 deletions.
35 changes: 29 additions & 6 deletions assets/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ var config = {
{
field: "Captures",
expanded: false,
icon: "\uf51f",
normalizer: function (data) {
for (let capture of data) {
capture.ID = capture.ID.split('-')[0]
Expand All @@ -119,20 +120,24 @@ var config = {
},
{
field: "Injections",
expanded: false
expanded: false,
icon: "\uf48e"
},
{
field: "IPV4",
expanded: true
expanded: true,
icon: "\uf1fa"
},
{
field: "IPV6",
expanded: true
expanded: true,
icon: "\uf1fa"
},
{
field: "Metric",
title: "Total metrics",
expanded: false,
icon: "\uf201",
normalizer: function (data) {
return {
RxPackets: data.RxPackets ? data.RxPackets.toLocaleString() : 0,
Expand All @@ -147,6 +152,7 @@ var config = {
field: "LastUpdateMetric",
title: "Last update metrics",
expanded: false,
icon: "\uf201",
normalizer: function (data) {
return {
RxPackets: data.RxPackets ? data.RxPackets.toLocaleString() : 0,
Expand All @@ -156,24 +162,41 @@ var config = {
Start: data.Start ? new Date(data.Start).toLocaleString() : 0,
Last: data.Last ? new Date(data.Last).toLocaleString() : 0
}
},
graph: function (data) {
return {
type: "LineChart",
data: [
[
{ type: "datetime", label: "time" },
"RxBytes",
"TxBytes"
],
[new Date(data.Last || 0), data.RxBytes || 0, data.TxBytes || 0]
]
}
}
},
{
field: "Features",
expanded: false
expanded: false,
icon: "\uf022"
},
{
field: "FDB",
expanded: false
expanded: false,
icon: "\uf0ce"
},
{
field: "Neighbors",
expanded: false
expanded: false,
icon: "\uf0ce"
},
{
field: "RoutingTables",
title: "Routing tables",
expanded: false,
icon: "\uf0ce",
normalizer: function (data) {
var rows = []
for (let table of data) {
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
"react": "^16.8.6",
"react-docgen": "^4.1.1",
"react-dom": "^16.8.6",
"react-google-charts": "^3.0.15",
"react-json-tree": "^0.11.2",
"react-redux": "^7.1.1",
"react-resize-observer": "^1.1.1",
Expand Down
5 changes: 5 additions & 0 deletions src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,11 @@ class App extends React.Component<Props, State> {
return false
}

if (!node.Metadata) {
console.warn("no metadata found: " + node)
return false
}

// ignore Type ofrule
if (node.Metadata.Type === "ofrule") {
return false
Expand Down
18 changes: 16 additions & 2 deletions src/TableDataNormalizer.ts → src/DataNormalizer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,13 @@
*
*/

import { GoogleChartWrapperChartType } from 'react-google-charts/dist/types';

export interface Graph {
type: GoogleChartWrapperChartType
data: Array<Array<any>>
}

export interface Column {
name: string
options: {
Expand All @@ -26,6 +33,7 @@ export interface Column {
export class Result {
private _columns: Array<Column>
private _rows: Array<Map<string, any>>
graph?: Graph

private colIndexes: Map<string, number>

Expand Down Expand Up @@ -92,12 +100,14 @@ export class Result {
}
}

export class TableDataNormalizer {
export class DataNormalizer {

normalizer: ((any) => any) | null
graph: ((any) => Graph) | null

constructor(normalizer?: (any) => any) {
constructor(normalizer?: (any) => any, graph?: ((any) => Graph)) {
this.normalizer = normalizer || null
this.graph = graph || null
}

private normalizeMap(data: any, result: Result) {
Expand Down Expand Up @@ -177,6 +187,10 @@ export class TableDataNormalizer {
normalize(data: any): Result {
var result = new Result()

if (this.graph) {
result.graph = this.graph(data)
}

if (this.normalizer) {
data = this.normalizer(data)
}
Expand Down
3 changes: 3 additions & 0 deletions src/DataPanel.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.MuiExpansionPanelSummary-content{
align-items: center;
}
107 changes: 107 additions & 0 deletions src/DataPanel.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
/*
* Copyright (C) 2019 Sylvain Afchain
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

import * as React from "react"
import ExpansionPanel from '@material-ui/core/ExpansionPanel'
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'
import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
import Typography from '@material-ui/core/Typography'
import { DataViewer } from './DataViewer'
import { DataNormalizer, Result, Graph } from './DataNormalizer'

import './DataPanel.css'

interface Props {
title: string
icon?: string
data: any
classes: any
defaultExpanded?: boolean
normalizer?: (data: any) => any
flatten?: boolean
graph?: (data: any) => Array<Array<any>>
}

interface State {
isExpanded: boolean
data: Result
}

export class DataPanel extends React.PureComponent<Props, State> {

state: State

constructor(props) {
super(props)

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

static normalizeData(data: any, normalizer?: (data: any) => any, graph?: (data: any) => Graph): Result {
var dataNormalizer = new DataNormalizer(normalizer, graph)
return dataNormalizer.normalize(data)
}

static getDerivedStateFromProps(props, state) {
if (state.isExpanded) {
return {
data: DataPanel.normalizeData(props.data, props.normalizer, props.graph)
}
}
return null
}

onExpandChange(event: object, expanded: boolean) {
if (expanded) {
this.setState({ data: DataPanel.normalizeData(this.props.data, this.props.normalizer), isExpanded: expanded })
} else {
this.setState({ isExpanded: expanded })
}
}

componentDidMount() {
console.log(this.props.title)
}

render() {
const { classes } = this.props

return (
<ExpansionPanel defaultExpanded={this.props.defaultExpanded} onChange={this.onExpandChange.bind(this)}>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header">
<Typography className={classes.panelIconFree}>{this.props.icon}</Typography>
<Typography className={classes.heading}>{this.props.title}</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
{
this.state.data.rows.length && this.state.isExpanded &&
(
<DataViewer columns={this.state.data.columns} data={this.state.data.rows} graph={this.state.data.graph} />
)
}
</ExpansionPanelDetails>
</ExpansionPanel>
)
}
}
File renamed without changes.
Loading

0 comments on commit 1f803d7

Please sign in to comment.