From ab10556025f47b5784a89b48261768d8bd563af9 Mon Sep 17 00:00:00 2001
From: Kai Reinhard <K.Reinhard@micromata.de>
Date: Sat, 15 Dec 2018 07:09:23 +0000
Subject: [PATCH] ...
---
borgbutler-webapp/src/components/views/repos/RepoArchiveListView.jsx | 162 ++++++++++++++++++++++++++++++++---------------------
1 files changed, 97 insertions(+), 65 deletions(-)
diff --git a/borgbutler-webapp/src/components/views/repos/RepoArchiveListView.jsx b/borgbutler-webapp/src/components/views/repos/RepoArchiveListView.jsx
index 160dd6f..6b321fd 100644
--- a/borgbutler-webapp/src/components/views/repos/RepoArchiveListView.jsx
+++ b/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);
}
}
--
Gitblit v1.10.0