1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-23 00:22:19 +01:00

load app list from common

This commit is contained in:
sveisvei 2016-12-09 22:11:05 +01:00
parent b0a1b4e2d1
commit 61729c3467
4 changed files with 45 additions and 35 deletions

View File

@ -43,13 +43,16 @@ class ClientStrategies extends PureComponent {
instances, instances,
strategies, strategies,
seenToggles, seenToggles,
data = {}, url,
description,
icon = 'apps',
color,
} = application; } = application;
return ( return (
<div> <div>
<h5><Icon name={data.icon || 'apps'} /> {appName}</h5> <h5><Icon name={icon} /> {appName}</h5>
{data.description && <p>{data.description} </p>} {description && <p>{description} </p>}
<Grid> <Grid>
<Cell col={3}> <Cell col={3}>
<h6> Toggles</h6> <h6> Toggles</h6>
@ -86,7 +89,11 @@ class ClientStrategies extends PureComponent {
<List> <List>
{instances.map(({ instanceId, clientIp, lastSeen }, i) => ( {instances.map(({ instanceId, clientIp, lastSeen }, i) => (
<ListItem key={i} twoLine> <ListItem key={i} twoLine>
<ListItemContent icon="timeline" subtitle={<span>{clientIp} last seen at <small>{new Date(lastSeen).toLocaleString('nb-NO')}</small></span>}> <ListItemContent
icon="timeline"
subtitle={
<span>{clientIp} last seen at <small>{new Date(lastSeen).toLocaleString('nb-NO')}</small></span>
}>
{instanceId} {instanceId}
</ListItemContent> </ListItemContent>
</ListItem> </ListItem>
@ -98,12 +105,17 @@ class ClientStrategies extends PureComponent {
<h5>Edit app meta data</h5> <h5>Edit app meta data</h5>
</Cell> </Cell>
<Cell col={6}> <Cell col={6}>
<StatefulTextfield value={data.url} label="URL" onBlur={(e) => storeApplicationMetaData(appName, 'url', e.target.value)} /><br /> <StatefulTextfield
<StatefulTextfield value={data.description} label="Description" rows={5} onBlur={(e) => storeApplicationMetaData(appName, 'description', e.target.value)} /> 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>
<Cell col={6}> <Cell col={6}>
<StatefulTextfield value={data.icon} label="Select icon" onBlur={(e) => storeApplicationMetaData(appName, 'icon', e.target.value)} /> <StatefulTextfield
<StatefulTextfield value={data.color} label="Select color" onBlur={(e) => storeApplicationMetaData(appName, 'color', e.target.value)} /> 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> </Cell>
</Grid> </Grid>
</div> </div>

View File

@ -1,6 +1,5 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { List, ListItem, ListItemContent } from 'react-mdl'; import { AppsLinkList } from '../common';
import { Link } from 'react-router';
class ClientStrategies extends Component { class ClientStrategies extends Component {
@ -14,23 +13,13 @@ class ClientStrategies extends Component {
} = this.props; } = this.props;
if (!applications) { if (!applications) {
return <div>loading...</div>; return <div>Loading...</div>;
} }
return ( return (
<div> <div>
<h5>Applications</h5> <h5>Applications</h5>
<hr /> <hr />
<List> <AppsLinkList apps={applications} />
{applications.map(({ appName, data = {} }) => (
<ListItem key={appName} twoLine>
<ListItemContent avatar={data.icon || 'apps'} subtitle={data.description}>
<Link to={`/applications/${appName}`}>
{appName}
</Link>
</ListItemContent>
</ListItem>
))}
</List>
</div> </div>
); );
} }

View File

@ -0,0 +1,18 @@
const React = require('react');
const { List, ListItem, ListItemContent } = require('react-mdl');
const { Link } = require('react-router');
export const AppsLinkList = ({ apps }) => (
<List style={{ textAlign: 'left' }}>
{apps.length > 0 && apps.map(({ appName, description = '-', icon = 'apps' }) => (
<ListItem twoLine key={appName}>
<ListItemContent avatar={icon} subtitle={description}>
<Link key={appName} to={`/applications/${appName}`}>
{appName}
</Link>
</ListItemContent>
</ListItem>
))}
</List>
);

View File

@ -12,6 +12,8 @@ import { fetchFeatureMetrics, fetchSeenApps } from '../../store/feature-metrics-
import { fetchHistoryForToggle } from '../../store/history-actions'; import { fetchHistoryForToggle } from '../../store/history-actions';
import { getIcon } from '../history/history-item-diff'; import { getIcon } from '../history/history-item-diff';
import { AppsLinkList } from '../common';
class EditFeatureToggleWrapper extends React.Component { class EditFeatureToggleWrapper extends React.Component {
static propTypes () { static propTypes () {
@ -30,7 +32,6 @@ class EditFeatureToggleWrapper extends React.Component {
this.props.fetchHistoryForToggle(this.props.featureToggleName); this.props.fetchHistoryForToggle(this.props.featureToggleName);
this.props.fetchFeatureMetrics(); this.props.fetchFeatureMetrics();
this.timer = setInterval(() => { this.timer = setInterval(() => {
this.props.fetchSeenApps();
this.props.fetchFeatureMetrics(); this.props.fetchFeatureMetrics();
}, 5000); }, 5000);
} }
@ -63,7 +64,7 @@ class EditFeatureToggleWrapper extends React.Component {
if (features.length === 0 ) { if (features.length === 0 ) {
return <span>Loading</span>; return <span>Loading</span>;
} }
return <span>Could not find {this.props.featureToggleName}</span>; return <span>Could not find the toggle "{this.props.featureToggleName}"</span>;
} }
return ( return (
@ -105,17 +106,7 @@ class EditFeatureToggleWrapper extends React.Component {
<div><small><strong>Not used in a app in the last hour.</strong> This might be due to your client implementation is not reporting usage.</small></div> <div><small><strong>Not used in a app in the last hour.</strong> This might be due to your client implementation is not reporting usage.</small></div>
</div> </div>
} }
<List style={{ textAlign: 'left' }}> <AppsLinkList apps={seenApps} />
{seenApps.length > 0 && seenApps.map(({ appName, data = {} }) => (
<ListItem twoLine>
<ListItemContent avatar={data.icon || 'apps'} subtitle={data.description || '-'}>
<Link key={appName} to={`/applications/${appName}`}>
{appName}
</Link>
</ListItemContent>
</ListItem>
))}
</List>
</Cell> </Cell>
<Cell col={3}> <Cell col={3}>
<div><strong>History</strong></div> <div><strong>History</strong></div>