From 1c087fae322a1b07bb7bd554ee10ff473c47c727 Mon Sep 17 00:00:00 2001
From: Fin Reinhard <fin.reinhard@icloud.com>
Date: Tue, 22 Jan 2019 20:51:03 +0000
Subject: [PATCH] Merge branch 'master' into feature/15-archive-view-url
---
borgbutler-webapp/src/components/views/repos/RepoArchiveListView.jsx | 202 ++++++++++++++++++++++++++++++-------------------
1 files changed, 123 insertions(+), 79 deletions(-)
diff --git a/borgbutler-webapp/src/components/views/repos/RepoArchiveListView.jsx b/borgbutler-webapp/src/components/views/repos/RepoArchiveListView.jsx
index 4fe43bc..12995e8 100644
--- a/borgbutler-webapp/src/components/views/repos/RepoArchiveListView.jsx
+++ b/borgbutler-webapp/src/components/views/repos/RepoArchiveListView.jsx
@@ -1,19 +1,22 @@
import React from 'react'
-import {Nav, NavLink, TabContent, Table, TabPane} from 'reactstrap';
-import { Link } from "react-router-dom";
+import {Badge, Nav, NavLink, TabContent, Table, TabPane} from 'reactstrap';
+import {Link} from "react-router-dom";
import classNames from 'classnames';
import {PageHeader} from '../../general/BootstrapComponents';
import {getRestServiceUrl, humanFileSize} from '../../../utilities/global';
import ErrorAlert from '../../general/ErrorAlert';
import {IconCheck, IconRefresh} from '../../general/IconComponents';
import JobMonitorPanel from '../jobs/JobMonitorPanel';
+import RepoConfigPanel from "./RepoConfigPanel";
class RepoArchiveListView extends React.Component {
state = {
id: this.props.match.params.id,
+ displayName: this.props.match.params.displayName,
isFetching: false,
activeTab: '1',
+ redirectOnError: true
};
componentDidMount = () => {
@@ -42,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 => () => {
@@ -51,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}
@@ -127,82 +159,92 @@
<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>
- </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>
- </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}
+ <Link to={'/repos'}> Repositories</Link> - {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>;
};
@@ -211,6 +253,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);
}
}
--
Gitblit v1.10.0