control-tower · hectoruch · Aug 28, 2016 · Aug 29, 2016 · Aug 29, 2016 · Sep 1, 2016
diff --git a/.DS_Store b/.DS_Store
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,4 @@
 {
-  "presets": ["es2015", "stage-0", "react"]
+    "presets": ["es2015", "stage-0", "react"],
+    "plugins": ["transform-decorators-legacy"]
 }
diff --git a/.sass-lint.yml b/.sass-lint.yml
@@ -0,0 +1,19 @@
+rules:
+  property-sort-order:
+    - 2
+  force-element-nesting:
+    - 0
+  no-color-literals:
+    - 2
+    -
+      allow-rgba: true
+  no-url-protocols:
+    - 0
+  nesting-depth:
+    - 2
+    -
+      max-depth: 3
+files:
+  ignore:
+    - 'node_modules/**/*.scss'
+    - 'node_modules/**/*.sass'
diff --git a/README.md b/README.md
@@ -1 +1,4 @@
 # Manage UI to Control tower api-gateway
+
+
+[Map Icons by MapGlyphs.com](mapglyphs.com)
diff --git a/app/.DS_Store b/app/.DS_Store
diff --git a/app/assets/.DS_Store b/app/assets/.DS_Store
diff --git a/app/assets/logo/logoSideBar.png b/app/assets/logo/logoSideBar.png
diff --git a/app/assets/maps/afghanistan.svg b/app/assets/maps/afghanistan.svg
diff --git a/app/assets/maps/albania.svg b/app/assets/maps/albania.svg
diff --git a/app/assets/maps/ecuador.svg b/app/assets/maps/ecuador.svg
diff --git a/app/assets/maps/usa.svg b/app/assets/maps/usa.svg
diff --git a/app/index.html b/app/index.html
@@ -3,8 +3,10 @@
 <head>
   <meta charset="utf-8">
   <title>Control Tower UI</title>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
   <link rel="stylesheet" href="styles.css" media="all" />
 </head>
 <body>

diff --git a/app/src/actions/endpoints.jsx b/app/src/actions/endpoints.jsx
@@ -1,12 +1,15 @@
 import { BASE_API_URL, GET_ENDPOINTS } from '../constants';
 import { showNotification } from './notification';
+import { showLoading } from './loading';
 import fetch from '../utils/fetch';
 
 export function getEndpoints() {
   return (dispatch) => {
+    dispatch(showLoading(true));
     fetch(`${BASE_API_URL}/api/v1/endpoint`, { method: 'GET' }).then((response) => response.json()).then((data) => {
       dispatch(showNotification('Endpoints obtained successfully'));
       dispatch({ type: GET_ENDPOINTS, payload: data });
+      dispatch(showLoading(false));
     });
   };
 }
diff --git a/app/src/actions/loading.jsx b/app/src/actions/loading.jsx
@@ -0,0 +1,7 @@
+import { SET_VISIBLE } from '../constants';
+export function showLoading(visible) {
+  return {
+    type: SET_VISIBLE,
+    payload: visible,
+  };
+}
diff --git a/app/src/actions/microservices.jsx b/app/src/actions/microservices.jsx
@@ -1,12 +1,15 @@
 import { BASE_API_URL, GET_MICROSERVICES } from '../constants';
 import { showNotification } from './notification';
+import { showLoading } from './loading';
 import fetch from '../utils/fetch';
 
 export function getMicroservices() {
   return (dispatch) => {
+    dispatch(showLoading(true));
     fetch(`${BASE_API_URL}/api/v1/microservice`, { method: 'GET' }).then((response) => response.json()).then((data) => {
       dispatch(showNotification('Microservices obtained successfully'));
       dispatch({ type: GET_MICROSERVICES, payload: data });
+      dispatch(showLoading(false));
     });
   };
 }
diff --git a/app/src/actions/notification.jsx b/app/src/actions/notification.jsx
@@ -1,9 +1,11 @@
-import { SHOW_NOTIFICATION, CLEAR_NOTIFICATION } from '../constants';
-
 export function showNotification(message) {
-  return { type: SHOW_NOTIFICATION, payload: message };
-}
+  return {
+    type: 'GROWLER__SHOW',
+    growler: {
+      text: message,
+      type: 'growler--success',
+    }
+  };
+
 
-export function clearNotification() {
-  return { type: CLEAR_NOTIFICATION };
 }
diff --git a/app/src/actions/plugins.jsx b/app/src/actions/plugins.jsx
@@ -1,17 +1,21 @@
 import { BASE_API_URL, GET_PLUGINS } from '../constants';
 import { showNotification } from './notification';
+import { showLoading } from './loading';
 import fetch from '../utils/fetch';
 
 export function getPlugins() {
   return (dispatch) => {
+    dispatch(showLoading(true));
     fetch(`${BASE_API_URL}/api/v1/plugin`, { method: 'GET' }).then((response) => response.json()).then((data) => {
       dispatch({ type: GET_PLUGINS, payload: data });
+      dispatch(showLoading(false));
     });
   };
 }
 
 export function updatePlugin(id, plugin) {
   return (dispatch) => {
+    dispatch(showLoading(true));
     fetch(`${BASE_API_URL}/api/v1/plugin/${id}`, {
       method: 'PATCH',
       body: JSON.stringify(plugin),
@@ -21,6 +25,23 @@ export function updatePlugin(id, plugin) {
     }).then((response) => response.json()).then(() => {
       dispatch(showNotification('Plugin updated successfully'));
       dispatch(getPlugins());
+      dispatch(showLoading(false));
+    });
+  };
+}
+
+export function flushCache() {
+  return (dispatch) => {
+    dispatch(showLoading(true));
+    fetch(`${BASE_API_URL}/cache/flush`, {
+      method: 'GET',
+    }).then((response) => {
+      if (response.ok) {
+        dispatch(showNotification('Cache Flushed!'));
+      } else {
+        dispatch(showNotification('Error Flush cache'));
+      }
+      dispatch(showLoading(false));
     });
   };
 }
diff --git a/app/src/actions/stadistics.jsx b/app/src/actions/stadistics.jsx
@@ -1,5 +1,6 @@
-import { BASE_API_URL, GET_STADISTICS, GET_TIME_BY_REQUEST_STADISTICS } from '../constants';
+import { BASE_API_URL, GET_STADISTICS } from '../constants';
 import { showNotification } from './notification';
+import { showLoading } from './loading';
 import fetch from '../utils/fetch';
 
 function formatDate(date) {
@@ -15,23 +16,42 @@ function orderRequestByDay(r1, r2) {
   return r1d - r2d;
 }
 
+function orderRequestByNum(r1, r2) {
+  return r2.count - r1.count;
+}
+
+function orderRequestBySum(r1, r2) {
+  return r2.sum - r1.sum;
+}
+
 
 export function getStadistics(fromDate, toDate) {
   return (dispatch) => {
+    dispatch(showLoading(true));
     const from = formatDate(fromDate);
     const to = formatDate(toDate);
 
     const promises = [];
-    promises.push(fetch(`${BASE_API_URL}/api/v1/stadistic/timeByRequest?from=${from}&to=${to}`, { method: 'GET' }).then((response) => response.json()));
+    promises.push(fetch(`${BASE_API_URL}/api/v1/stadistic/avgByRequest?from=${from}&to=${to}`, { method: 'GET' }).then((response) => response.json()));
     promises.push(fetch(`${BASE_API_URL}/api/v1/stadistic/requestByDay?from=${from}&to=${to}`, { method: 'GET' }).then((response) => response.json()));
+    promises.push(fetch(`${BASE_API_URL}/api/v1/stadistic/countRequestToday`, { method: 'GET' }).then((response) => response.json()));
+    promises.push(fetch(`${BASE_API_URL}/api/v1/stadistic/countRequestLastWeek`, { method: 'GET' }).then((response) => response.json()));
+    promises.push(fetch(`${BASE_API_URL}/api/v1/stadistic/countRequestTodayByCountry`, { method: 'GET' }).then((response) => response.json()));
 
     Promise.all(promises).then((data) => {
       dispatch(showNotification('Stadistics obtained successfully'));
       dispatch({ type: GET_STADISTICS, payload: {
-        timeByRequest: data[0],
+        timeByRequest: data[0].sort(orderRequestBySum),
         requestByDay: data[1].sort(orderRequestByDay),
+        countRequestToday: data[2],
+        countRequestLastWeek: data[3],
+        countRequestTodayByCountry: data[4].sort(orderRequestByNum),
       } });
-    }, () => dispatch(showNotification('Error obtaining stadistics')));
+      dispatch(showLoading(false));
+    }, () => {
+      dispatch(showNotification('Error obtaining stadistics'));
+      dispatch(showLoading(false));
+    });
 
   };
 }
diff --git a/app/src/actions/users.jsx b/app/src/actions/users.jsx
@@ -1,18 +1,22 @@
 import { BASE_API_URL, GET_USERS } from '../constants';
 import { showNotification } from './notification';
+import { showLoading } from './loading';
 import fetch from '../utils/fetch';
 
 export function getUsers() {
   return (dispatch) => {
+    dispatch(showLoading(true));
     fetch(`${BASE_API_URL}/auth/user`, { method: 'GET' }).then((response) => response.json()).then((data) => {
       dispatch(showNotification('Users obtained successfully'));
       dispatch({ type: GET_USERS, payload: data });
+      dispatch(showLoading(false));
     });
   };
 }
 
 export function updateUser(id, user) {
   return (dispatch) => {
+    dispatch(showLoading(true));
     fetch(`${BASE_API_URL}/auth/user/${id}`, {
       method: 'PATCH',
       body: JSON.stringify(user),
@@ -22,6 +26,7 @@ export function updateUser(id, user) {
     }).then((response) => response.json()).then(() => {
       dispatch(showNotification('User updated successfully'));
       dispatch(getUsers());
+      dispatch(showLoading(false));
     });
   };
 }
diff --git a/app/src/components/appView.jsx b/app/src/components/appView.jsx
@@ -1,16 +1,7 @@
 import React, { PropTypes } from 'react';
-import {
-  AppBar,
-  IconButton,
-  Layout,
-  NavDrawer,
-  Panel,
-  Navigation,
-  Button,
-} from 'react-toolbox';
-import menu from '../../styles/menu';
-import generalStyles from '../../styles/general';
-import Notification from '../containers/notification';
+import SideBar from '../containers/sideBar/sideBar';
+import Loading from '../components/loading';
+import { GrowlerContainer } from 'flash-notification-react-redux';
 
 class AppView extends React.Component {
 
@@ -27,7 +18,6 @@ class AppView extends React.Component {
   componentWillUpdate(nextProps) {
     if (nextProps.login.correct === false && this.props.login.correct !== nextProps.login.correct) {
       this.props.goToLogin();
-
     }
   }
 
@@ -43,40 +33,13 @@ class AppView extends React.Component {
 
   render() {
     return (
-      <Layout>
-        <NavDrawer active={this.state.drawerActive} pinned={this.state.drawerPinned} permanentAt="xxxl" onOverlayClick={this.toggleDrawerActive}>
-          <AppBar>
-            Menu
-          </AppBar>
-          <Navigation type="vertical" className={menu.listMenu}>
-            {this.props.login.user && this.props.login.user.role === 'ADMIN' && <Button label="Dashboard" icon="timeline" onClick={() => this.props.push('dashboard')} />}
-            {this.props.login.user && this.props.login.user.role === 'ADMIN' && <Button label="Plugins" icon="extension" onClick={() => this.props.push('plugins')} />}
-            {this.props.login.user && this.props.login.user.role === 'ADMIN' && <Button label="Microservices" icon="cloud" onClick={() => this.props.push('microservices')} />}
-            {this.props.login.user && this.props.login.user.role === 'ADMIN' && <Button label="Endpoints" icon="navigation" onClick={() => this.props.push('endpoints')} />}
-            {this.props.login.user && this.props.login.user.role === 'ADMIN' && <Button label="Users" icon="account_circle" onClick={() => this.props.push('users')} />}
-            {this.props.login.user && <Button label="Profile" icon="face" onClick={() => this.props.push('profile')} />}
-            {this.props.login.user && <Button label="Logout" icon="lock_open" onClick={() => this.logout()} />}
-            {!this.props.login.user && <Button label="Login" icon="lock_outline" onClick={() => this.props.push('login')} />}
-          </Navigation>
-        </NavDrawer>
-        <Panel>
-          <AppBar>
-            <IconButton icon="menu" inverse onClick={this.toggleDrawerActive} />
-            <h3>Api Gateway</h3>
-          </AppBar>
-          <div
-            style={{
-              flex: 1,
-              overflowY: 'auto',
-              padding: '3.5rem 6rem',
-            }}
-          >
-            {this.props.children}
-          </div>
-          <Notification />
-        </Panel>
+      <div>
+        <GrowlerContainer />
+        {this.props.loading && <Loading />}
+        <SideBar />
+        {this.props.children}
+      </div>
 
-      </Layout>
     );
   }
 
@@ -86,8 +49,10 @@ AppView.propTypes = {
   children: PropTypes.node,
   push: PropTypes.func,
   checkLogin: PropTypes.func,
+  goToLogin: PropTypes.func,
   logout: PropTypes.func,
   login: PropTypes.object,
+  loading: PropTypes.bool,
 };
 
 export default AppView;
Original file line number	Diff line number	Diff line change
		@@ -1 +1,4 @@
		# Manage UI to Control tower api-gateway


		[Map Icons by MapGlyphs.com](mapglyphs.com)