From 9233f75f6fc57e1205439d686a3dcd11d123fe77 Mon Sep 17 00:00:00 2001 From: insanity Date: Tue, 7 Nov 2017 20:10:39 +0900 Subject: [PATCH] inggggggggggg --- src/ts/@overflow/app/config/index.ts | 2 +- src/ts/@overflow/commons/util/Utils.tsx | 14 ++ .../metric/react/components/Metric.tsx | 54 ++++--- .../react/components/chart/CPUChartLinux.tsx | 125 +++++++++++++++ .../react/components/chart/LoadChartLinux.tsx | 115 +++++++++++++ .../react/components/chart/MemChartLinux.tsx | 151 ++++++++++++++++++ .../components/chart/NetworkChartLinux.tsx | 150 +++++++++++++++++ .../react/components/chart/ProcessLinux.tsx | 61 +++++++ 8 files changed, 650 insertions(+), 22 deletions(-) create mode 100644 src/ts/@overflow/metric/react/components/chart/CPUChartLinux.tsx create mode 100644 src/ts/@overflow/metric/react/components/chart/LoadChartLinux.tsx create mode 100644 src/ts/@overflow/metric/react/components/chart/MemChartLinux.tsx create mode 100644 src/ts/@overflow/metric/react/components/chart/NetworkChartLinux.tsx create mode 100644 src/ts/@overflow/metric/react/components/chart/ProcessLinux.tsx diff --git a/src/ts/@overflow/app/config/index.ts b/src/ts/@overflow/app/config/index.ts index e20d6ab..57ade35 100644 --- a/src/ts/@overflow/app/config/index.ts +++ b/src/ts/@overflow/app/config/index.ts @@ -78,7 +78,7 @@ export interface RPCConfig { url: string; } const rpcConfig: RPCConfig = { - url: 'ws://192.168.1.50:19090/web', + url: 'ws://192.168.1.209:19090/web', }; // REST Server Configuration diff --git a/src/ts/@overflow/commons/util/Utils.tsx b/src/ts/@overflow/commons/util/Utils.tsx index abe1dc6..a0dc860 100644 --- a/src/ts/@overflow/commons/util/Utils.tsx +++ b/src/ts/@overflow/commons/util/Utils.tsx @@ -42,4 +42,18 @@ export function intToMac(macInt: number): string { return macaddress.join(':'); } +export function compareBracketName(bracketname: string, originalName: string): boolean { + if(bracketname === originalName) { + return true; + } + if(bracketname.replace(/\[.*\]/gi, '') === originalName) { + return true; + } + return false; +} + +export function removeBracket(str: string): string { + return str.replace(/\[.*\]/gi, ''); +} + diff --git a/src/ts/@overflow/metric/react/components/Metric.tsx b/src/ts/@overflow/metric/react/components/Metric.tsx index 76dff46..246dbb7 100644 --- a/src/ts/@overflow/metric/react/components/Metric.tsx +++ b/src/ts/@overflow/metric/react/components/Metric.tsx @@ -4,6 +4,10 @@ import { BarChart, Bar, XAxis, YAxis, ZAxis, Cell, CartesianGrid, Tooltip, Legend, LineChart, Line, ResponsiveContainer, AreaChart, Area, PieChart, Pie, ReferenceLine, Brush, ComposedChart, } from 'recharts'; +import { CPUChartLinux } from './chart/CPUChartLinux'; +import { MemChartLinux } from './chart/MemChartLinux'; +import { LoadChartLinux } from './chart/LoadChartLinux'; +import { NetworkChartLinux } from './chart/NetworkChartLinux'; export interface StateProps { } @@ -19,8 +23,6 @@ export interface State { export class Metric extends React.Component { - private loadInterval: any; - constructor(props: Props, context: State) { super(props, context); this.state = { @@ -28,6 +30,7 @@ export class Metric extends React.Component { }; } + public componentWillMount(): void { const data = []; for (let i = 0; i < 10; i++) { @@ -69,27 +72,44 @@ export class Metric extends React.Component { { name: 'Free', value: 20, fill: '#82ca9d', unit: '%' }, ]; - return (
+ CPU Load + + CPU Total + + CPU User + + Memory Total + + Memory Free + + Swap Total + + Network Errors + + Network PPS + + Network BPS + +
+ ); + } - - - - {/* */} - +} + +/* + - + ; - {/* */} @@ -122,7 +142,7 @@ export class Metric extends React.Component { - {chartData[0].value}% + {chartData[0].value}% { /> - - - - ); - } - -} - - +*/ diff --git a/src/ts/@overflow/metric/react/components/chart/CPUChartLinux.tsx b/src/ts/@overflow/metric/react/components/chart/CPUChartLinux.tsx new file mode 100644 index 0000000..8ee246f --- /dev/null +++ b/src/ts/@overflow/metric/react/components/chart/CPUChartLinux.tsx @@ -0,0 +1,125 @@ +import * as React from 'react'; +import { +} from 'semantic-ui-react'; + +import { + ResponsiveContainer, AreaChart, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Area, Brush, +} from 'recharts'; + +export interface StateProps { +} + +export interface DispatchProps { + itemKey: string; +} + +export type Props = StateProps & DispatchProps; + +export interface State { + data: any; +} + +export class CPUChartLinux extends React.Component { + + constructor(props: Props, context: State) { + super(props, context); + this.state = { + data: undefined, + }; + } + + public componentWillMount(): void { + this.getData(); + } + + public render(): JSX.Element { + return ( + + + + + {/* */} + + + + + + + ); + } + + private showTooltipData = (data: any) => { + if (data.active && data.payload) { + if (this.props.itemKey === 'cpu.usage.all') { + return ( +
+

{`Usage : ${data.payload[0].value}%`}

+

{`User : ${data.payload[0].payload['cpu.usage.user']}`}

+

{`System : ${data.payload[0].payload['cpu.usage.system']}`}

+

{`Nice : ${data.payload[0].payload['cpu.usage.nice']}`}

+

{`Idle : ${data.payload[0].payload['cpu.usage.idle']}`}

+

{`IOWait : ${data.payload[0].payload['cpu.usage.iowait']}`}

+

{`IRQ : ${data.payload[0].payload['cpu.usage.irq']}`}

+

{`SoftIRQ : ${data.payload[0].payload['cpu.usage.softirq']}`}

+

{`Steal : ${data.payload[0].payload['cpu.usage.steal']}`}

+

{`Guest : ${data.payload[0].payload['cpu.usage.guest']}`}

+

{`GuestNice : ${data.payload[0].payload['cpu.usage.gnice']}`}

+
+ ); + }else { + return ( +
+

{`Usage : ${data.payload[0].value}%`}

+
+ ); + } + } + return null; + } + + private getData(): any { + let raws = new Array(); + for (let i = 0; i < 20; i++) { + let d = {'cpu.usage.gnice':'0', 'cpu.usage.guest':'0', 'cpu.usage.idle':'10871098', + 'cpu.usage.iowait':'188483', 'cpu.usage.irq':'0', 'cpu.usage.nice':'2600', + 'cpu.usage.softirq':'7233', 'cpu.usage.steal':'0', 'cpu.usage.sum':'11597797', + 'cpu.usage.system':'174526', 'cpu.usage.user':'353857', + 'date':'2017-10-31 19:30:24.238524358 +0900 KST'}; + raws[i] = d; + } + this.convertData(raws); + } + + private convertData(raws: any): void { + if(this.props.itemKey === 'cpu.usage.all') { + this.convertToTotalUsage(raws); + }else { + this.convertToPartialUsage(raws); + } + this.setState({ + data: raws, + }); + } + + private convertToTotalUsage(raws: any): any { + for (let i = 0; i < raws.length; i++) { + let raw = raws[i]; + let usage = 100 - (raw['cpu.usage.idle'] * 100 / raw['cpu.usage.sum']); + raw['cpu.usage.all'] = usage.toFixed(2); + raw.id = i; + } + return raws; + } + + private convertToPartialUsage(raws: any): any { + for (let i = 0; i < raws.length; i++) { + let raw = raws[i]; + let usage = raw[this.props.itemKey] / raw['cpu.usage.sum'] * 100; + raw[this.props.itemKey] = usage.toFixed(2); + raw.id = i; + } + return raws; + } +} + diff --git a/src/ts/@overflow/metric/react/components/chart/LoadChartLinux.tsx b/src/ts/@overflow/metric/react/components/chart/LoadChartLinux.tsx new file mode 100644 index 0000000..d3eeac1 --- /dev/null +++ b/src/ts/@overflow/metric/react/components/chart/LoadChartLinux.tsx @@ -0,0 +1,115 @@ +import * as React from 'react'; +import { +} from 'semantic-ui-react'; +import { + ResponsiveContainer, LineChart, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Line, Brush, +} from 'recharts'; +import * as _ from 'lodash'; + +export interface StateProps { +} + +export interface DispatchProps { + itemKey: string; +} + +export type Props = StateProps & DispatchProps; + +export interface State { + data: any; +} + +export class LoadChartLinux extends React.Component { + + constructor(props: Props, context: State) { + super(props, context); + this.state = { + data: undefined, + }; + } + + public componentWillMount(): void { + this.getData(); + } + + public render(): JSX.Element { + return ( + + + + + + + + + + + + + ); + } + + private showTooltipData = (data: any) => { + if (data.active && data.payload) { + if (this.props.itemKey === 'cpu.load.all') { + return ( +
+

{`Usage : ${data.payload[0].value}%`}

+

{`User : ${data.payload[0].payload['cpu.usage.user']}`}

+
+ ); + } else { + return ( +
+

{`Usage : ${data.payload[0].value}%`}

+
+ ); + } + } + return null; + } + + private getData(): any { + setInterval(this.getNew, 5000); + let raws = new Array(); + for (let i = 0; i < 10; i++) { + let a = Math.random().toFixed(2); + let b = Math.random().toFixed(2); + let c = Math.random().toFixed(2); + let d = {'cpu.load.avg1':a, 'cpu.load.avg5':b, 'cpu.load.avg15':c}; + raws[i] = d; + } + this.convertData(raws); + } + + private id: number = 10; + private getNew = () => { + + let data = _.clone(this.state.data); + let a = Math.random().toFixed(2); + let b = Math.random().toFixed(2); + let c = Math.random().toFixed(2); + + let newData = {'id': this.id++, 'cpu.load.avg1':a, 'cpu.load.avg5':b, 'cpu.load.avg15': c}; + data.shift(); + data[data.length] = newData; + this.setState({ + data: data, + }); + } + + private convertData(raws: any): void { + for (let i = 0; i < raws.length; i++) { + let raw = raws[i]; + raw['cpu.load.avg1'] = Number(raw['cpu.load.avg1']); + raw['cpu.load.avg5'] = Number(raw['cpu.load.avg5']); + raw['cpu.load.avg15'] = Number(raw['cpu.load.avg15']); + raw.id = i; + } + this.setState({ + data: raws, + }); + } +} + diff --git a/src/ts/@overflow/metric/react/components/chart/MemChartLinux.tsx b/src/ts/@overflow/metric/react/components/chart/MemChartLinux.tsx new file mode 100644 index 0000000..3ef1b58 --- /dev/null +++ b/src/ts/@overflow/metric/react/components/chart/MemChartLinux.tsx @@ -0,0 +1,151 @@ +import * as React from 'react'; +import { +} from 'semantic-ui-react'; + +import { + ResponsiveContainer, AreaChart, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Area, Brush, +} from 'recharts'; + +export interface StateProps { +} + +export interface DispatchProps { + itemKey: string; +} + +export type Props = StateProps & DispatchProps; + +export interface State { + data: any; +} + +export class MemChartLinux extends React.Component { + + constructor(props: Props, context: State) { + super(props, context); + this.state = { + data: undefined, + }; + } + + public componentWillMount(): void { + this.getData(); + } + + public render(): JSX.Element { + let yAxis: JSX.Element = null; + if (this.props.itemKey === 'mem.usage.all' || this.props.itemKey === 'mem.swap.usage.all') { + yAxis = ; + }else { + yAxis = ; + } + return ( + + + + {yAxis} + + + + + + + ); + } + + private showTooltipData = (data: any) => { + if (data.active && data.payload) { + if (this.props.itemKey === 'mem.usage.all') { + return ( +
+

{`Usage : ${data.payload[0].value}%`}

+

{`Total : ${data.payload[0].payload['mem.usage.total']} kb`}

+

{`Free : ${data.payload[0].payload['mem.usage.free']} kb`}

+

{`Available : ${data.payload[0].payload['mem.usage.available']} kb`}

+

{`Buffers : ${data.payload[0].payload['mem.usage.buffers']} kb`}

+

{`Cached : ${data.payload[0].payload['mem.usage.cached']} kb`}

+

{`Swap Total : ${data.payload[0].payload['mem.swap.usage.total']} kb`}

+

{`Swap Free : ${data.payload[0].payload['mem.swap.usage.free']} kb`}

+

{`Swap Cached : ${data.payload[0].payload['mem.swap.usage.cached']} kb`}

+
+ ); + } else if (this.props.itemKey === 'mem.swap.usage.all') { + return ( +
+

{`Usage : ${data.payload[0].value}%`}

+

{`Swap Total : ${data.payload[0].payload['mem.swap.usage.total']} kb`}

+

{`Swap Free : ${data.payload[0].payload['mem.swap.usage.free']} kb`}

+

{`Swap Cached : ${data.payload[0].payload['mem.swap.usage.cached']} kb`}

+
+ ); + } else { + return ( +
+

{`Usage : ${data.payload[0].value} mb`}

+
+ ); + } + } + return null; + } + + private getData(): any { + let raws = new Array(); + for (let i = 0; i < 30; i++) { + let d = { + 'mem.swap.usage.cached': '0', 'mem.swap.usage.free': '475916', 'mem.swap.usage.total': '785916', + 'mem.usage.available': '4606156', 'mem.usage.buffers': '86008', 'mem.usage.cached': '2170568', + 'mem.usage.free': '3409156', 'mem.usage.total': '8102908', + }; + raws[i] = d; + } + this.convertData(raws); + } + + private convertData(raws: any): void { + if (this.props.itemKey === 'mem.usage.all') { + this.convertToTotalUsage(raws); + } else if (this.props.itemKey === 'mem.swap.usage.all') { + this.convertToSwapTotalUsage(raws); + } else { + this.convertToPartialUsage(raws); + } + this.setState({ + data: raws, + }); + } + + private convertToTotalUsage(raws: any): any { + for (let i = 0; i < raws.length; i++) { + let raw = raws[i]; + let used = raw['mem.usage.total'] - raw['mem.usage.free'] - raw['mem.usage.buffers'] - raw['mem.usage.cached']; + let usage = used / raw['mem.usage.total'] * 100; + raw['mem.usage.all'] = usage.toFixed(2); + raw.id = i; + } + return raws; + } + + private convertToSwapTotalUsage(raws: any): any { + for (let i = 0; i < raws.length; i++) { + let raw = raws[i]; + let used = raw['mem.swap.usage.total'] - raw['mem.swap.usage.free'] - raw['mem.swap.usage.cached']; + let usage = Number(used / raw['mem.swap.usage.total'] * 100); + raw['mem.swap.usage.all'] = usage.toFixed(2); + raw.id = i; + } + return raws; + } + + private convertToPartialUsage(raws: any): any { + for (let i = 0; i < raws.length; i++) { + let raw = raws[i]; + let usage = raw[this.props.itemKey] / 1000; + raw[this.props.itemKey] = Number(usage.toFixed(0)); + raw.id = i; + } + return raws; + } +} + diff --git a/src/ts/@overflow/metric/react/components/chart/NetworkChartLinux.tsx b/src/ts/@overflow/metric/react/components/chart/NetworkChartLinux.tsx new file mode 100644 index 0000000..4fc6224 --- /dev/null +++ b/src/ts/@overflow/metric/react/components/chart/NetworkChartLinux.tsx @@ -0,0 +1,150 @@ +import * as React from 'react'; +import { +} from 'semantic-ui-react'; +import { + ResponsiveContainer, LineChart, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Line, Brush, +} from 'recharts'; +import * as Utils from '@overflow/commons/util/Utils'; + + +export interface StateProps { +} + +export interface DispatchProps { + itemKey: string; +} + +export type Props = StateProps & DispatchProps; + +export interface State { + data: any; +} + +export class NetworkChartLinux extends React.Component { + + constructor(props: Props, context: State) { + super(props, context); + this.state = { + data: undefined, + }; + } + + public componentWillMount(): void { + this.getData(); + } + + public render(): JSX.Element { + let dataKey1: string = null; + let dataKey2: string = null; + + if (Utils.compareBracketName(this.props.itemKey, 'net.transfer.err')) { + dataKey1 = 'net.recv.err'; + dataKey2 = 'net.send.err'; + } else if (Utils.compareBracketName(this.props.itemKey, 'net.transfer.pps')) { + dataKey1 = 'net.recv.pps'; + dataKey2 = 'net.send.pps'; + }else if (Utils.compareBracketName(this.props.itemKey, 'net.transfer.bps')) { + dataKey1 = 'net.recv.bps'; + dataKey2 = 'net.send.bps'; + } + return ( + + + + + + + + + + + + ); + } + + private showTooltipData = (data: any) => { + // if (data.active && data.payload) { + // if (this.props.itemKey === 'cpu.load.all') { + // return ( + //
+ //

{`Usage : ${data.payload.value}%`}

+ //

{`User : ${data.payload.payload['cpu.usage.user']}`}

+ //
+ // ); + // } else { + // return ( + //
+ //

{`Usage : ${data.payload.value}%`}

+ //
+ // ); + // } + // } + // return null; + } + + private getData(): any { + let raws = new Array(); + for (let i = 0; i < 10; i++) { + let d = { + 'net.transfer.iface': 'enp0s3', 'net.transfer.recv_byte': '2306759', + 'net.transfer.recv_compressed': '0', 'net.transfer.recv_drop': '0', 'net.transfer.recv_err': '3', + 'net.transfer.recv_fifo': '0', 'net.transfer.recv_frame': '0', 'net.transfer.recv_multicast': '1', + 'net.transfer.recv_packet': '4663', 'net.transfer.send_byte': '1040131', + 'net.transfer.send_compressed': '0', 'net.transfer.send_drop': '0', 'net.transfer.send_err': '7', + 'net.transfer.send_fifo': '0', 'net.transfer.send_frame': '0', 'net.transfer.send_multicast': '0', + 'net.transfer.send_packet': '4016', + }; + raws[i] = d; + } + this.convertData(raws); + } + + private convertData(raws: any): void { + for (let i = 0; i < raws.length; i++) { + let raw = raws[i]; + if(Utils.compareBracketName(this.props.itemKey, 'net.transfer.err')) { + this.calcErr(raw); + }else if(Utils.compareBracketName(this.props.itemKey, 'net.transfer.pps')) { + this.calcPPS(raw); + }else if(Utils.compareBracketName(this.props.itemKey, 'net.transfer.bps')) { + this.calcBPS(raw); + } + } + this.setState({ + data: raws, + }); + } + + private calcErr(raw: any): any { + raw['net.recv.err'] = Number(raw['net.transfer.send_err']); + raw['net.send.err'] = Number(raw['net.transfer.recv_err']); + return raw; + } + + private calcPPS(raw: any): any { + let intervalSec = 5; // temporary + let recvPrev = '3873'; // temporary + let sendPrev = '3368'; // temporary + + let recvCurr = raw['net.transfer.recv_packet']; + let sendCurr = raw['net.transfer.send_packet']; + + raw['net.recv.pps'] = (Number(recvCurr) - Number(recvPrev)) / intervalSec; + raw['net.send.pps'] = (Number(sendCurr) - Number(sendPrev)) / intervalSec; + } + + private calcBPS(raw: any): any { + let intervalSec = 5; // temporary + + let recvPrev = '2106878'; // temporary + let sendPrev = '1000197'; // temporary + + let recvCurr = raw['net.transfer.recv_byte']; // 2306759 + let sendCurr = raw['net.transfer.send_byte']; // 1040131 + + raw['net.recv.bps'] = (Number(recvCurr) - Number(recvPrev)) / intervalSec; + raw['net.send.bps'] = (Number(sendCurr) - Number(sendPrev)) / intervalSec; + } +} + diff --git a/src/ts/@overflow/metric/react/components/chart/ProcessLinux.tsx b/src/ts/@overflow/metric/react/components/chart/ProcessLinux.tsx new file mode 100644 index 0000000..2bd8297 --- /dev/null +++ b/src/ts/@overflow/metric/react/components/chart/ProcessLinux.tsx @@ -0,0 +1,61 @@ +import * as React from 'react'; +import { Container, Table } from 'semantic-ui-react'; + + +export interface StateProps { +} + +export interface DispatchProps { +} + +export type Props = StateProps & DispatchProps; + +export interface State { + data: any; +} + +export class ProcessLinux extends React.Component { + + constructor(props: Props, context: State) { + super(props, context); + this.state = { + data: undefined, + }; + } + + public componentWillMount(): void { + this.getData(); + } + + public render(): JSX.Element { + return ( + + + + + Name + CIDR + IP + Status + Target Count + Sensor Count + + + + + {this.renderRows()} + +
+ + ); + } + + private renderRows(): JSX.Element { + return null; + } + + private getData(): void { + let tempData = null; + } +} +