/* eslint react/no-multi-comp:off */ import React, { Component, PureComponent } from 'react'; import PropTypes from 'prop-types'; import { Link } from 'react-router-dom'; import { Grid, Cell, Card, CardTitle, CardText, CardMenu, List, ListItem, ListItemContent, Textfield, Icon, ProgressBar, Tabs, Tab, Switch, } from 'react-mdl'; import { IconLink, shorten, styles as commonStyles } from '../common'; import { formatFullDateTimeWithLocale } from '../common/util'; import { CREATE_FEATURE, CREATE_STRATEGY, UPDATE_APPLICATION } from '../../permissions'; class StatefulTextfield extends Component { static propTypes = { value: PropTypes.string, label: PropTypes.string, rows: PropTypes.number, onBlur: PropTypes.func.isRequired, }; constructor(props) { super(props); this.state = { value: props.value }; this.setValue = function setValue(e) { this.setState({ value: e.target.value }); }.bind(this); } render() { return ( ); } } class ClientApplications extends PureComponent { static propTypes = { fetchApplication: PropTypes.func.isRequired, appName: PropTypes.string, application: PropTypes.object, location: PropTypes.object, storeApplicationMetaData: PropTypes.func.isRequired, hasPermission: PropTypes.func.isRequired, }; constructor(props) { super(props); this.state = { activeTab: 0 }; } componentDidMount() { this.props.fetchApplication(this.props.appName); } formatFullDateTime(v) { return formatFullDateTimeWithLocale(v, this.props.location.locale); } render() { if (!this.props.application) { return ; } const { application, storeApplicationMetaData, hasPermission } = this.props; const { appName, instances, strategies, seenToggles, url, description, icon = 'apps', color } = application; const content = this.state.activeTab === 0 ? (
Toggles

{seenToggles.map(({ name, description, enabled, notFound }, i) => notFound ? ( {hasPermission(CREATE_FEATURE) ? ( {name} ) : ( {name} )} ) : ( } subtitle={shorten(description, 60)} > {shorten(name, 50)} ) )}
Implemented strategies

{strategies.map(({ name, description, notFound }, i) => notFound ? ( {hasPermission(CREATE_STRATEGY) ? ( {name} ) : ( {name} )} ) : ( {shorten(name, 50)} ) )}
{instances.length} Instances registered

{instances.map(({ instanceId, clientIp, lastSeen, sdkVersion }, i) => ( {clientIp} last seen at{' '} {this.formatFullDateTime(lastSeen)} } > {instanceId} {sdkVersion ? `(${sdkVersion})` : ''} ))}
) : (
Edit app meta data
storeApplicationMetaData(appName, 'url', e.target.value)} />
storeApplicationMetaData(appName, 'description', e.target.value)} />
storeApplicationMetaData(appName, 'icon', e.target.value)} /> storeApplicationMetaData(appName, 'color', e.target.value)} />
); return ( {appName} {description && {description}} {url && ( )}
{hasPermission(UPDATE_APPLICATION) ? ( this.setState({ activeTab: tabId })} ripple tabBarProps={{ style: { width: '100%' } }} className="mdl-color--grey-100" > Details Edit ) : ( '' )} {content}
); } } export default ClientApplications;