Merge pull request #12 from aerogear/AEROGEAR-7693

Aerogear 7693 - Create Mobile Client Service Chart
aerogear · Jul 26, 2018 · 1f93af1 · 1f93af1
2 parents 29775e5 + 277cee1
commit 1f93af1
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 1 deletion.
diff --git a/ui/public/favicon.ico b/ui/public/favicon.ico
diff --git a/ui/public/index.html b/ui/public/index.html
@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Mobile Client</title>
   </head>
   <body>
     <noscript>

diff --git a/ui/src/components/MobileClientServiceChart.js b/ui/src/components/MobileClientServiceChart.js
@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import { DonutChart } from 'patternfly-react';
+
+import '../style/MobileClientServiceChart.css'
+
+class MobileClientServiceChart extends Component {
+    viewAllServices(){
+        return (
+            <a>View All Mobile Services</a>
+        )
+    }
+
+    render = () => {
+        const mobileServices = Object.values(this.props.mobileServices || {})
+        return (
+            <div>
+                <div className="donut-label section-label">
+                    Mobile Services
+                </div>
+                <div>
+                    <DonutChart
+                        id="donunt-chart-2"
+                        size={{width: 270,height: 91}}
+                        data={{colors: {
+                            'Bound Mobile Services' : '#0088ce',
+                            'Unbound Mobile Services': '#ec7a08',
+                        },columns: [
+                            ['Bound Mobile Services', mobileServices[0].bound],
+                            ['Unbound Mobile Services',mobileServices[0].unbound],
+                        ],type: 'donut'}}
+                        tooltip={{show: true}}
+                        title={{type: 'total'}}
+                        legend={{show: true,position: 'right'}}
+                        />
+                </div>
+                <div>
+                    {this.viewAllServices(this.mobileClients)}
+                </div>
+            </div>
+        )
+    }
+}
+
+export default MobileClientServiceChart;
diff --git a/ui/src/components/Overview.js b/ui/src/components/Overview.js
@@ -1,8 +1,17 @@
 import React, { Component } from 'react';
 import MobileClientOverviewList from './MobileClientOverviewList';
+import MobileClientServiceChart from './MobileClientServiceChart';
 
 const listClientsUrl = `/apis/mobile.k8s.io/v1alpha1/namespaces/test1/mobileclients`;
 
+// todo 
+const mobileServices = {
+  "mobileServices": {
+    "bound": 1,
+    "unbound": 2
+  }
+};
+
 class Overview extends Component {
 
   constructor(props) {
@@ -28,6 +37,7 @@ class Overview extends Component {
     return (
       <div>
         <MobileClientOverviewList mobileClients={this.state.mobileClients}></MobileClientOverviewList>
+        <MobileClientServiceChart mobileServices={mobileServices}></MobileClientServiceChart>
       </div>
     );
   }

diff --git a/ui/src/styles/MobileClientListViewItem.css → ui/src/style/MobileClientListViewItem.css b/ui/src/styles/MobileClientListViewItem.css → ui/src/style/MobileClientListViewItem.css
diff --git a/ui/src/style/MobileClientServiceChart.css b/ui/src/style/MobileClientServiceChart.css
@@ -0,0 +1,6 @@
+.donut-label.section-label {
+    border-bottom: 1px solid #dcdcdc;
+    line-height: 1;
+    margin-bottom: 10px;
+    padding-bottom: 5px;
+}