From 5275ba80b6ac6c3a38494279ad4ff4d5b421b9c2 Mon Sep 17 00:00:00 2001
From: Kai Reinhard <K.Reinhard@micromata.de>
Date: Thu, 20 Dec 2018 22:51:01 +0000
Subject: [PATCH] Shows now differences of files much more user friendly.
---
borgbutler-webapp/src/components/views/archives/FileListEntry.jsx | 98 ++++++++++++++++++++++++++++++++++++++----------
borgbutler-webapp/src/components/views/archives/FileListTable.jsx | 5 --
borgbutler-core/src/main/java/de/micromata/borgbutler/json/borg/BorgFilesystemItem.java | 6 +-
3 files changed, 80 insertions(+), 29 deletions(-)
diff --git a/borgbutler-core/src/main/java/de/micromata/borgbutler/json/borg/BorgFilesystemItem.java b/borgbutler-core/src/main/java/de/micromata/borgbutler/json/borg/BorgFilesystemItem.java
index b751326..72ab6bb 100644
--- a/borgbutler-core/src/main/java/de/micromata/borgbutler/json/borg/BorgFilesystemItem.java
+++ b/borgbutler-core/src/main/java/de/micromata/borgbutler/json/borg/BorgFilesystemItem.java
@@ -154,13 +154,13 @@
}
StringBuilder sb = new StringBuilder();
appendDiff(sb, "type", this.type, diffItem.type);
- appendDiff(sb, "mode", this.mode, diffItem.mode);
+ //appendDiff(sb, "mode", this.mode, diffItem.mode); // Done by frontend (jsx)
appendDiff(sb, "user", this.user, diffItem.user);
appendDiff(sb, "group", this.group, diffItem.group);
appendDiff(sb, "uid", this.uid, diffItem.uid);
appendDiff(sb, "gid", this.gid, diffItem.gid);
- appendDiff(sb, "mtime", this.mtime, diffItem.mtime);
- appendDiff(sb, "size", this.size, diffItem.size);
+ //appendDiff(sb, "mtime", this.mtime, diffItem.mtime); // Done by frontend (jsx)
+ //appendDiff(sb, "size", this.size, diffItem.size); // Done by frontend (jsx)
if (sb.length() > 0) {
diffStatus = DiffStatus.MODIFIED;
this.differences = sb.toString();
diff --git a/borgbutler-webapp/src/components/views/archives/FileListEntry.jsx b/borgbutler-webapp/src/components/views/archives/FileListEntry.jsx
index 9b9b391..5f7f9cd 100644
--- a/borgbutler-webapp/src/components/views/archives/FileListEntry.jsx
+++ b/borgbutler-webapp/src/components/views/archives/FileListEntry.jsx
@@ -1,10 +1,10 @@
import React from 'react';
import PropTypes from 'prop-types';
import Highlight from 'react-highlighter';
+import {Button, UncontrolledTooltip} from 'reactstrap';
import {IconCheck, IconDownload} from '../../general/IconComponents';
import {getResponseHeaderFilename, getRestServiceUrl, humanFileSize} from '../../../utilities/global';
import fileDownload from 'js-file-download';
-import {Button} from 'reactstrap';
class FileListEntry extends React.Component {
@@ -41,42 +41,98 @@
}
render = () => {
+ const entry = this.props.entry;
let downloadArchiveId = this.props.archiveId;
- let displayPath = this.props.entry.displayPath;
+ let displayPath = entry.displayPath;
let pathCss = 'tt';
- let diffCol = undefined;
- if (this.props.entry.diffStatus === 'NEW') {
+
+ let pathId = undefined;
+ let pathTooltip = undefined;
+ let pathtooltipText = undefined;
+
+ let sizeCss = 'tt';
+ let sizeTooltip = undefined;
+ let sizeId = undefined;
+
+ let modeCss = 'tt';
+ let modeTooltip = undefined;
+ let modeId = undefined;
+
+ let mtimeCss = 'tt';
+ let mtimeTooltip = undefined;
+ let mtimeId = undefined;
+ if (entry.diffStatus === 'NEW') {
pathCss = 'tt file-new';
- diffCol = <td className={'tt'}>NEW</td>;
- } else if (this.props.entry.diffStatus === 'REMOVED') {
+ pathtooltipText = 'NEW';
+ } else if (entry.diffStatus === 'REMOVED') {
pathCss = 'tt file-removed';
// Download removed files from other archive.
downloadArchiveId = this.props.diffArchiveId;
- diffCol = <td className={'tt'}>REMOVED</td>;
- } else if (this.props.entry.diffStatus === 'MODIFIED') {
- pathCss = 'tt file-modified';
- diffCol = <td className={'tt'}>{this.props.entry.differences}</td>;
+ pathtooltipText = 'REMOVED';
+ } else if (entry.diffStatus === 'MODIFIED') {
+ if (entry.differences) {
+ pathCss = 'tt file-modified';
+ pathtooltipText = entry.differences;
+ }
+ if (entry.size !== entry.diffItem.size) {
+ sizeCss = 'tt file-modified';
+ sizeId = `size-${entry.fileNumber}`;
+ sizeTooltip =
+ <UncontrolledTooltip target={sizeId}>
+ Was: {humanFileSize(entry.diffItem.size, true, true)}
+ </UncontrolledTooltip>;
+ }
+ if (entry.mode !== entry.diffItem.mode) {
+ modeCss = 'tt file-modified';
+ modeId = `mode-${entry.fileNumber}`;
+ modeTooltip =
+ <UncontrolledTooltip target={modeId}>
+ Was: {entry.diffItem.mode}
+ </UncontrolledTooltip>;
+ }
+ if (entry.mtime !== entry.diffItem.mtime) {
+ mtimeCss = 'tt file-modified';
+ mtimeId = `mtime-${entry.fileNumber}`;
+ mtimeTooltip =
+ <UncontrolledTooltip target={mtimeId}>
+ Was: {entry.diffItem.mtime}
+ </UncontrolledTooltip>;
+ }
+ }
+ if (pathtooltipText) {
+ pathId = `path-${entry.fileNumber}`;
+ pathTooltip =
+ <UncontrolledTooltip target={pathId}>
+ {pathtooltipText}
+ </UncontrolledTooltip>;
}
let path;
- if (this.props.mode === 'tree' && this.props.entry.type === 'd') {
- path = <Button color={'link'} onClick={() => this.props.changeCurrentDirectory(this.props.entry.path)}><Highlight
- search={this.props.search}>{displayPath}</Highlight></Button>;
+ if (this.props.mode === 'tree' && entry.type === 'd') {
+ path = <Button color={'link'} onClick={() => this.props.changeCurrentDirectory(entry.path)}><Highlight
+ search={this.props.search} id={pathId}>{displayPath}</Highlight></Button>;
} else {
- path = <Highlight search={this.props.search}>{displayPath}</Highlight>;
+ path = <Highlight search={this.props.search} id={pathId}>{displayPath}</Highlight>;
}
let icon = this.state.downloaded ? <IconCheck/> :
- <div className={'btn'} onClick={() => this.download(downloadArchiveId, this.props.entry.fileNumber)}>
- <IconDownload/></div>;
+ <div className={'btn'} onClick={() => this.download(downloadArchiveId, entry.fileNumber)}>
+ <IconDownload/></div>;
return (
<tr>
- <td className={pathCss}>{path}</td>
+ <td className={pathCss}>
+ {path}{pathTooltip}
+ </td>
<td className={'tt'} style={{textAlign: 'center'}}>
{icon}
</td>
- <td className={'tt'}>{humanFileSize(this.props.entry.size, true, true)}</td>
- <td className={'tt'}>{this.props.entry.mode}</td>
- <td className={'tt'}>{this.props.entry.mtime}</td>
- {diffCol}
+ <td className={sizeCss} style={{textAlign: 'center'}}>
+ <span id={sizeId}>{humanFileSize(entry.size, true, true)}</span>{sizeTooltip}
+ </td>
+ <td className={modeCss}>
+ <span id={modeId}>{entry.mode}</span>{modeTooltip}
+ </td>
+ <td className={mtimeCss}>
+ <span id={mtimeId}>{entry.mtime}</span>{mtimeTooltip}
+ </td>
</tr>
);
}
diff --git a/borgbutler-webapp/src/components/views/archives/FileListTable.jsx b/borgbutler-webapp/src/components/views/archives/FileListTable.jsx
index a34d5c4..8b03adc 100644
--- a/borgbutler-webapp/src/components/views/archives/FileListTable.jsx
+++ b/borgbutler-webapp/src/components/views/archives/FileListTable.jsx
@@ -5,10 +5,6 @@
function FileListTable({archiveId, diffArchiveId, entries, search, mode, changeCurrentDirectory}) {
const lowercaseSearch = search.split(' ')[0].toLowerCase();
- let diffCol = undefined;
- if (diffArchiveId) {
- diffCol = <th>Modification</th>;
- }
return (
<Table striped bordered hover size={'sm'} responsive>
<thead>
@@ -18,7 +14,6 @@
<th>Size</th>
<th>Mode</th>
<th>Modified time</th>
- {diffCol}
</tr>
</thead>
<tbody>
--
Gitblit v1.10.0