unleash.unleash/frontend/src/component/application/application-edit-component.js

/* eslint react/no-multi-comp:off */
import React, { Component, PureComponent } from 'react';

import { Link } from 'react-router';
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 { formatFullDateTime } from '../common/util';

class StatefulTextfield extends Component {
    constructor(props) {
        super(props);
        this.state = { value: props.value };
        this.setValue = function setValue(e) {
            this.setState({ value: e.target.value });
        }.bind(this);
    }

    render() {
        return (
            <Textfield
                style={{ width: '100%' }}
                label={this.props.label}
                floatingLabel
                rows={this.props.rows}
                value={this.state.value}
                onChange={this.setValue}
                onBlur={this.props.onBlur}
            />
        );
    }
}

class ClientApplications extends PureComponent {
    constructor(props) {
        super(props);
        this.state = { activeTab: 0 };
    }

    componentDidMount() {
        this.props.fetchApplication(this.props.appName);
    }

    render() {
        if (!this.props.application) {
            return <ProgressBar indeterminate />;
        }
        const { application, storeApplicationMetaData } = this.props;
        const { appName, instances, strategies, seenToggles, url, description, icon = 'apps', color } = application;

        const content =
            this.state.activeTab === 0 ? (
                <Grid style={{ margin: 0 }}>
                    <Cell col={6} tablet={4} phone={12}>
                        <h6> Toggles</h6>
                        <hr />
                        <List>
                            {seenToggles.map(
                                ({ name, description, enabled, notFound }, i) =>
                                    notFound ? (
                                        <ListItem twoLine key={i}>
                                            <ListItemContent icon={'report'} subtitle={'Missing, want to create?'}>
                                                <Link to={`/features/create?name=${name}`}>{name}</Link>
                                            </ListItemContent>
                                        </ListItem>
                                    ) : (
                                        <ListItem twoLine key={i}>
                                            <ListItemContent
                                                icon={
                                                    <span>
                                                        <Switch disabled checked={!!enabled} />
                                                    </span>
                                                }
                                                subtitle={shorten(description, 60)}
                                            >
                                                <Link to={`/features/view/${name}`}>{shorten(name, 50)}</Link>
                                            </ListItemContent>
                                        </ListItem>
                                    )
                            )}
                        </List>
                    </Cell>
                    <Cell col={6} tablet={4} phone={12}>
                        <h6>Implemented strategies</h6>
                        <hr />
                        <List>
                            {strategies.map(
                                ({ name, description, notFound }, i) =>
                                    notFound ? (
                                        <ListItem twoLine key={`${name}-${i}`}>
                                            <ListItemContent icon={'report'} subtitle={'Missing, want to create?'}>
                                                <Link to={`/strategies/create?name=${name}`}>{name}</Link>
                                            </ListItemContent>
                                        </ListItem>
                                    ) : (
                                        <ListItem twoLine key={`${name}-${i}`}>
                                            <ListItemContent icon={'extension'} subtitle={shorten(description, 60)}>
                                                <Link to={`/strategies/view/${name}`}>{shorten(name, 50)}</Link>
                                            </ListItemContent>
                                        </ListItem>
                                    )
                            )}
                        </List>
                    </Cell>
                    <Cell col={12} tablet={12}>
                        <h6>{instances.length} Instances registered</h6>
                        <hr />
                        <List>
                            {instances.map(({ instanceId, clientIp, lastSeen, sdkVersion }, i) => (
                                <ListItem key={i} twoLine>
                                    <ListItemContent
                                        icon="timeline"
                                        subtitle={
                                            <span>
                                                {clientIp} last seen at <small>{formatFullDateTime(lastSeen)}</small>
                                            </span>
                                        }
                                    >
                                        {instanceId} {sdkVersion ? `(${sdkVersion})` : ''}
                                    </ListItemContent>
                                </ListItem>
                            ))}
                        </List>
                    </Cell>
                </Grid>
            ) : (
                <Grid>
                    <Cell col={12}>
                        <h5>Edit app meta data</h5>
                    </Cell>
                    <Cell col={6} tablet={12}>
                        <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} tablet={12}>
                        <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 (
            <Card shadow={0} className={commonStyles.fullwidth}>
                <CardTitle style={{ paddingTop: '24px', paddingRight: '64px', wordBreak: 'break-all' }}>
                    <Icon name={icon} /> {appName}
                </CardTitle>
                {description && <CardText>{description}</CardText>}
                {url && (
                    <CardMenu>
                        <IconLink url={url} icon="link" />
                    </CardMenu>
                )}
                <hr />
                <Tabs
                    activeTab={this.state.activeTab}
                    onChange={tabId => this.setState({ activeTab: tabId })}
                    ripple
                    tabBarProps={{ style: { width: '100%' } }}
                    className="mdl-color--grey-100"
                >
                    <Tab>Details</Tab>
                    <Tab>Edit</Tab>
                </Tabs>

                {content}
            </Card>
        );
    }
}

export default ClientApplications;