...

Kai Reinhard

15.09.2018 ab10556025f47b5784a89b48261768d8bd563af9

...

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

@@ -1,5 +1,6 @@
import React from 'react'
import {Table} from 'reactstrap';
import {Nav, NavLink, TabContent, Table, TabPane} from 'reactstrap';
import classNames from 'classnames';
import {PageHeader} from '../../general/BootstrapComponents';
import {getRestServiceUrl, humanFileSize} from '../../../utilities/global';
import ErrorAlert from '../../general/ErrorAlert';
@@ -9,7 +10,8 @@

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

    componentDidMount = () => {
@@ -41,6 +43,13 @@
            .catch(() => this.setState({isFetching: false, failed: true}));
    };

    toggleTab = tab => () => {
        this.setState({
            activeTab: tab
        })
    };


    render = () => {
        let content = undefined;
        const repo = this.state.repo;
@@ -58,8 +67,7 @@
                }}
            />;
        } else if (this.state.repo) {
            pageHeader = `${repo.displayName}`;
            content = <React.Fragment>
            pageHeader = <React.Fragment>
                {repo.displayName}
                <div
                    className={'btn btn-outline-primary refresh-button-right'}
@@ -67,67 +75,90 @@
                >
                    <IconRefresh/>
                </div>
                <Table hover>
                    <tbody>
                    <tr>
                        <td>Name</td>
                        <td>{repo.name}</td>
                    </tr>
                    <tr>
                        <td>Id</td>
                        <td>{repo.id}</td>
                    </tr>
                    <tr>
                        <td>Location</td>
                        <td>{repo.location}</td>
                    </tr>
                    <tr>
                        <td>Security dir</td>
                        <td>{repo.securityDir}</td>
                    </tr>
                    <tr>
                        <td>Encryption</td>
                        <td>{repo.encryption.mode}</td>
                    </tr>
                    <tr>
                        <td>Cache</td>
                        <td>{repo.cache.path}</td>
                    </tr>
                    <tr>
                        <td>Cache stats</td>
                        <td>
                            <table className="inline">
                                <tbody>
                                <tr>
                                    <td>Total chunks</td>
                                    <td>{Number(repo.cache.stats.total_chunks).toLocaleString()}</td>
                                </tr>
                                <tr>
                                    <td>Total csize</td>
                                    <td>{humanFileSize(repo.cache.stats.total_csize)}</td>
                                </tr>
                                <tr>
                                    <td>Total size</td>
                                    <td>{humanFileSize(repo.cache.stats.total_size)}</td>
                                </tr>
                                <tr>
                                    <td>Total unique chunks</td>
                                    <td>{Number(repo.cache.stats.total_unique_chunks).toLocaleString()}</td>
                                </tr>
                                <tr>
                                    <td>Unique csize</td>
                                    <td>{humanFileSize(repo.cache.stats.unique_csize)}</td>
                                </tr>
                                <tr>
                                    <td>Unique size</td>
                                    <td>{humanFileSize(repo.cache.stats.unique_size)}</td>
                                </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    </tbody>
                </Table>
            </React.Fragment>;
            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>
                </Nav>
                <TabContent activeTab={this.state.activeTab}>
                    <TabPane tabId={'1'}>
                        Hurzel
                    </TabPane>
                    <TabPane tabId={'2'}>
                        <Table 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>
                            <tr>
                                <td>Stats</td>
                                <td>
                                    <table className="inline">
                                        <tbody>
                                        <tr>
                                            <td>Total chunks</td>
                                            <td>{Number(repo.cache.stats.total_chunks).toLocaleString()}</td>
                                        </tr>
                                        <tr>
                                            <td>Total csize</td>
                                            <td>{humanFileSize(repo.cache.stats.total_csize)}</td>
                                        </tr>
                                        <tr>
                                            <td>Total size</td>
                                            <td>{humanFileSize(repo.cache.stats.total_size)}</td>
                                        </tr>
                                        <tr>
                                            <td>Total unique chunks</td>
                                            <td>{Number(repo.cache.stats.total_unique_chunks).toLocaleString()}</td>
                                        </tr>
                                        <tr>
                                            <td>Unique csize</td>
                                            <td>{humanFileSize(repo.cache.stats.unique_csize)}</td>
                                        </tr>
                                        <tr>
                                            <td>Unique size</td>
                                            <td>{humanFileSize(repo.cache.stats.unique_size)}</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td>Security dir</td>
                                <td>{repo.securityDir}</td>
                            </tr>
                            <tr>
                                <td>Encryption</td>
                                <td>{repo.encryption.mode}</td>
                            </tr>
                            <tr>
                                <td>Cache</td>
                                <td>{repo.cache.path}</td>
                            </tr>
                            </tbody>
                        </Table>
                    </TabPane>
                </TabContent>
            </React.Fragment>;

        }
@@ -143,6 +174,7 @@
        super(props);

        this.fetchRepos = this.fetchRepos.bind(this);
        this.toggleTab = this.toggleTab.bind(this);
    }
}


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

@@ -66,12 +66,6 @@
        } else if (this.state.repos) {

            content = <React.Fragment>
                <div
                    className={'btn btn-outline-primary refresh-button-right'}
                    onClick={this.fetchRepos.bind(this, true)}
                >
                    <IconRefresh/>
                </div>
                <CardDeck>
                {this.state.repos.map(repo => {
                    return <RepoCard
@@ -87,6 +81,12 @@
        return <React.Fragment>
            <PageHeader>
                Repositories
                <div
                    className={'btn btn-outline-primary refresh-button-right'}
                    onClick={this.fetchRepos.bind(this, true)}
                >
                    <IconRefresh/>
                </div>
            </PageHeader>
            {content}
        </React.Fragment>;