overflow_backup_2018_0455/overflow_app
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

inggggggggggg

Browse Source
This commit is contained in:
insanity 2017-11-07 20:10:39 +09:00
parent 18326b4c1c
commit 9233f75f6f
8 changed files with 650 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/ts/@overflow/app/config/index.ts
View File

@ -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

14
src/ts/@overflow/commons/util/Utils.tsx
View File

@ -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, '');
}

54
src/ts/@overflow/metric/react/components/Metric.tsx
View File

@ -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<Props, State> {
private loadInterval: any;
constructor(props: Props, context: State) {
super(props, context);
this.state = {
@ -28,6 +30,7 @@ export class Metric extends React.Component<Props, State> {
};
}
public componentWillMount(): void {
const data = [];
for (let i = 0; i < 10; i++) {
@ -69,27 +72,44 @@ export class Metric extends React.Component<Props, State> {
{ name: 'Free', value: 20, fill: '#82ca9d', unit: '%' },
];
return (
<div>
CPU Load
<LoadChartLinux itemKey={'cpu.load.all'}/>
CPU Total
<CPUChartLinux itemKey={'cpu.usage.all'}/>
CPU User
<CPUChartLinux itemKey={'cpu.usage.user'}/>
Memory Total
<MemChartLinux itemKey={'mem.usage.all'}/>
Memory Free
<MemChartLinux itemKey={'mem.usage.free'}/>
Swap Total
<MemChartLinux itemKey={'mem.swap.usage.all'}/>
Network Errors
<NetworkChartLinux itemKey={'net[1].transfer.err'}/>
Network PPS
<NetworkChartLinux itemKey={'net[1].transfer.pps'}/>
Network BPS
<NetworkChartLinux itemKey={'net[1].transfer.bps'}/>
</div>
);
}
<AreaChart syncId='anyId' width={800} height={300}
data={this.state.data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} >
<XAxis dataKey='id' />
<YAxis type='number' domain={[0, 100]} unit='%' />
{/* <CartesianGrid stroke='#ccc' /> */}
<CartesianGrid strokeDasharray='5 5' />
}
/*
<CartesianGrid strokeDasharray='5 5' />
<Tooltip content={this.showTooltipData.bind(this)} />
<Legend />
<Area type='monotone' dataKey='usage' stroke='#8884d8' fill='#82ca9d' unit='%' name='Usage' activeDot={{ r: 7 }} />
<Brush startIndex={3} height={30} />
<Brush startIndex={3} height={30} />;
</AreaChart>
<LineChart syncId='anyId' width={800} height={300}
data={this.state.data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} >
<XAxis dataKey='id' />
<YAxis />
{/* <CartesianGrid stroke='#ccc' /> */}
<CartesianGrid strokeDasharray='3 3' />
<Tooltip />
<Legend />
@ -122,7 +142,7 @@ export class Metric extends React.Component<Props, State> {
<PieChart width={800} height={400}>
<text fontSize='20px' x='50%' y='50%' dy={8} textAnchor='middle' fill='#8884d8'>
{chartData[0].value}%
{chartData[0].value}%
</text>
<Pie data={chartData}
cx='50%'
@ -134,12 +154,4 @@ export class Metric extends React.Component<Props, State> {
/>
</PieChart>
</div>
);
}
}
*/

125
src/ts/@overflow/metric/react/components/chart/CPUChartLinux.tsx Normal file
View File

@ -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<Props, State> {
constructor(props: Props, context: State) {
super(props, context);
this.state = {
data: undefined,
};
}
public componentWillMount(): void {
this.getData();
}
public render(): JSX.Element {
return (
<ResponsiveContainer width={'100%'} height={300}>
<AreaChart syncId='sync' width={600} height={300}
data={this.state.data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} >
<XAxis dataKey='id' />
<YAxis type='number' domain={[0, 100]} unit='%' />
{/* <CartesianGrid stroke='#ccc' /> */}
<CartesianGrid strokeDasharray='5 5' />
<Tooltip content={this.showTooltipData.bind(this)} />
<Legend />
<Area type='monotone' dataKey={this.props.itemKey} stroke='#8884d8' fill='#82ca9d' unit='%' name='Usage' activeDot={{ r: 7 }} />
</AreaChart>
</ResponsiveContainer>
);
}
private showTooltipData = (data: any) => {
if (data.active && data.payload) {
if (this.props.itemKey === 'cpu.usage.all') {
return (
<div style={{ backgroundColor: 'white', opacity: 0.7, border: '1px solid black', padding: '4px' }}>
<p><b>{`Usage : ${data.payload[0].value}%`}</b></p>
<p>{`User : ${data.payload[0].payload['cpu.usage.user']}`}</p>
<p>{`System : ${data.payload[0].payload['cpu.usage.system']}`}</p>
<p>{`Nice : ${data.payload[0].payload['cpu.usage.nice']}`}</p>
<p>{`Idle : ${data.payload[0].payload['cpu.usage.idle']}`}</p>
<p>{`IOWait : ${data.payload[0].payload['cpu.usage.iowait']}`}</p>
<p>{`IRQ : ${data.payload[0].payload['cpu.usage.irq']}`}</p>
<p>{`SoftIRQ : ${data.payload[0].payload['cpu.usage.softirq']}`}</p>
<p>{`Steal : ${data.payload[0].payload['cpu.usage.steal']}`}</p>
<p>{`Guest : ${data.payload[0].payload['cpu.usage.guest']}`}</p>
<p>{`GuestNice : ${data.payload[0].payload['cpu.usage.gnice']}`}</p>
</div>
);
}else {
return (
<div style={{ backgroundColor: 'white', opacity: 0.7, border: '1px solid black', padding: '4px' }}>
<p><b>{`Usage : ${data.payload[0].value}%`}</b></p>
</div>
);
}
}
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;
}
}

115
src/ts/@overflow/metric/react/components/chart/LoadChartLinux.tsx Normal file
View File

@ -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<Props, State> {
constructor(props: Props, context: State) {
super(props, context);
this.state = {
data: undefined,
};
}
public componentWillMount(): void {
this.getData();
}
public render(): JSX.Element {
return (
<ResponsiveContainer width={'100%'} height={300}>
<LineChart syncId='sync' width={800} height={300}
data={this.state.data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} >
<XAxis dataKey='id' />
<YAxis type='number' domain={[0, 1]} />
<CartesianGrid strokeDasharray='3 3' />
<Tooltip />
<Legend />
<Line type='monotone' dataKey={'cpu.load.avg1'} stroke='#8884d8' activeDot={{ r: 8 }} />
<Line type='monotone' dataKey={'cpu.load.avg5'} stroke='#d88884' activeDot={{ r: 8 }} />
<Line type='monotone' dataKey={'cpu.load.avg15'} stroke='#8848d8' activeDot={{ r: 8 }} />
</LineChart>
</ResponsiveContainer>
);
}
private showTooltipData = (data: any) => {
if (data.active && data.payload) {
if (this.props.itemKey === 'cpu.load.all') {
return (
<div style={{ backgroundColor: 'white', opacity: 0.7, border: '1px solid black', padding: '4px' }}>
<p><b>{`Usage : ${data.payload[0].value}%`}</b></p>
<p>{`User : ${data.payload[0].payload['cpu.usage.user']}`}</p>
</div>
);
} else {
return (
<div style={{ backgroundColor: 'white', opacity: 0.7, border: '1px solid black', padding: '4px' }}>
<p><b>{`Usage : ${data.payload[0].value}%`}</b></p>
</div>
);
}
}
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,
});
}
}

151
src/ts/@overflow/metric/react/components/chart/MemChartLinux.tsx Normal file
View File

@ -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<Props, State> {
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 = <YAxis type='number' domain={[0, 100]} unit='%' />;
}else {
yAxis = <YAxis type='number' domain={[0, 'auto']} unit='mb'/>;
}
return (
<ResponsiveContainer width={'100%'} height={300}>
<AreaChart syncId='sync' width={600} height={300}
data={this.state.data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} >
<XAxis dataKey='id' />
{yAxis}
<CartesianGrid strokeDasharray='5 5' />
<Tooltip content={this.showTooltipData.bind(this)} />
<Legend />
<Area type='monotone' dataKey={this.props.itemKey} stroke='#8884d8' fill='#35344A' unit='%' name='Usage' activeDot={{ r: 7 }} />
</AreaChart>
</ResponsiveContainer>
);
}
private showTooltipData = (data: any) => {
if (data.active && data.payload) {
if (this.props.itemKey === 'mem.usage.all') {
return (
<div style={{ backgroundColor: 'white', opacity: 0.7, border: '1px solid black', padding: '4px' }}>
<p><b>{`Usage : ${data.payload[0].value}%`}</b></p>
<p>{`Total : ${data.payload[0].payload['mem.usage.total']} kb`}</p>
<p>{`Free : ${data.payload[0].payload['mem.usage.free']} kb`}</p>
<p>{`Available : ${data.payload[0].payload['mem.usage.available']} kb`}</p>
<p>{`Buffers : ${data.payload[0].payload['mem.usage.buffers']} kb`}</p>
<p>{`Cached : ${data.payload[0].payload['mem.usage.cached']} kb`}</p>
<p>{`Swap Total : ${data.payload[0].payload['mem.swap.usage.total']} kb`}</p>
<p>{`Swap Free : ${data.payload[0].payload['mem.swap.usage.free']} kb`}</p>
<p>{`Swap Cached : ${data.payload[0].payload['mem.swap.usage.cached']} kb`}</p>
</div>
);
} else if (this.props.itemKey === 'mem.swap.usage.all') {
return (
<div style={{ backgroundColor: 'white', opacity: 0.7, border: '1px solid black', padding: '4px' }}>
<p><b>{`Usage : ${data.payload[0].value}%`}</b></p>
<p>{`Swap Total : ${data.payload[0].payload['mem.swap.usage.total']} kb`}</p>
<p>{`Swap Free : ${data.payload[0].payload['mem.swap.usage.free']} kb`}</p>
<p>{`Swap Cached : ${data.payload[0].payload['mem.swap.usage.cached']} kb`}</p>
</div>
);
} else {
return (
<div style={{ backgroundColor: 'white', opacity: 0.7, border: '1px solid black', padding: '4px' }}>
<p><b>{`Usage : ${data.payload[0].value} mb`}</b></p>
</div>
);
}
}
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;
}
}

150
src/ts/@overflow/metric/react/components/chart/NetworkChartLinux.tsx Normal file
View File

@ -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<Props, State> {
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 (
<ResponsiveContainer width={'100%'} height={300}>
<LineChart syncId='sync' width={800} height={300}
data={this.state.data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} >
<XAxis dataKey='id' />
<YAxis type='number' domain={[0, 'auto']} />
<CartesianGrid strokeDasharray='3 3' />
<Tooltip />
<Legend />
<Line type='monotone' dataKey={dataKey1} stroke='#8884d8' activeDot={{ r: 8 }} />
<Line type='monotone' dataKey={dataKey2} stroke='#d88884' activeDot={{ r: 8 }} />
</LineChart>
</ResponsiveContainer>
);
}
private showTooltipData = (data: any) => {
// if (data.active && data.payload) {
// if (this.props.itemKey === 'cpu.load.all') {
// return (
// <div style={{ backgroundColor: 'white', opacity: 0.7, border: '1px solid black', padding: '4px' }}>
// <p><b>{`Usage : ${data.payload.value}%`}</b></p>
// <p>{`User : ${data.payload.payload['cpu.usage.user']}`}</p>
// </div>
// );
// } else {
// return (
// <div style={{ backgroundColor: 'white', opacity: 0.7, border: '1px solid black', padding: '4px' }}>
// <p><b>{`Usage : ${data.payload.value}%`}</b></p>
// </div>
// );
// }
// }
// 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;
}
}

61
src/ts/@overflow/metric/react/components/chart/ProcessLinux.tsx Normal file
View File

@ -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<Props, State> {
constructor(props: Props, context: State) {
super(props, context);
this.state = {
data: undefined,
};
}
public componentWillMount(): void {
this.getData();
}
public render(): JSX.Element {
return (
<Container fluid>
<Table selectable striped celled>
<Table.Header>
<Table.Row>
<Table.HeaderCell textAlign={'center'}>Name</Table.HeaderCell>
<Table.HeaderCell textAlign={'center'}>CIDR</Table.HeaderCell>
<Table.HeaderCell textAlign={'center'}>IP</Table.HeaderCell>
<Table.HeaderCell textAlign={'center'}>Status</Table.HeaderCell>
<Table.HeaderCell textAlign={'center'}>Target Count</Table.HeaderCell>
<Table.HeaderCell textAlign={'center'}>Sensor Count</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{this.renderRows()}
</Table.Body>
</Table>
</Container>
);
}
private renderRows(): JSX.Element {
return null;
}
private getData(): void {
let tempData = null;
}
}