tomcat jmx begin code

src/ts/@overflow/app/views/layout/AppLayout.tsx

@@ -16,6 +16,7 @@ import TitleBarContainer from '@overflow/app/views/layout/TitleBarContainer';
 import SensorSetup from '../../views/monitoring/sensor/Setup';
 import NotificationList from '../../views/notification/Notification';
 import Metric from '../../views/metric/Metric';
+import TomcatMetric from '../../views/metric/TomcatMetric';
 
 export interface Props extends RouteComponentProps<any> {
 }
@@ -51,6 +52,7 @@ export class AppLayout extends React.Component<Props, State> {
                 <Route exact={true} path={`${this.props.match.url}sensor_setup/:id`} component={SensorSetup}/>
                 <Route exact={true} path={`${this.props.match.url}notifications`} component={NotificationList}/>
                 <Route exact={true} path={`${this.props.match.url}metrics`} component={Metric}/>
+                <Route exact={true} path={`${this.props.match.url}tomcat_metrics`} component={TomcatMetric}/>
                 <Redirect to='/error/404' />
               </Switch>
             </Segment>

src/ts/@overflow/app/views/layout/LeftMenu.tsx

@@ -107,8 +107,15 @@ class LeftMenu extends React.Component<Props, State> {
           <Header inverted sub icon='industry' content='Dashboard' />
         </Menu.Item>
 
-        <Menu.Item name='Metrics'onClick={(e) => this.props.onChangeUrl('/metrics')}>
-          <Header inverted sub icon='tasks' content='Metrics' />
+        <Menu.Item>
+          <Menu.Header name='Metrics' >
+            <Header inverted sub icon='tasks' content='Metrics' />
+          </Menu.Header>
+
+          <Menu.Menu>
+            <Menu.Item onClick={(e) => this.props.onChangeUrl('/metrics')} style={{ 'marginLeft': '30px' }}>CPU</Menu.Item>
+            <Menu.Item onClick={(e) => this.props.onChangeUrl('/tomcat_metrics')} style={{ 'marginLeft': '30px' }}>Tomcat</Menu.Item>
+          </Menu.Menu>
         </Menu.Item>
 
         <Menu.Item name='Alerts' onClick={(e) => this.props.onChangeUrl('/temp/discovery')}>

src/ts/@overflow/app/views/metric/TomcatMetric.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { RouteComponentProps } from 'react-router';
+import TomcatMetricContainer from '@overflow/metric/react/TomcatMetric';
+
+class TomcatMetric extends React.Component<RouteComponentProps<object>, object> {
+
+  public constructor(props?: RouteComponentProps<object>, context?: object) {
+    super(props, context);
+  }
+
+  public render(): JSX.Element {
+    return (
+      <div>
+        <TomcatMetricContainer />
+      </div>
+    );
+  }
+}
+
+export default TomcatMetric;

src/ts/@overflow/metric/react/TomcatMetric.tsx

@@ -0,0 +1,23 @@
+import { connect, Dispatch } from 'react-redux';
+import {
+  TomcatMetric,
+  StateProps as StateProps,
+  DispatchProps as DispatchProps,
+} from './components/TomcatMetric';
+
+import Domain from '@overflow/domain/api/model/Domain';
+import { push as routerPush } from 'react-router-redux';
+import * as asyncRequestActions from '@overflow/commons/redux/action/asyncRequest';
+
+export function mapStateToProps(state: any): StateProps {
+  return {
+  };
+}
+
+export function mapDispatchToProps(dispatch: Dispatch<any>): DispatchProps {
+  return {
+
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(TomcatMetric);

src/ts/@overflow/metric/react/components/TomcatMetric.tsx

@@ -0,0 +1,83 @@
+
+import * as React from 'react';
+import { Button, Label } from 'semantic-ui-react';
+import {
+  BarChart, Bar, XAxis, YAxis, ZAxis, Cell, CartesianGrid, Tooltip, Legend, LineChart, Line,
+  ResponsiveContainer, AreaChart, Area, PieChart, Pie, ReferenceLine, Brush, ComposedChart,
+} from 'recharts';
+
+export interface StateProps {
+}
+
+export interface DispatchProps {
+}
+
+export type Props = StateProps & DispatchProps;
+
+export interface State {
+  data: any;
+}
+
+export class TomcatMetric extends React.Component<Props, State> {
+
+  constructor(props: Props, context: State) {
+    super(props, context);
+    this.state = {
+      data: undefined,
+    };
+  }
+
+  public componentWillMount(): void {
+    const data = [];
+    for (let i = 0; i < 10; i++) {
+      let maxThread = Math.floor(Math.random() * 10000) + 1000;
+      let currentThread = Math.floor(Math.random() * 10000) + 1000;
+      let busyThread = Math.floor(Math.random() * 10000) + 1000;
+
+      let elem = { 'id': i, 'maxThread': maxThread, 'currentThread': currentThread, 'busyThread': busyThread };
+      data[i] = elem;
+    }
+
+    this.setState({
+      data: data,
+    });
+  }
+
+  private showTooltipData = (data: any) => {
+    if (data.active && data.payload) {
+      return (
+        <div style={{ backgroundColor: 'white', opacity: 0.7, border: '1px solid black', padding: '4px' }}>
+          <p><b>{`Total Usage : ${data.payload[0].value}%`}</b></p>
+          <p>{`MaxThread : ${data.payload[0].payload.maxThread}`}</p>
+          <p>{`CurrentThread : ${data.payload[0].payload.currentThread}`}</p>
+          <p>{`BusyThread : ${data.payload[0].payload.busyThread}`}</p>
+        </div>
+      );
+    }
+    return null;
+  }
+
+  public render(): JSX.Element {
+    const chartData = [
+      { name: 'Used', value: 80, fill: '#8884d8', unit: '%' },
+      { name: 'Free', value: 20, fill: '#82ca9d', unit: '%' },
+    ];
+
+    return (
+      <div>
+        <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 content={this.showTooltipData.bind(this)} />
+          <Legend />
+          <ReferenceLine y={9000} label='Warning' stroke='red' />
+          <Line type='monotone' dataKey='current thread' stroke='#8884d8' unit='jiffies' activeDot={{ r: 8 }} />
+          <Line type='monotone' dataKey='busy thread' stroke='#42454a' unit='jiffies' activeDot={{ r: 8 }} />
+        </LineChart>
+      </div>
+    );
+  }
+}