Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-20 00:08:02 +01:00
Code Issues Projects Releases Wiki Activity

add application view

Browse Source
This commit is contained in:
sveisvei 2016-12-05 15:15:01 +01:00
parent d2ea5db48c
commit a1006e14f0
11 changed files with 139 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/component/app.jsx
View File

@ -1,7 +1,7 @@
import React, { Component } from 'react';
import { Layout, Drawer, Header, Navigation, Content,
Footer, FooterSection, FooterDropDownSection, FooterLinkList,
Grid, Cell
Grid, Cell,
} from 'react-mdl';
import style from './styles.scss';
import ErrorContainer from './error/error-container';
@ -9,10 +9,7 @@ import ErrorContainer from './error/error-container';
import UserContainer from './user/user-container';
import ShowUserContainer from './user/show-user-container';
export default class App extends Component {
constructor (props) {
super(props);
this.state = { drawerActive: false };
@ -62,6 +59,7 @@ export default class App extends Component {
{createListItem('/history', 'Event history')}
{createListItem('/archive', 'Archived toggles')}
<hr />
{createListItem('/applications', 'Applications')}
{createListItem('/metrics', 'Client metrics')}
{createListItem('/client-strategies', 'Client strategies')}
{createListItem('/client-instances', 'Client instances')}
@ -86,6 +84,7 @@ export default class App extends Component {
</FooterDropDownSection>
<FooterDropDownSection title="Metrics">
<FooterLinkList>
{createListItem('/applications', 'Applications')}
{createListItem('/metrics', 'Client metrics')}
{createListItem('/client-strategies', 'Client strategies')}
{createListItem('/client-instances', 'Client instances')}

57
frontend/src/component/application/application-edit-component.js Normal file
View File

@ -0,0 +1,57 @@
import React, { Component } from 'react';
import { Link } from 'react-router';
import { Grid, Cell } from 'react-mdl';
class ClientStrategies extends Component {
componentDidMount () {
this.props.fetchApplication(this.props.appName);
}
render () {
if (!this.props.application) {
return <div>Loading application info...</div>;
}
const {
appName,
instances,
strategies,
seenToggles,
} = this.props.application;
return (
<div>
<h5>{appName}</h5>
<Grid>
<Cell col={4}>
<h6>Instances</h6>
<ol className="demo-list-item mdl-list">
{instances.map(({ instanceId }, i) => <li className="mdl-list__item" key={i}>{instanceId}</li>)}
</ol>
</Cell>
<Cell col={4}>
<h6>Strategies</h6>
<ol className="demo-list-item mdl-list">
{/*strategies.map((name, i) => <li className="mdl-list__item" key={i}>{name}</li>)*/}
</ol>
</Cell>
<Cell col={4}>
<h6>Toggles</h6>
<ol className="demo-list-item mdl-list">
{seenToggles.map((name, i) => <li className="mdl-list__item" key={i}>
<Link to={`/features/edit/${name}`}>
{name}
</Link>
</li>)}
</ol>
</Cell>
</Grid>
</div>
);
}
}
export default ClientStrategies;

17
frontend/src/component/application/application-edit-container.js Normal file
View File

@ -0,0 +1,17 @@
import { connect } from 'react-redux';
import ApplicationEdit from './application-edit-component';
import { fetchApplication } from '../../store/application/actions';
const mapStateToProps = (state, props) => {
let application = state.applications.getIn(['apps', props.appName]);
if (application) {
application = application.toJS();
}
return {
application,
};
};
const Constainer = connect(mapStateToProps, { fetchApplication })(ApplicationEdit);
export default Constainer;

19
frontend/src/component/application/application-list-component.js
View File

@ -1,20 +1,27 @@
import React, { Component } from 'react';
import { Link } from 'react-router';
class ClientStrategies extends Component {
componentDidMount () {
this.props.fetchApplications();
this.props.fetchAll();
}
render () {
if (!this.props.applications) {
return null;
}
const source = this.props.applications.map(item => item.appName).join(', ');
const {
applications,
} = this.props;
if (!applications) {
return <div>loading...</div>;
}
return (
<div>
{source}
{applications.map(item => (
<Link key={item.appName} to={`/applications/${item.appName}`}>
Link: {item.appName}
</Link>
))}
</div>
);
}

8
frontend/src/component/application/application-list-container.js
View File

@ -1,9 +1,9 @@
import { connect } from 'react-redux';
import ApplicationList from './application-list-component';
import { fetchApplications } from '../../store/application/actions';
import { fetchAll } from '../../store/application/actions';
const mapStateToProps = (state) => ({ applications: state.applications.toJS() });
const mapStateToProps = (state) => ({ applications: state.applications.get('list').toJS() });
const StrategiesContainer = connect(mapStateToProps, { fetchApplications })(ApplicationList);
const Container = connect(mapStateToProps, { fetchAll })(ApplicationList);
export default StrategiesContainer;
export default Container;

1
frontend/src/component/feature/view-edit-container.jsx
View File

@ -27,6 +27,7 @@ class EditFeatureToggleWrapper extends React.Component {
this.props.fetchSeenApps();
this.props.fetchFeatureMetrics();
setInterval(() => {
this.props.fetchSeenApps();
this.props.fetchFeatureMetrics();
}, 5000);
}

7
frontend/src/data/applications-api.js
View File

@ -8,6 +8,13 @@ function fetchAll () {
.then(response => response.json());
}
function fetchApplication (appName) {
return fetch(`${URI}/${appName}`, { headers })
.then(throwIfNotSuccess)
.then(response => response.json());
}
module.exports = {
fetchApplication,
fetchAll,
};

2
frontend/src/index.jsx
View File

@ -18,6 +18,7 @@ import HistoryPage from './page/history';
import HistoryTogglePage from './page/history/toggle';
import Archive from './page/archive';
import Applications from './page/applications';
import ApplicationView from './page/applications/view';
import ClientStrategies from './page/client-strategies';
const unleashStore = createStore(
@ -41,6 +42,7 @@ ReactDOM.render(
<Route pageTitle="History" path="/history/:toggleName" component={HistoryTogglePage} />
<Route pageTitle="Archive" path="/archive" component={Archive} />
<Route pageTitle="Applications" path="/applications" component={Applications} />
<Route pageTitle="Applications" path="/applications/:name" component={ApplicationView} />
<Route pageTitle="Client strategies" ppath="/client-strategies" component={ClientStrategies} />
</Route>
</Router>

6
frontend/src/page/applications/view.js Normal file
View File

@ -0,0 +1,6 @@
import React from 'react';
import ApplicationEditComponent from '../../component/application/application-edit-container';
const render = ({ params }) => <ApplicationEditComponent appName={params.name} />;
export default render;

28
frontend/src/store/application/actions.js
View File

@ -1,20 +1,34 @@
import api from '../../data/applications-api';
export const RECEIVE_APPLICATINS = 'RECEIVE_APPLICATINS';
export const ERROR_RECEIVE_APPLICATINS = 'ERROR_RECEIVE_APPLICATINS';
export const RECEIVE_ALL_APPLICATIONS = 'RECEIVE_ALL_APPLICATIONS';
export const ERROR_RECEIVE_ALL_APPLICATIONS = 'ERROR_RECEIVE_ALL_APPLICATIONS';
const recieveApplications = (json) => ({
type: RECEIVE_APPLICATINS,
export const RECEIVE_APPLICATION = 'RECEIVE_APPLICATION';
const recieveAllApplications = (json) => ({
type: RECEIVE_ALL_APPLICATIONS,
value: json,
});
const recieveApplication = (json) => ({
type: RECEIVE_APPLICATION,
value: json,
});
const errorReceiveApplications = (statusCode) => ({
type: ERROR_RECEIVE_APPLICATINS,
type: ERROR_RECEIVE_ALL_APPLICATIONS,
statusCode,
});
export function fetchApplications () {
export function fetchAll () {
return dispatch => api.fetchAll()
.then(json => dispatch(recieveApplications(json)))
.then(json => dispatch(recieveAllApplications(json)))
.catch(error => dispatch(errorReceiveApplications(error)));
}
export function fetchApplication (appName) {
return dispatch => api.fetchApplication(appName)
.then(json => dispatch(recieveApplication(json)))
.catch(error => dispatch(errorReceiveApplications(error)));
}

12
frontend/src/store/application/index.js
View File

@ -1,14 +1,16 @@
import { fromJS } from 'immutable';
import { RECEIVE_APPLICATINS } from './actions';
import { fromJS, List, Map } from 'immutable';
import { RECEIVE_ALL_APPLICATIONS, RECEIVE_APPLICATION } from './actions';
function getInitState () {
return fromJS([]);
return fromJS({ list: [], apps: {} });
}
const store = (state = getInitState(), action) => {
switch (action.type) {
case RECEIVE_APPLICATINS:
return fromJS(action.value.applications);
case RECEIVE_APPLICATION:
return state.setIn(['apps', action.value.appName], new Map(action.value));
case RECEIVE_ALL_APPLICATIONS:
return state.set('list', new List(action.value.applications));
default:
return state;
}