Init

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

app/routes/components/Monitor/TinyAreaChart.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import _ from 'lodash';
+import {  
+    ResponsiveContainer,
+    AreaChart, 
+    Area
+} from './../../../components/recharts';
+
+import colors from './../../../colors';
+
+const data = _.times(20, () => ({ pv: Math.random() * 100 }));
+
+const TinyAreaChart = () => (
+    <ResponsiveContainer width='100%' height={ 40 }>
+        <AreaChart data={data}>
+            <Area dataKey='pv' stroke={ colors['primary'] } fill={ colors['primary-03'] } />
+        </AreaChart>
+    </ResponsiveContainer>
+);
+
+export { TinyAreaChart };

app/routes/components/Monitor/TinyDonutChart.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import {  
+    PieChart, 
+    Pie,
+    Cell
+} from 'recharts';
+
+import colors from './../../../colors';
+
+const data = [
+    {name: 'Group A', value: 400},
+    {name: 'Group B', value: 300},
+    {name: 'Group C', value: 300}
+];
+
+const COLORS = [ colors['primary'], colors['info'], colors['300']];
+
+const TinyDonutChart = () => (
+    <PieChart width={ 70 } height={ 70 }>
+        <Pie
+            data={data}
+            dataKey="value"
+            stroke={ colors['white'] }
+            innerRadius={ 21 }
+            outerRadius={ 27 } 
+            fill="#8884d8"
+        >
+            {
+                data.map((entry, index) => <Cell key={ index } fill={COLORS[index % COLORS.length]} />)
+            }
+        </Pie>
+    </PieChart>
+);
+
+export { TinyDonutChart };

app/routes/components/Monitor/TinyDonutChartBig.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {  
+    PieChart, 
+    Pie,
+    Cell
+} from 'recharts';
+
+import colors from './../../../colors';
+
+const data = [
+    {name: 'Group A', value: 400},
+    {name: 'Group B', value: 300}
+];
+
+const TinyDonutChartBig = (props) => (
+    <PieChart width={ 130 } height={ 160 }>
+        <Pie
+            data={data}
+            dataKey="value"
+            stroke="{ colors['white'] }"
+            innerRadius={ 58 }
+            outerRadius={ 65 }
+            fill={ colors[ props.pieBg ] }
+        >
+        <Cell fill={ colors[ props.pieColor ] } />
+        </Pie>
+    </PieChart>
+);
+
+TinyDonutChartBig.propTypes = {
+    pieColor: PropTypes.string,
+    pieBg: PropTypes.string
+};
+TinyDonutChartBig.defaultProps = {
+    pieColor: "secondary",
+    pieBg: "300"
+};
+
+export { TinyDonutChartBig };

app/routes/components/Monitor/TrTableMonitor.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import _ from 'lodash';
+
+import { 
+    Badge,
+    Progress
+} from './../../../components';
+
+/*eslint-disable */
+const status = [
+    <td className="text-right">
+        Healthly <i className="fa fa-fw fa-check-circle text-success"></i>
+    </td>,
+    <td className="text-right">
+        Degraded <i className="fa fa-fw fa-exclamation-circle text-danger"></i>
+    </td>
+];
+/*eslint-enable */
+/*eslint-disable */
+const tasksCompleted = [
+    "25",
+    "50",
+    "70",
+    "90"
+];
+/*eslint-enable */
+
+const TrTableMonitor = () => (
+    <React.Fragment>
+        {
+            _.times(14, (index) => (
+                <tr key={ index } className="text-nowrap">
+                    <td className="align-middle">
+                        <span className="text-inverse">HDD1</span> <span className="small">(ada0)</span>
+                    </td>
+                    <td className="align-middle">
+                        Mirror <Badge color="secondary" pill className="ml-2">/mtn/volume1</Badge>
+                    </td>
+                    <td className="align-middle">
+                        <Progress value={ tasksCompleted[index%4] } style={{height: "5px"}} />
+                    </td>
+                    <td>
+                        <span className="text-inverse">7.3.5 TiB</span> / 9.3.1 TiB
+                    </td>
+                    { status[index%2] }
+                </tr>
+            ))
+        }
+    </React.Fragment>
+)
+
+export { TrTableMonitor };