+
+
+
+
-
-
this.handleChange('to', value)}
- value={this.state.to}
- className={dashboardStyle.filter}
- />
+ {this.state.optionselect === 1 &&
+
+
+ this.handleChange('from', value)}
+ value={this.state.from}
+ />
+
+
+ this.handleChange('to', value)}
+ value={this.state.to}
+ />
+
+
+
+
+
+
+ Average time by request
+
+
+
+ Num request by day
+ {this.state.requestByDay &&
+ }
+
+
+
+
{this.props.users.list ? this.props.users.list.length : 0}
Users
+
{this.props.microservices.list ? this.props.microservices.list.length: 0}
Microservices
+
{this.props.endpoints.list ? this.props.endpoints.list.length : 0}
Endpoints
-
- Average time by request
-
-
-
-
Num request by day
- {this.state.requestByDay &&
}
+
+
{this.props.stadistics.countRequestToday ? this.props.stadistics.countRequestToday.count : 0}
Requests today
+
{this.props.stadistics.countRequestLastWeek ? this.props.stadistics.countRequestLastWeek.count : 0}
Requests last week
+
+
+
+ {countries}
+
+
);
@@ -124,7 +207,13 @@ class DashboardView extends React.Component {
DashboardView.propTypes = {
getStadistics: PropTypes.func,
+ getMicroservice: PropTypes.func,
+ getUsers: PropTypes.func,
+ getEndpoints: PropTypes.func,
stadistics: PropTypes.object,
+ users: PropTypes.object,
+ endpoints: PropTypes.object,
+ microservices: PropTypes.object,
};
export default DashboardView;
diff --git a/app/src/components/endpointView.jsx b/app/src/components/endpointView.jsx
index 314773e..75ae515 100644
--- a/app/src/components/endpointView.jsx
+++ b/app/src/components/endpointView.jsx
@@ -1,36 +1,84 @@
import React, { PropTypes } from 'react';
-import generalStyle from '../../styles/general';
-import { Button, FontIcon } from 'react-toolbox';
-
+import layoutContentStyle from '../../styles/layout/l-content.scss';
+import tableStyle from '../../styles/components/c-table.scss';
+import buttonStyle from '../../styles/components/c-button.scss';
+import searchStyle from '../../styles/components/c-search.scss';
class EndpointView extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ endpoints: null,
+ filteredList: null,
+ filterValue: null,
+ };
+ }
+
componentDidMount() {
this.props.getEndpoints();
}
+
+ componentWillReceiveProps(nextProps) {
+ if (nextProps.endpoints !== this.props.endpoints) {
+ const newState = { endpoints: nextProps.endpoints.list };
+ if (this.state.filterValue) {
+ newState.filteredList = this.filterList(nextProps.endpoints.list, this.state.filterValue);
+ } else {
+ newState.filteredList = nextProps.endpoints.list;
+ }
+ this.setState(newState);
+ }
+ }
+
+ filterList(list, value) {
+ return list.filter((endpoint) => endpoint.path.toLowerCase().indexOf(value) >= 0);
+ }
+
+ filter(e) {
+ const newState = { filterValue: e.target.value };
+ if (e.target.value) {
+ newState.filteredList = this.filterList(this.props.endpoints.list, e.target.value);
+ } else {
+ newState.filteredList = this.props.endpoints.list;
+ }
+ this.setState(newState);
+ }
+
render() {
let rows = [];
- if (this.props.endpoints.list) {
- for (let i = 0, length = this.props.endpoints.list.length; i < length; i++) {
- const endpoint = this.props.endpoints.list[i];
+ if (this.state.filteredList) {
+ for (let i = 0, length = this.state.filteredList.length; i < length; i++) {
+ const endpoint = this.state.filteredList[i];
rows.push(
| {endpoint.path} |
{endpoint.method} |
- {endpoint.authenticated && }
+ {endpoint.authenticated && 'Yes'}
|
);
}
}
return (
-
-
-
- Endpoints
-
-
+
+
+ this.filter(e)}
+ >
+
+
+
+
| Path |
diff --git a/app/src/components/loading.jsx b/app/src/components/loading.jsx
new file mode 100644
index 0000000..a1a3977
--- /dev/null
+++ b/app/src/components/loading.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import LoadingLib from 'react-loading';
+
+import loadingStyle from '../../styles/components/c-loading.scss';
+
+function Loading() {
+ return (
+
+
+
+ );
+}
+
+export default Loading;
diff --git a/app/src/components/loginView.jsx b/app/src/components/loginView.jsx
index a542028..e40b004 100644
--- a/app/src/components/loginView.jsx
+++ b/app/src/components/loginView.jsx
@@ -1,13 +1,6 @@
import React, { PropTypes } from 'react';
-import {
- Button,
- Input,
-} from 'react-toolbox';
-
-import loginStyle from '../../styles/login';
class LoginView extends React.Component {
-
constructor(props) {
super(props);
this.state = {
diff --git a/app/src/components/microserviceView.jsx b/app/src/components/microserviceView.jsx
index d1198c2..f1a0b54 100644
--- a/app/src/components/microserviceView.jsx
+++ b/app/src/components/microserviceView.jsx
@@ -1,35 +1,87 @@
import React, { PropTypes } from 'react';
-import generalStyle from '../../styles/general';
-import { Button, FontIcon } from 'react-toolbox';
import Time from 'react-time';
+import layoutContentStyle from '../../styles/layout/l-content.scss';
+import tableStyle from '../../styles/components/c-table.scss';
+import buttonStyle from '../../styles/components/c-button.scss';
+import searchStyle from '../../styles/components/c-search.scss';
class MicroserviceView extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ microservices: null,
+ filteredList: null,
+ filterValue: null,
+ };
+ }
componentDidMount() {
this.props.getMicroservices();
}
+
+ componentWillReceiveProps(nextProps) {
+ if (nextProps.microservices !== this.props.microservices) {
+ const newState = { microservices: nextProps.microservices.list };
+ if (this.state.filterValue) {
+ newState.filteredList = this.filterList(nextProps.microservices.list, this.state.filterValue);
+ } else {
+ newState.filteredList = nextProps.microservices.list;
+ }
+ this.setState(newState);
+ }
+ }
+
+ filterList(list, value) {
+ return list.filter((microservice) => microservice.name.toLowerCase().indexOf(value) >= 0);
+ }
+
+ filter(e) {
+ const newState = { filterValue: e.target.value };
+ if (e.target.value) {
+ newState.filteredList = this.filterList(this.props.microservices.list, e.target.value);
+ } else {
+ newState.filteredList = this.props.microservices.list;
+ }
+ this.setState(newState);
+ }
+
render() {
let rows = [];
- if (this.props.microservices.list) {
- for (let i = 0, length = this.props.microservices.list.length; i < length; i++) {
- const microservice = this.props.microservices.list[i];
+ if (this.state.filteredList) {
+ for (let i = 0, length = this.state.filteredList.length; i < length; i++) {
+ const microservice = this.state.filteredList[i];
rows.push(
-
+
| {microservice.name} |
{microservice.url} |
- {microservice.status} |
+ {microservice.status} |
|
);
}
}
+
return (
-
-
-
- Microservices
-
-
+
+
+ this.filter(e)}
+ >
+
+
+
+
| Name |
@@ -38,7 +90,7 @@ class MicroserviceView extends React.Component {
Last check |
-
+
{rows}
diff --git a/app/src/components/notificationView.jsx b/app/src/components/notificationView.jsx
deleted file mode 100644
index dab9b1e..0000000
--- a/app/src/components/notificationView.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, { PropTypes } from 'react';
-import { Snackbar } from 'react-toolbox';
-
-class NotificationView extends React.Component {
-
- constructor(props) {
- super(props);
- this.state = {
- active: false,
- };
- }
-
- componentWillReceiveProps(nextProps) {
- if (nextProps.notification) {
- this.setState({ active: true });
- }
- }
-
- handleSnackbarTimeout() {
- this.setState({ active: false });
- this.props.clearNotification();
- }
-
- render() {
-
- return (
-
this.handleSnackbarClick()}
- onTimeout={() => this.handleSnackbarTimeout()}
- type="cancel"
- />
- );
- }
-
-}
-
-NotificationView.propTypes = {
- notification: PropTypes.string,
- clearNotification: PropTypes.func,
-};
-
-export default NotificationView;
diff --git a/app/src/components/pluginView.jsx b/app/src/components/pluginView.jsx
index 6c13b59..7477ab7 100644
--- a/app/src/components/pluginView.jsx
+++ b/app/src/components/pluginView.jsx
@@ -1,15 +1,9 @@
import React, { PropTypes } from 'react';
-import {
- Card,
- CardTitle,
- CardText,
- CardActions,
- Button,
- FontIcon,
- Dialog,
-} from 'react-toolbox';
-import pluginStyle from '../../styles/plugin';
-import generalStyle from '../../styles/general';
+import classnames from 'classnames';
+import layoutContentStyle from '../../styles/layout/l-content.scss';
+import cardListStyle from '../../styles/components/c-card-list.scss';
+import modalQuestionStyle from '../../styles/components/c-modal-question.scss';
+import buttonStyle from '../../styles/components/c-button.scss';
class PluginView extends React.Component {
@@ -48,38 +42,71 @@ class PluginView extends React.Component {
if (this.props.plugins) {
this.props.plugins.forEach((plugin, index) => {
plugins.push(
-
-
- File/module: {plugin.mainFile}
-
-
- {plugin.active &&
-
+
+
+ {plugin.name === 'redisCache' &&
}
+
+
+ {plugin.name}
+
+
+
+
File/module: {plugin.mainFile}
+
+
+
+ {plugin.active && }
+ {!plugin.active &&
+ }
+
+
+
-
-
- Plugins
-
+
+ {this.state.showDialog &&
+
this.cancel(this)}
+ className={modalQuestionStyle.backgroundcolor}
+ >
+
+
+ Sure that you want change the state of the plugin?
+
+
+
+
+
+
+
+ }
{plugins}
-
);
}
@@ -89,7 +116,8 @@ class PluginView extends React.Component {
PluginView.propTypes = {
getPlugins: PropTypes.func,
updatePlugin: PropTypes.func,
- plugins: PropTypes.array
+ flushCache: PropTypes.func,
+ plugins: PropTypes.array,
};
export default PluginView;
diff --git a/app/src/components/profileView.jsx b/app/src/components/profileView.jsx
index fbe3581..316b45d 100644
--- a/app/src/components/profileView.jsx
+++ b/app/src/components/profileView.jsx
@@ -1,11 +1,8 @@
import React, { PropTypes } from 'react';
-import {
- Button,
- FontIcon,
- Input,
-} from 'react-toolbox';
import CopyToClipboard from 'react-copy-to-clipboard';
-import generalStyle from '../../styles/general';
+import layoutContentStyle from '../../styles/layout/l-content.scss';
+import profileStyle from '../../styles/components/c-profile-page.scss';
+import buttonStyle from '../../styles/components/c-button.scss';
class ProfileView extends React.Component {
@@ -16,6 +13,10 @@ class ProfileView extends React.Component {
};
}
+ componentDidMount() {
+ this.props.generateToken();
+ }
+
componentWillReceiveProps(nextProps) {
if (nextProps.login.token !== this.state.token) {
this.setState({ token: nextProps.login.token });
@@ -24,19 +25,26 @@ class ProfileView extends React.Component {
render() {
return (
-
-
-
- Profile
-
-
-