render()

in source/console/src/views/Actions.tsx [149:253]

• 105 lines of code
• 6 McCabe index (conditional complexity)

    render() {
        return (
            <div>
                <Grid>
                    <Row>
                        <Col md={12}>
                            <Breadcrumb>
                                <LinkContainer to="/tasks" exact>
                                    <BreadcrumbItem>Tasks</BreadcrumbItem>
                                </LinkContainer>
                                <BreadcrumbItem active>Actions</BreadcrumbItem>
                            </Breadcrumb>
                        </Col>
                    </Row>
                    <Row>
                        <Col md={12}>
                            <PageHeader>Action Catalog</PageHeader>
                        </Col>
                    </Row>
                    <Row>
                        <Col md={12}>
                            <FormGroup>
                                <InputGroup>
                                    <InputGroup.Addon>
                                        <Glyphicon glyph="search" />
                                    </InputGroup.Addon>
                                    <FormControl type="text" placeholder="Enter action name to search" onChange={this.handleSearch} />
                                </InputGroup>
                            </FormGroup>
                        </Col>
                    </Row>
                    <Row>
                        <Col md={12}>
                            <Table striped bordered condensed hover>
                                <thead>
                                    <tr>
                                        <th>
                                            Action Name
                                            &nbsp;
                                            <Button bsSize="xsmall" onClick={this.handleSort}>
                                                <Glyphicon glyph={this.state.sortIcon} />
                                            </Button>
                                        </th>
                                        <th>Owner</th>
                                        <th>Description</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {
                                        this.state.isLoading &&
                                        <tr>
                                            <td colSpan={4} align="center">Loading...</td>
                                        </tr>
                                    }
                                    {
                                        this.state.actions.length === 0 && !this.state.isLoading &&
                                        <tr>
                                            <td colSpan={4} align="center">No action found.</td>
                                        </tr>
                                    }
                                    {
                                        this.state.actions
                                            .filter((action: Action) => action.visible)
                                            .map((action: Action) => {
                                                return (
                                                    <tr key={action.name}>
                                                        <td>{action.name}</td>
                                                        <td>{action.owner}</td>
                                                        <td>{action.description}</td>
                                                        <td>
                                                            <Button bsStyle="primary" bsSize="xsmall"
                                                                onClick={() => { this.props.history.push({ pathname: '/tasks/create', state: { actionName: action.name }}) }}>Create Task</Button>
                                                        </td>
                                                    </tr>
                                                );
                                        })
                                    }
                                </tbody>
                            </Table>
                        </Col>
                    </Row>
                    {
                        this.state.error &&
                        <Row>
                            <Col md={12}>
                                <Alert bsStyle="danger">
                                    <strong>Error:</strong><br />
                                    {this.state.error}
                                </Alert>
                            </Col>
                        </Row>
                    }
                    {
                        this.state.isLoading &&
                        <Row>
                            <Col md={12}>
                                <ProgressBar active now={100} />
                            </Col>
                        </Row>
                    }
                </Grid>
            </div>
        );
    }