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

add tabs to client application view

Browse Source
This commit is contained in:
sveisvei 2016-12-13 20:54:53 +01:00
parent 986550887b
commit f8e5a179f0
2 changed files with 90 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
frontend/src/component/application/application-edit-component.js
View File

@ -2,7 +2,12 @@
import React, { Component, PureComponent } from 'react'; import React, { Component, PureComponent } from 'react';
import { Link } from 'react-router'; import { Link } from 'react-router';
import { Grid, Cell, List, ListItem, ListItemContent, Textfield, Icon, ProgressBar } from 'react-mdl'; import {
Grid, Cell,
List, ListItem, ListItemContent,
Textfield, Icon, ProgressBar,
Tabs, Tab,
} from 'react-mdl';
import { HeaderTitle, ExternalIconLink } from '../common'; import { HeaderTitle, ExternalIconLink } from '../common';
class StatefulTextfield extends Component { class StatefulTextfield extends Component {
@ -27,7 +32,12 @@ class StatefulTextfield extends Component {
} }
} }
class ClientStrategies extends PureComponent { class ClientApplications extends PureComponent {
constructor (props) {
super(props);
this.state = { activeTab: 0 };
}
componentDidMount () { componentDidMount () {
this.props.fetchApplication(this.props.appName); this.props.fetchApplication(this.props.appName);
} }
@ -51,80 +61,92 @@ class ClientStrategies extends PureComponent {
color, color,
} = application; } = application;
const content = this.state.activeTab === 0 ? (
<Grid>
<Cell col={3}>
<h6> Toggles</h6>
<hr />
<List>
{seenToggles.map((name, i) =>
<ListItem key={i}>
<ListItemContent icon="check box">
<Link to={`/features/edit/${name}`}>
{name}
</Link>
</ListItemContent>
</ListItem>)}
</List>
</Cell>
<Cell col={3}>
<h6>Implemented strategies</h6>
<hr />
<List>
{strategies.map((name, i) => (
<ListItem key={`${name}-${i}`}>
<ListItemContent icon="toc">
<Link to={`/strategies/view/${name}`}>
{name}
</Link>
</ListItemContent>
</ListItem>
))}
</List>
</Cell>
<Cell col={6}>
<h6>{instances.length} Instances connected</h6>
<hr />
<List>
{instances.map(({ instanceId, clientIp, lastSeen }, i) => (
<ListItem key={i} twoLine>
<ListItemContent
icon="timeline"
subtitle={
<span>{clientIp} last seen at <small>{new Date(lastSeen).toLocaleString('nb-NO')}</small></span>
}>
{instanceId}
</ListItemContent>
</ListItem>
))}
</List>
</Cell>
</Grid>) : (
<Grid>
<Cell col={12}>
<h5>Edit app meta data</h5>
</Cell>
<Cell col={6}>
<StatefulTextfield
value={url} label="URL" onBlur={(e) => storeApplicationMetaData(appName, 'url', e.target.value)} /><br />
<StatefulTextfield
value={description}
label="Description" rows={5} onBlur={(e) => storeApplicationMetaData(appName, 'description', e.target.value)} />
</Cell>
<Cell col={6}>
<StatefulTextfield
value={icon} label="Select icon" onBlur={(e) => storeApplicationMetaData(appName, 'icon', e.target.value)} />
<StatefulTextfield
value={color} label="Select color" onBlur={(e) => storeApplicationMetaData(appName, 'color', e.target.value)} />
</Cell>
</Grid>);
return ( return (
<div> <div>
<HeaderTitle title={<span><Icon name={icon} /> {appName}</span>} subtitle={description} <HeaderTitle title={<span><Icon name={icon} /> {appName}</span>} subtitle={description}
actions={url && <ExternalIconLink url={url}>Visit site</ExternalIconLink>} actions={url && <ExternalIconLink url={url}>Visit site</ExternalIconLink>}
/> />
<Grid>
<Cell col={3}>
<h6> Toggles</h6>
<hr />
<List>
{seenToggles.map((name, i) =>
<ListItem key={i}>
<ListItemContent icon="check box">
<Link to={`/features/edit/${name}`}>
{name}
</Link>
</ListItemContent>
</ListItem>)}
</List>
</Cell>
<Cell col={3}>
<h6>Implemented strategies</h6>
<hr />
<List>
{strategies.map((name, i) => (
<ListItem key={`${name}-${i}`}>
<ListItemContent icon="toc">
<Link to={`/strategies/view/${name}`}>
{name}
</Link>
</ListItemContent>
</ListItem>
))}
</List>
</Cell>
<Cell col={6}>
<h6>{instances.length} Instances connected</h6>
<hr />
<List>
{instances.map(({ instanceId, clientIp, lastSeen }, i) => (
<ListItem key={i} twoLine>
<ListItemContent
icon="timeline"
subtitle={
<span>{clientIp} last seen at <small>{new Date(lastSeen).toLocaleString('nb-NO')}</small></span>
}>
{instanceId}
</ListItemContent>
</ListItem>
))}
</List>
</Cell>
<Cell col={12}> <Tabs activeTab={this.state.activeTab} onChange={(tabId) => this.setState({ activeTab: tabId })} ripple>
<h5>Edit app meta data</h5> <Tab>Metrics</Tab>
</Cell> <Tab>Edit</Tab>
<Cell col={6}> </Tabs>
<StatefulTextfield
value={url} label="URL" onBlur={(e) => storeApplicationMetaData(appName, 'url', e.target.value)} /><br /> {content}
<StatefulTextfield
value={description}
label="Description" rows={5} onBlur={(e) => storeApplicationMetaData(appName, 'description', e.target.value)} />
</Cell>
<Cell col={6}>
<StatefulTextfield
value={icon} label="Select icon" onBlur={(e) => storeApplicationMetaData(appName, 'icon', e.target.value)} />
<StatefulTextfield
value={color} label="Select color" onBlur={(e) => storeApplicationMetaData(appName, 'color', e.target.value)} />
</Cell>
</Grid>
</div> </div>
); );
} }
} }
export default ClientStrategies; export default ClientApplications;

2
frontend/src/component/common/index.js
View File

@ -24,7 +24,7 @@ export const AppsLinkList = ({ apps }) => (
export const HeaderTitle = ({ title, actions, subtitle }) => ( export const HeaderTitle = ({ title, actions, subtitle }) => (
<div style={{ display: 'flex', borderBottom: '1px solid #f1f1f1', marginBottom: '10px', padding: '16px 20px ' }}> <div style={{ display: 'flex', borderBottom: '1px solid #f1f1f1', marginBottom: '10px', padding: '16px 20px ' }}>
<div style={{ flex: '1' }}> <div style={{ flex: '2' }}>
<h6 style={{ margin: 0 }}>{title}</h6> <h6 style={{ margin: 0 }}>{title}</h6>
{subtitle && <small>{subtitle}</small>} {subtitle && <small>{subtitle}</small>}
</div> </div>