From 5fb03f8022576dd391a26ede67c8cc6b85661d47 Mon Sep 17 00:00:00 2001
From: Kai Reinhard <K.Reinhard@micromata.de>
Date: Sat, 15 Dec 2018 06:59:12 +0000
Subject: [PATCH] ...
---
borgbutler-webapp/src/components/views/repos/RepoArchiveListView.jsx | 64 ++++++++++++
borgbutler-webapp/src/css/my-style.css | 221 +++++++++++++++++++++++---------------------
borgbutler-webapp/src/utilities/global.js | 5 +
3 files changed, 184 insertions(+), 106 deletions(-)
diff --git a/borgbutler-webapp/src/components/views/repos/RepoArchiveListView.jsx b/borgbutler-webapp/src/components/views/repos/RepoArchiveListView.jsx
index f81f360..160dd6f 100644
--- a/borgbutler-webapp/src/components/views/repos/RepoArchiveListView.jsx
+++ b/borgbutler-webapp/src/components/views/repos/RepoArchiveListView.jsx
@@ -1,6 +1,7 @@
import React from 'react'
+import {Table} from 'reactstrap';
import {PageHeader} from '../../general/BootstrapComponents';
-import {getRestServiceUrl} from '../../../utilities/global';
+import {getRestServiceUrl, humanFileSize} from '../../../utilities/global';
import ErrorAlert from '../../general/ErrorAlert';
import {IconRefresh} from "../../general/IconComponents";
@@ -66,6 +67,67 @@
>
<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>;
}
diff --git a/borgbutler-webapp/src/css/my-style.css b/borgbutler-webapp/src/css/my-style.css
index 80feb7f..f145066 100644
--- a/borgbutler-webapp/src/css/my-style.css
+++ b/borgbutler-webapp/src/css/my-style.css
@@ -1,147 +1,147 @@
body {
- color: #50555f;
+ color: #50555f;
}
a:hover {
- color: #47a7eb;
+ color: #47a7eb;
}
a.card-link:hover {
- color: #50555f !important;
+ color: #50555f !important;
}
/* Scaffolding */
.container {
- max-width: 1260px;
- margin-top: 100px;
+ max-width: 1260px;
+ margin-top: 100px;
}
div.main-view {
- min-height: calc(100vh - 140px);
+ min-height: calc(100vh - 140px);
}
/* Typo */
h2 {
- font-weight: bold;
- margin-bottom: 20px;
+ font-weight: bold;
+ margin-bottom: 20px;
}
h3 {
- font-weight: bold;
+ font-weight: bold;
}
h4 {
- font-size: 18px;
- font-weight: bold;
- margin-top: 20px;
- margin-bottom: 20px;
+ font-size: 18px;
+ font-weight: bold;
+ margin-top: 20px;
+ margin-bottom: 20px;
}
h5 {
- margin-top: 30px;
- margin-bottom: 10px;
+ margin-top: 30px;
+ margin-bottom: 10px;
}
/* Navbar */
.navbar.bg-light {
- background: white !important;
- //box-shadow: 0 0 10px rgba(0,0,0,.1);
- border-bottom: 1px solid rgba(0,0,0,.1);
- height: 60px;
+ background: white !important;
+/ / box-shadow: 0 0 10 px rgba(0, 0, 0, .1);
+ border-bottom: 1px solid rgba(0, 0, 0, .1);
+ height: 60px;
}
.navbar-brand {
- font-weight: bold;
+ font-weight: bold;
}
.navbar.navbar-light a.nav-link {
- color: #7c8495;
- font-size: 1rem;
- font-weight: bold;
+ color: #7c8495;
+ font-size: 1rem;
+ font-weight: bold;
}
.navbar a.nav-link.danger {
- color: #dc3545;
+ color: #dc3545;
}
.navbar.navbar-light a.nav-link.active {
- color: #47a7eb;
+ color: #47a7eb;
}
div.pageheader {
- font-weight: bold;
- font-size: 1.5rem;
- color: #414650;
- margin-bottom: 40px !important;
+ font-weight: bold;
+ font-size: 1.5rem;
+ color: #414650;
+ margin-bottom: 40px !important;
}
/* Forms */
.form-inline {
- margin-bottom: 30px;
+ margin-bottom: 30px;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
- outline: none !important;
- outline-width: 0 !important;
+ outline: none !important;
+ outline-width: 0 !important;
}
[contenteditable="true"]:focus {
- outline: none;
+ outline: none;
}
.text-truncate.editable-text-field-value:hover {
- color: #47a7eb;
+ color: #47a7eb;
}
.input-group > textarea {
- min-height: 40px;
+ min-height: 40px;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
- background: #7C8495;
+ background: #7C8495;
}
-input[name="search"]{
- margin-right: 5px;
+input[name="search"] {
+ margin-right: 5px;
}
.text-truncate.editable-text-field-value {
- padding: 5px 10px;
- background: #f5f6f8;
- border-radius: 3px;
- min-height: 34px;
+ padding: 5px 10px;
+ background: #f5f6f8;
+ border-radius: 3px;
+ min-height: 34px;
}
label.custom-control-label {
- min-height: 10px;
+ min-height: 10px;
}
/* Buttons */
.btn.btn-outline-primary {
- color: #47a7eb;
- background-color: #fff;
- border-color: #309ce8;
+ color: #47a7eb;
+ background-color: #fff;
+ border-color: #309ce8;
}
.btn.btn-outline-primary:hover {
- color: #fff;
- background-color: #47a7eb;
- border-color: #47a7eb;
+ color: #fff;
+ background-color: #47a7eb;
+ border-color: #47a7eb;
}
.input-group-append .btn {
- max-height: 40px;
- height: 40px
+ max-height: 40px;
+ height: 40px
}
.form-group label {
@@ -149,49 +149,49 @@
}
.btn + .btn {
- margin-left: 10px;
+ margin-left: 10px;
}
/* Tabs */
.nav.nav-tabs {
- margin-bottom: 25px;
+ margin-bottom: 25px;
}
.nav-tabs .nav-link,
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link.active {
- position: relative;
- top: 1px;
- border-bottom: none;
+ position: relative;
+ top: 1px;
+ border-bottom: none;
}
ul.nav-tabs .nav-link:hover {
- cursor: pointer;
- color: #47a7eb;
+ cursor: pointer;
+ color: #47a7eb;
}
.tab-pane.active {
- padding: 20px;
+ padding: 20px;
}
/* Tables */
.table-responsive > .table-bordered {
- font-size: 13px;
- margin-bottom: 50px;
+ font-size: 13px;
+ margin-bottom: 50px;
}
.table .btn-outline-primary.btn-sm {
- margin: 0 10px;
+ margin: 0 10px;
}
.table .btn.btn-link {
- padding-left: 0;
+ padding-left: 0;
}
.table thead th {
- vertical-align: middle;
+ vertical-align: middle;
}
@@ -199,61 +199,61 @@
.template.card {
- color: #50555F;
- max-width: 390px;
- min-width: 390px;
- margin-top: 10px;
- margin-bottom: 20px;
+ color: #50555F;
+ max-width: 390px;
+ min-width: 390px;
+ margin-top: 10px;
+ margin-bottom: 20px;
}
.template.card:hover {
- text-decoration: none;
- transform: scale(1.01);
- transition: 0.1s ease-in-out;
+ text-decoration: none;
+ transform: scale(1.01);
+ transition: 0.1s ease-in-out;
}
.template.card .card-header {
- font-weight: bold;
- color: #50555F;
+ font-weight: bold;
+ color: #50555F;
}
.template.card .card-body {
- padding: 0;
+ padding: 0;
}
.template.card .card-footer {
}
.card.border-secondary {
- border-color: #DEE2E6 !important;
+ border-color: #DEE2E6 !important;
}
code {
- padding: 10px;
- display: inline-block;
- border-radius: 3px;
- margin-top: 50px;
- background: #ef94941a;
+ padding: 10px;
+ display: inline-block;
+ border-radius: 3px;
+ margin-top: 50px;
+ background: #ef94941a;
}
code h3 {
- font-size: 16px;
- font-weight: bold;
+ font-size: 16px;
+ font-weight: bold;
}
div.refresh-button-right {
- cursor: pointer;
- color: #555;
- text-align: right;
- float: right;
+ cursor: pointer;
+ color: #555;
+ text-align: right;
+ float: right;
}
div.refresh-button-right + * {
- clear: both;
+ clear: both;
}
div.refresh-button-right:hover {
- color: #337ab7;
+ color: #337ab7;
}
/* Droparea */
@@ -305,49 +305,60 @@
#menuDropZone {
- border: 1px dashed #888;
- width: 34px;
- border-radius: 5px;
- margin-left: 10px;
+ border: 1px dashed #888;
+ width: 34px;
+ border-radius: 5px;
+ margin-left: 10px;
}
#menuDropZone.drop-area svg.fa-upload {
- width: 0.65em;
+ width: 0.65em;
}
div.drop-area span.info {
- padding: 5px;
+ padding: 5px;
}
.main-view div.drop-area span.info {
- padding: 15px 25px;
+ padding: 15px 25px;
}
/* Menu */
.collapse.show.navbar-collapse {
- background: #FFF;
- padding-bottom: 10px;
- width: 100%;
- z-index: 9000;
+ background: #FFF;
+ padding-bottom: 10px;
+ width: 100%;
+ z-index: 9000;
}
.navbar-toggler {
- margin-top: -17px;
+ margin-top: -17px;
}
.welcome-intro {
}
.welcome-enjoy {
- padding-top: 20px;
- font-weight: bold;
- font-style: italic;
+ padding-top: 20px;
+ font-weight: bold;
+ font-style: italic;
}
.welcome-documentation-link {
- padding-top: 20px;
+ padding-top: 20px;
}
+
+table.inline tbody td {
+ border-top: none;
+ padding-top: 0;
+ padding-left: 0;
+}
+
+td.align-right {
+ text-align: right;
+}
+
/* @media only screen and (max-width: 1050px) {
.navbar.navbar-light a.nav-link {
font-size: 0.8rem;
diff --git a/borgbutler-webapp/src/utilities/global.js b/borgbutler-webapp/src/utilities/global.js
index 0c50294..4faa037 100644
--- a/borgbutler-webapp/src/utilities/global.js
+++ b/borgbutler-webapp/src/utilities/global.js
@@ -41,6 +41,11 @@
//return date.toLocaleDateString("de-DE", options);
}
+export const humanFileSize = (size) => {
+ var i = Math.floor( Math.log(size) / Math.log(1024) );
+ return (size / Math.pow(1024, i) ).toLocaleString(undefined,{maximumFractionDigits: 2}) + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
+}
+
export const revisedRandId = () => Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);
/* Checks if a given array is definied and is not empty. */
--
Gitblit v1.10.0