BorgRepConfig...Repo config...

Kai Reinhard

18.35.2019 1dab687e769cc830adeb2ef53642abad77e1f7a6

 borgbutler-webapp/src/components/views/repos/RepoArchiveListView.jsx

@@ -1,5 +1,5 @@
import React from 'react'
import {Nav, NavLink, TabContent, Table, TabPane} from 'reactstrap';
import {Badge, Nav, NavLink, TabContent, Table, TabPane} from 'reactstrap';
import {Link} from "react-router-dom";
import classNames from 'classnames';
import {PageHeader} from '../../general/BootstrapComponents';
@@ -13,8 +13,10 @@

    state = {
        id: this.props.match.params.id,
        displayName: this.props.match.params.displayName,
        isFetching: false,
        activeTab: '1',
        redirectOnError: true
    };

    componentDidMount = () => {
@@ -43,7 +45,12 @@
                    repo: json
                })
            })
            .catch(() => this.setState({isFetching: false, failed: true}));
            .catch(() => {
                this.setState({isFetching: false, failed: true})
                if (this.state.redirectOnError && this.state.activeTab !== '3') {
                    this.setState({activeTab: '3', redirectOnError: false});
                }
            });
    };

    toggleTab = tab => () => {
@@ -52,22 +59,46 @@
        })
    };

    afterSave() {
        if (!this.state.failed) {
            this.setState({
                activeTab: '1'
            })
        }
    }

    afterCancel() {
        if (!this.state.failed) {
            this.setState({
                activeTab: '1'
            })
        }
    }

    render = () => {
        let content = undefined;
        let errorBadge = '';
        let content1 = undefined;
        let content2 = undefined;
        const repo = this.state.repo;
        let pageHeader = '';
        const displayName = (this.state.displayName) ? this.state.displayName : `Error: id=${this.state.id}`;
        let pageHeader = <React.Fragment>
            {displayName}
        </React.Fragment>;

        if (this.state.isFetching) {
            content = <JobMonitorPanel repo={this.state.id}/>;
            content1 = <JobMonitorPanel repo={this.state.id}/>;
            content2 = content1;
        } else if (this.state.failed) {
            content = <ErrorAlert
            content1 = <ErrorAlert
                title={'Cannot load Repositories'}
                description={'Something went wrong during contacting the rest api.'}
                description={'Something went wrong, may-be wrong configuration?'}
                action={{
                    handleClick: this.fetchRepo,
                    title: 'Try again'
                }}
            />;
            content2 = content1;
            errorBadge = <Badge color="danger" pill>!</Badge>;
        } else if (this.state.repo) {
            pageHeader = <React.Fragment>
                {repo.displayName}
@@ -128,91 +159,90 @@
                    <td>{repo.cache.path}</td>
                </tr>
            }
            content = <React.Fragment>
                <Nav tabs>
                    <NavLink
                        className={classNames({active: this.state.activeTab === '1'})}
                        onClick={this.toggleTab('1')}
                    >
                        Archives
                    </NavLink>
                    <NavLink
                        className={classNames({active: this.state.activeTab === '2'})}
                        onClick={this.toggleTab('2')}
                    >
                        Information
                    </NavLink>
                    <NavLink
                        className={classNames({active: this.state.activeTab === '3'})}
                        onClick={this.toggleTab('3')}
                    >
                        Configuration
                    </NavLink>
                </Nav>
                <TabContent activeTab={this.state.activeTab}>
                    <TabPane tabId={'1'}>
                        <Table hover>
                            <tbody>
                            <tr>
                                <th>Archive</th>
                                <th>Time</th>
                                <th></th>
                                <th>Id</th>
                            </tr>
                            {repo.archives.map((archive) => {
                                // Return the element. Also pass key
                                let loaded = '';
                                if (archive.fileListAlreadyCached) {
                                    loaded = <IconCheck/>;
                                }
                                return (
                                    <tr key={archive.id}>
                                        <td><Link to={`/archives/${repo.id}/${archive.id}`}>{archive.name}</Link></td>
                                        <td>{archive.time}</td>
                                        <td>{loaded}</td>
                                        <td>{archive.id}</td>
                                    </tr>);
                            })}
                            </tbody>
                        </Table>
                    </TabPane>
                    <TabPane tabId={'2'}>
                        <Table striped bordered hover>
                            <tbody>
                            <tr>
                                <td>Id</td>
                                <td>{repo.id}</td>
                            </tr>
                            <tr>
                                <td>Name</td>
                                <td>{repo.name}</td>
                            </tr>
                            <tr>
                                <td>Location</td>
                                <td>{repo.location}</td>
                            </tr>
                            {stats}
                            <tr>
                                <td>Security dir</td>
                                <td>{repo.securityDir}</td>
                            </tr>
                            {encryption}
                            {cachePath}
                            </tbody>
                        </Table>
                    </TabPane>
                    <TabPane tabId={'3'}>
                        <RepoConfigPanel id={repo.id}/>
                    </TabPane>
                </TabContent>
            </React.Fragment>;
            content1 = <Table hover>
                <tbody>
                <tr>
                    <th>Archive</th>
                    <th>Time</th>
                    <th></th>
                    <th>Id</th>
                </tr>
                {repo.archives.map((archive) => {
                    // Return the element. Also pass key
                    let loaded = '';
                    if (archive.fileListAlreadyCached) {
                        loaded = <IconCheck/>;
                    }
                    return (
                        <tr key={archive.id}>
                            <td><Link to={`/archives/${repo.id}/${archive.id}`}>{archive.name}</Link></td>
                            <td>{archive.time}</td>
                            <td>{loaded}</td>
                            <td>{archive.id}</td>
                        </tr>);
                })}
                </tbody>
            </Table>;
            content2 = <Table striped bordered hover>
                <tbody>
                <tr>
                    <td>Id</td>
                    <td>{repo.id}</td>
                </tr>
                <tr>
                    <td>Name</td>
                    <td>{repo.name}</td>
                </tr>
                <tr>
                    <td>Location</td>
                    <td>{repo.location}</td>
                </tr>
                {stats}
                <tr>
                    <td>Security dir</td>
                    <td>{repo.securityDir}</td>
                </tr>
                {encryption}
                {cachePath}
                </tbody>
            </Table>;

        }
        return <React.Fragment>
            <PageHeader>
                {pageHeader}
            </PageHeader>
            {content}
            <Nav tabs>
                <NavLink
                    className={classNames({active: this.state.activeTab === '1'})}
                    onClick={this.toggleTab('1')}
                >
                    Archives {errorBadge}
                </NavLink>
                <NavLink
                    className={classNames({active: this.state.activeTab === '2'})}
                    onClick={this.toggleTab('2')}
                >
                    Information {errorBadge}
                </NavLink>
                <NavLink
                    className={classNames({active: this.state.activeTab === '3'})}
                    onClick={this.toggleTab('3')}
                >
                    Configuration
                </NavLink>
            </Nav>
            <TabContent activeTab={this.state.activeTab}>
                <TabPane tabId={'1'}>
                    {content1}
                </TabPane>
                <TabPane tabId={'2'}>
                    {content2}
                </TabPane>
                <TabPane tabId={'3'}>
                    <RepoConfigPanel id={this.state.id} afterCancel={this.afterCancel} afterSave={this.afterSave} repoError={this.state.failed}/>
                </TabPane>
            </TabContent>
        </React.Fragment>;
    };

@@ -221,6 +251,8 @@

        this.fetchRepo = this.fetchRepo.bind(this);
        this.toggleTab = this.toggleTab.bind(this);
        this.afterCancel = this.afterCancel.bind(this);
        this.afterSave = this.afterSave.bind(this);
    }
}