Init

Preview: http://dashboards.webkom.co/react/airframe

app/routes/Dashboards/System/System.js

@@ -0,0 +1,114 @@
+import React from 'react';
+import faker from 'faker/locale/en_US';
+import {
+    Container,
+    Row,
+    Table,
+    Col
+} from './../../../components';
+
+import { HeaderMain } from "../../components/HeaderMain";
+import {
+    CardSystem
+} from "./components/CardSystem"
+import {
+    TrSystem
+} from "./components/trSystem"
+
+const TrColors =  [
+        {
+            fill: "primary-02",
+            stroke: "primary"
+        },
+        {
+            fill: "purple-02",
+            stroke: "purple"
+        },
+        {
+            fill: "success-02",
+            stroke: "success"
+        },
+        {
+            fill: "yellow-02",
+            stroke: "yellow"
+        }
+    ]
+
+const System = () => (
+    <Container>
+        <Row className="mb-5">
+            <Col lg={ 12 }>
+                <HeaderMain 
+                    title="System"
+                    className="mb-4 mb-lg-5"
+                />
+            </Col>
+            <Col lg={ 3 } md={ 6 }>
+               <CardSystem
+                    title="Memory"
+                    badgeColor="primary"
+                    pieColor="primary"
+               />
+            </Col>
+            <Col lg={ 3 } md={ 6 }>
+               <CardSystem
+                    title="CPU"
+                    unit="Mb"
+                    badgeColor="purple"
+                    pieColor="purple"
+               />
+            </Col>
+            <Col lg={ 3 } md={ 6 }>
+                <CardSystem
+                    title="Traffic"
+                    unit="Kb"
+                    badgeColor="success"
+                    pieColor="success"
+               />
+            </Col>
+            <Col lg={ 3 } md={ 6 }>
+                <CardSystem
+                    title="Disk I/O"
+                    unit="Kb"
+                    pieColor="yellow"
+               />
+            </Col>
+            <Col lg={ 12 }>
+                <h6 className="mt-5">Processes</h6>
+                <p className="pb-3">
+                    { faker.lorem.paragraphs() }
+                </p>
+                <Table responsive>
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Memory</th>
+                            <th>CPU</th>
+                            <th>Traffic</th>
+                            <th>Disk I/O</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <TrSystem 
+                            colors={TrColors}
+                        />
+                        <TrSystem 
+                            colors={TrColors}
+                        />
+                        <TrSystem 
+                            colors={TrColors}
+                        />
+                        <TrSystem 
+                            colors={TrColors}
+                        />
+                        <TrSystem 
+                            colors={TrColors}
+                        />
+                    </tbody>
+                </Table>
+            </Col>
+        </Row>
+    </Container>
+);
+
+export default System;

app/routes/Dashboards/System/components/CardSystem.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {  
+    Card, 
+    CardBody,
+    Badge
+} from './../../../../components';
+
+import {
+    TinyDonutChart
+} from "./TinyDonutChart"
+import {
+    TinyBarChart
+} from "./TinyBarChart"
+
+import { randomArray } from './../../../../utilities';
+
+const percents = [
+    "15",
+    "25",
+    "30",
+    "35",
+    "40",
+    "45",
+    "55",
+    "60",
+    "75",
+    "80",
+    "95"
+];
+
+const caret = [
+    "down",
+    "up"
+];
+
+const CardSystem = (props) => (
+    <Card className="mb-3 mb-lg-0">
+       <CardBody className="pb-0">
+           <div className="d-flex">
+               <span>
+                    <Badge pill className="mb-3" color={ props.badgeColor } >
+                        <i className={` fa fa-fw fa-caret-${ randomArray(caret) }`} />
+                        { randomArray(percents) }%
+                    </Badge>
+                    <h6 className="mb-0">
+                        { props.title }
+                    </h6>
+                    <h2 className="mb-3">
+                        { randomArray(percents) } <small>{ props.unit }</small>
+                    </h2>
+                </span>
+                <span className="text-right ml-auto">
+                    <TinyDonutChart 
+                        pieColor={props.pieColor}
+                    />
+                </span>
+            </div>
+            <TinyBarChart />
+       </CardBody>
+    </Card>
+);
+
+CardSystem.propTypes = {
+    title: PropTypes.node,
+    badgeColor: PropTypes.string,
+    unit: PropTypes.node,
+    pieColor: PropTypes.string
+};
+CardSystem.defaultProps = {
+    title: "Waiting...",
+    badgeColor: "secondary",
+    unit: "%",
+    pieColor: "500"
+};
+
+export { CardSystem };

app/routes/Dashboards/System/components/TinyAreaChart.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+import {  
+    ResponsiveContainer,
+    AreaChart, 
+    Area
+} from './../../../../components/recharts';
+
+import colors from './../../../../colors';
+
+const TinyAreaChart = (props) => {
+    const data = _.times(20, () => ({ pv: Math.random() * 100 }));
+    return (
+        <ResponsiveContainer width='100%' minWidth='150px' height={ 40 }>
+            <AreaChart data={data}>
+                <Area dataKey='pv' stroke={ colors[ props.strokeColor ] } fill={ colors[ props.fillColor ] } />
+            </AreaChart>
+        </ResponsiveContainer>
+    )
+};
+
+TinyAreaChart.propTypes = {
+    strokeColor: PropTypes.string,
+    fillColor: PropTypes.string
+};
+TinyAreaChart.defaultProps = {
+    strokeColor: "600",
+    fillColor: "200",
+};
+
+export { TinyAreaChart };

app/routes/Dashboards/System/components/TinyBarChart.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import _ from 'lodash';
+import {  
+    ResponsiveContainer,
+    BarChart, 
+    Bar
+} from './../../../../components/recharts';
+
+import colors from './../../../../colors';
+
+const TinyBarChart = (props) => {
+        const data = _.times(40, () => ({ pv: 20+Math.random() * 100 }));
+        return (
+            <ResponsiveContainer width='100%' height={ 80 }>
+                <BarChart data={data} margin={{ top: 0, bottom: 0, right: 0, left: 0 }}>
+                    <Bar dataKey='pv' fill={ colors[ props.barColor ] } />
+                </BarChart>
+            </ResponsiveContainer>
+        )
+};
+
+TinyBarChart.propTypes = {
+    barColor: PropTypes.string
+};
+TinyBarChart.defaultProps = {
+    barColor: "200"
+};
+
+export { TinyBarChart };

app/routes/Dashboards/System/components/TinyDonutChart.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {  
+    PieChart, 
+    Pie,
+    Cell
+} from './../../../../components/recharts';
+
+import colors from './../../../../colors';
+
+const TinyDonutChart = (props) => {
+    const data = [
+        {name: 'Group A', value: 40+Math.random()*100},
+        {name: 'Group B', value: Math.random()*100}
+    ];
+    return (
+        <PieChart width={ 80 } height={ 80 }>
+            <Pie
+                data={data}
+                dataKey="value"
+                stroke={ colors[ props.strokeColor ] }
+                innerRadius={ 28 }
+                outerRadius={ 35 } 
+                fill={ colors[ props.pieBg ] }
+            >
+            <Cell fill={ colors[ props.pieColor ] } />
+            </Pie>
+        </PieChart>
+    )
+};
+
+TinyDonutChart.propTypes = {
+    pieColor: PropTypes.string,
+    strokeColor: PropTypes.string,
+    pieBg: PropTypes.string
+};
+TinyDonutChart.defaultProps = {
+    pieColor: "primary",
+    strokeColor: "white",
+    pieBg: "200"
+};
+
+export { TinyDonutChart };

app/routes/Dashboards/System/components/trSystem.js

@@ -0,0 +1,132 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+import {  
+    Progress,
+    Badge
+} from './../../../../components';
+
+import {
+    TinyAreaChart
+} from "./TinyAreaChart"
+
+import { randomArray } from './../../../../utilities';
+
+const percents = [
+    "15",
+    "25",
+    "30",
+    "35",
+    "40",
+    "45",
+    "55",
+    "60",
+    "75",
+    "80",
+    "95"
+];
+
+const versions = [
+    "1.10",
+    "1.34",
+    "2.35",
+    "0.23",
+    "2.90",
+    "9.05"
+];
+
+const name = [
+    "Apache",
+    "Postfix",
+    "Ruby R1",
+    "MySQL",
+    "Ruby R2"
+];
+
+const gbLeft = [
+    "2,234",
+    "6,738",
+    "982",
+    "9,001",
+    "1,329"
+];
+
+const tdValue = [
+    "783",
+    "45",
+    "4",
+    "190",
+    "65"
+];
+
+const tdUnits = [
+    "",
+    "Mb",
+    "%",
+    "Kb/s"
+];
+
+const TrSystem = (props) => (
+    <tr>
+        <td style={{ width: '20%' }}>
+            <span className="d-flex mb-2">
+                <h6 className="mb-0 mr-5">
+                    { randomArray(name) }
+                </h6>
+                <Badge pill className="ml-auto align-self-center">
+                    v. { randomArray(versions) }
+                </Badge>
+            </span>
+            <Progress value={ randomArray(percents) } style={{height: "4px"}} className="mb-2" />
+            <span className="d-flex">
+                <span className="text-inverse">
+                    { randomArray(percents) }%
+                </span>
+                <span className="ml-auto text-right">
+                    { randomArray(gbLeft) } GB Left
+                </span>
+            </span>
+        </td>
+        {
+            _.map(props.colors, (color,index)=>(
+                <td style={{ width: '20%' }} key={index}>
+                    <h6 className="mb-0">
+                        { randomArray(tdValue) } {tdUnits[index]}
+                    </h6>
+                    <TinyAreaChart 
+                        strokeColor={color.stroke} 
+                        fillColor={color.fill} 
+                    />
+                </td>
+            ))
+        }
+    </tr>
+);
+
+TrSystem.propTypes = {
+    title: PropTypes.node,
+
+    colors: PropTypes.array
+};
+TrSystem.defaultProps = {
+    colors: [ 
+        {
+            fill: "400",
+            stroke: "primary"
+        },
+        {
+            fill: "yellow",
+            stroke: "400"
+        },
+        {
+            fill: "purple",
+            stroke: "info"
+        },
+        {
+            fill: "success",
+            stroke: "500"
+        }
+    ]
+};
+
+export { TrSystem };

app/routes/Dashboards/System/index.js

@@ -0,0 +1,3 @@
+import System from './System';
+
+export default System;