From 1bb3ee67ddd397d61791dab220a9a65d23c9a91e Mon Sep 17 00:00:00 2001
From: Kai Reinhard <K.Reinhard@micromata.de>
Date: Sun, 16 Dec 2018 11:03:32 +0000
Subject: [PATCH] Tab
---
borgbutler-webapp/src/components/views/archives/ArchiveView.jsx | 178 ++++++++++++++++++++++++++++++++++-------------------------
1 files changed, 103 insertions(+), 75 deletions(-)
diff --git a/borgbutler-webapp/src/components/views/archives/ArchiveView.jsx b/borgbutler-webapp/src/components/views/archives/ArchiveView.jsx
index b08c7e6..ce2ded3 100644
--- a/borgbutler-webapp/src/components/views/archives/ArchiveView.jsx
+++ b/borgbutler-webapp/src/components/views/archives/ArchiveView.jsx
@@ -1,9 +1,10 @@
import React from 'react'
-import {Table} from 'reactstrap';
+import {Nav, NavLink, TabContent, Table, TabPane} from 'reactstrap';
import {PageHeader} from '../../general/BootstrapComponents';
import {getRestServiceUrl, humanFileSize, humanSeconds} from '../../../utilities/global';
import ErrorAlert from '../../general/ErrorAlert';
import {IconRefresh} from "../../general/IconComponents";
+import classNames from "classnames";
class ArchiveView extends React.Component {
@@ -44,6 +45,12 @@
.catch(() => this.setState({isFetching: false, failed: true}));
};
+ toggleTab = tab => () => {
+ this.setState({
+ activeTab: tab
+ })
+ };
+
render = () => {
let content = undefined;
let archive = this.state.archive;
@@ -71,80 +78,101 @@
</div>
</React.Fragment>;
content = <React.Fragment>
- <Table hover>
- <tbody>
- <tr>
- <td>Archive</td>
- <td>{archive.name}</td>
- </tr>
- <tr>
- <td>Start - end</td>
- <td>{archive.start} - {archive.end} (Duration: {humanSeconds(archive.duration)})</td>
- </tr>
- <tr>
- <td>Id</td>
- <td>{archive.id}</td>
- </tr>
- <tr>
- <td>Stats</td>
- <td>
- <table className="inline">
- <tbody>
- <tr>
- <td>Compressed size</td>
- <td>{humanFileSize(archive.stats.compressed_size)}</td>
- </tr>
- <tr>
- <td>Deduplicated size</td>
- <td>{humanFileSize(archive.stats.deduplicated_size)}</td>
- </tr>
- <tr>
- <td>Original size</td>
- <td>{humanFileSize(archive.stats.original_size)}</td>
- </tr>
- <tr>
- <td>Nfiles</td>
- <td>{Number(archive.stats.nfiles).toLocaleString()}</td>
- </tr>
- </tbody>
- </table>
- </td>
- </tr>
- <tr>
- <td>Comment</td>
- <td>{archive.comment}</td>
- </tr>
- <tr>
- <td>Command line</td>
- <td>{archive.commandLine.join(' ')}</td>
- </tr>
- <tr>
- <td>Host name</td>
- <td>{archive.hostname}</td>
- </tr>
- <tr>
- <td>User name</td>
- <td>{archive.username}</td>
- </tr>
- <tr>
- <td>Chunker params</td>
- <td>{archive.chunkerParams.join(', ')}</td>
- </tr>
- <tr>
- <td>Limits</td>
- <td>
- <table className="inline">
- <tbody>
- <tr>
- <td>max_archive_size</td>
- <td>{archive.limits.max_archive_size}</td>
- </tr>
- </tbody>
- </table>
- </td>
- </tr>
- </tbody>
- </Table>
+ <Nav tabs>
+ <NavLink
+ className={classNames({active: this.state.activeTab === '1'})}
+ onClick={this.toggleTab('1')}
+ >
+ Information
+ </NavLink>
+ <NavLink
+ className={classNames({active: this.state.activeTab === '2'})}
+ onClick={this.toggleTab('2')}
+ >
+ File list
+ </NavLink>
+ </Nav>
+ <TabContent activeTab={this.state.activeTab}>
+ <TabPane tabId={'1'}>
+ <Table hover>
+ <tbody>
+ <tr>
+ <td>Archive</td>
+ <td>{archive.name}</td>
+ </tr>
+ <tr>
+ <td>Start - end</td>
+ <td>{archive.start} - {archive.end} (Duration: {humanSeconds(archive.duration)})</td>
+ </tr>
+ <tr>
+ <td>Id</td>
+ <td>{archive.id}</td>
+ </tr>
+ <tr>
+ <td>Stats</td>
+ <td>
+ <table className="inline">
+ <tbody>
+ <tr>
+ <td>Compressed size</td>
+ <td>{humanFileSize(archive.stats.compressed_size)}</td>
+ </tr>
+ <tr>
+ <td>Deduplicated size</td>
+ <td>{humanFileSize(archive.stats.deduplicated_size)}</td>
+ </tr>
+ <tr>
+ <td>Original size</td>
+ <td>{humanFileSize(archive.stats.original_size)}</td>
+ </tr>
+ <tr>
+ <td>Nfiles</td>
+ <td>{Number(archive.stats.nfiles).toLocaleString()}</td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ <tr>
+ <td>Comment</td>
+ <td>{archive.comment}</td>
+ </tr>
+ <tr>
+ <td>Command line</td>
+ <td>{archive.commandLine.join(' ')}</td>
+ </tr>
+ <tr>
+ <td>Host name</td>
+ <td>{archive.hostname}</td>
+ </tr>
+ <tr>
+ <td>User name</td>
+ <td>{archive.username}</td>
+ </tr>
+ <tr>
+ <td>Chunker params</td>
+ <td>{archive.chunkerParams.join(', ')}</td>
+ </tr>
+ <tr>
+ <td>Limits</td>
+ <td>
+ <table className="inline">
+ <tbody>
+ <tr>
+ <td>max_archive_size</td>
+ <td>{archive.limits.max_archive_size}</td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </tbody>
+ </Table>
+ </TabPane>
+ <TabPane tabId={'2'}>
+ Hurzel
+ </TabPane>
+ </TabContent>
</React.Fragment>;
}
--
Gitblit v1.10.0