- Fixed byte representation

- Added a darker background for the theme "dark" - Added stripes back to the tables - Moved css files in src/css - Removed the Themeselector as it now implemented in PreferencesView
kopia · May 8, 2023 · 7f0cba6 · 7f0cba6
1 parent f7b80d7
commit 7f0cba6
Show file tree

Hide file tree

Showing 14 changed files with 119 additions and 123 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,6 +1,6 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
-import './Theme.css';
-import './App.css';
+import './css/Theme.css';
+import './css/App.css';
 import axios from 'axios';
 import { React, Component } from 'react';
 import { Navbar, Nav, Container } from 'react-bootstrap';
@@ -15,7 +15,7 @@ import { TaskDetails } from './TaskDetails';
 import { TasksTable } from './TasksTable';
 import { NewSnapshot } from './NewSnapshot';
 import { PolicyEditorPage } from './PolicyEditorPage';
-import { Preferences } from './Preferences';
+import { PreferencesView } from './PreferencesView';
 import { AppContext } from './contexts/AppContext';
 import { UIPreferenceProvider } from './contexts/UIPreferencesContext';
 
@@ -129,7 +129,7 @@ export default class App extends Component {
                 <Route path="/tasks/:tid" component={TaskDetails} />
                 <Route path="/tasks" component={TasksTable} />
                 <Route path="/repo" component={RepoStatus} />
-                <Route path="/preferences" component={Preferences} />
+                <Route path="/preferences" component={PreferencesView} />
                 <Route exact path="/">
                   <Redirect to="/repo" />
                 </Route>

diff --git a/src/DirectoryItems.jsx b/src/DirectoryItems.jsx
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { Link } from "react-router-dom";
 import MyTable from './Table';
 import { objectLink, rfc3339TimestampForDisplay, sizeWithFailures } from './uiutil';
+import { UIPreferencesContext } from './contexts/UIPreferencesContext';
 
 function objectName(name, typeID) {
     if (typeID === "d") {
@@ -33,6 +34,7 @@ function directoryLinkOrDownload(x) {
 
 export class DirectoryItems extends Component {
     render() {
+        const { bytesStringBase2 } = this.context;
         const columns = [{
             id: "name",
             Header: 'Name',
@@ -49,7 +51,7 @@ export class DirectoryItems extends Component {
             accessor: x => sizeInfo(x),
             Header: "Size",
             width: 100,
-            Cell: x => sizeWithFailures(x.cell.value, x.row.original.summ),
+            Cell: x => sizeWithFailures(x.cell.value, x.row.original.summ, bytesStringBase2),
         }, {
             id: "files",
             accessor: "summ.files",
@@ -65,3 +67,4 @@ export class DirectoryItems extends Component {
         return <MyTable data={this.props.items} columns={columns} />;
     }
 }
+DirectoryItems.contextType = UIPreferencesContext
diff --git a/src/EstimateResults.jsx b/src/EstimateResults.jsx
@@ -8,6 +8,7 @@ import Spinner from 'react-bootstrap/esm/Spinner';
 import Form from 'react-bootstrap/Form';
 import { TaskLogs } from './TaskLogs';
 import { cancelTask, redirect, sizeDisplayName } from './uiutil';
+import { UIPreferencesContext } from './contexts/UIPreferencesContext';
 
 export class EstimateResults extends Component {
     constructor() {
@@ -87,6 +88,7 @@ export class EstimateResults extends Component {
 
     render() {
         const { task, isLoading, error } = this.state;
+        const { bytesStringBase2 } = this.context
         if (error) {
             return <p>{error.message}</p>;
         }
@@ -97,20 +99,21 @@ export class EstimateResults extends Component {
 
         return <>
             {task.counters && <Form.Text className="estimateResults">
-                {this.taskStatusDescription(task)} Bytes: <b>{sizeDisplayName(task.counters["Bytes"]?.value)}</b> (<b>{sizeDisplayName(task.counters["Excluded Bytes"]?.value)}</b> excluded)
+                {this.taskStatusDescription(task)} Bytes: <b>{sizeDisplayName(task.counters["Bytes"]?.value, bytesStringBase2)}</b> (<b>{sizeDisplayName(task.counters["Excluded Bytes"]?.value, bytesStringBase2)}</b> excluded)
                 Files: <b>{task.counters["Files"]?.value}</b> (<b>{task.counters["Excluded Files"]?.value}</b> excluded)
                 Directories: <b>{task.counters["Directories"]?.value}</b> (<b>{task.counters["Excluded Directories"]?.value}</b> excluded)
                 Errors: <b>{task.counters["Errors"]?.value}</b> (<b>{task.counters["Ignored Errors"]?.value}</b> ignored)
-                </Form.Text>
+            </Form.Text>
             }
-                    {task.status === "RUNNING" && <>
-                            &nbsp;<Button size="sm" variant="light" onClick={() => cancelTask(task.id)} ><FontAwesomeIcon icon={faStopCircle} color="red" /> Cancel </Button>
-                        </>}
-                    {this.state.showLog ? <>
-                        <Button size="sm" variant="light" onClick={() => this.setState({ showLog: false })}><FontAwesomeIcon icon={faChevronCircleUp} /> Hide Log</Button>
-                        <TaskLogs taskID={this.taskID(this.props)} />
-                    </> : <Button size="sm" variant="light" onClick={() => this.setState({ showLog: true })}><FontAwesomeIcon icon={faChevronCircleDown} /> Show Log</Button>}
+            {task.status === "RUNNING" && <>
+                &nbsp;<Button size="sm" variant="light" onClick={() => cancelTask(task.id)} ><FontAwesomeIcon icon={faStopCircle} color="red" /> Cancel </Button>
+            </>}
+            {this.state.showLog ? <>
+                <Button size="sm" variant="light" onClick={() => this.setState({ showLog: false })}><FontAwesomeIcon icon={faChevronCircleUp} /> Hide Log</Button>
+                <TaskLogs taskID={this.taskID(this.props)} />
+            </> : <Button size="sm" variant="light" onClick={() => this.setState({ showLog: true })}><FontAwesomeIcon icon={faChevronCircleDown} /> Show Log</Button>}
         </>
             ;
     }
 }
+EstimateResults.contextType = UIPreferencesContext
diff --git a/src/Preferences.jsx b/src/Preferences.jsx
diff --git a/src/PreferencesView.jsx b/src/PreferencesView.jsx
@@ -0,0 +1,43 @@
+import { Component } from 'react';
+import { UIPreferencesContext } from './contexts/UIPreferencesContext';
+
+export class PreferencesView extends Component {
+    constructor() {
+        super();
+    }
+
+    render() {
+        const { pageSize, theme, bytesStringBase2, setByteStringBase, setTheme } = this.context;
+        return <>
+            <form>
+                <div className='form-group'>
+                    <label className='label-description' id='themeLabel'>Theme</label>
+                    <select className="select_theme, form-select form-select-sm" value={theme} onChange={e => setTheme(e.target.value)}>
+                        <option value="light">light</option>
+                        <option value="dark">dark</option>
+                        <option value="pastel">pastel</option>
+                        <option value="ocean">ocean</option>
+                    </select>
+                    <small hmtlfor='themeLabel' id='themeHelp' className='form-text text-muted'>The current active theme</small>
+                </div>
+                <br />
+                <div className='form-group'>
+                    <label className='label-description'>Byte representation</label>
+                    <select className="form-select form-select-sm" id='bytesBaseInput' value={bytesStringBase2} onChange={e => setByteStringBase(e.target.value)}>
+                        <option value="true">Base-2 (KiB, MiB, GiB, TiB)</option>
+                        <option value="false">Base-10 (KB, MB, GB, TB)</option>
+                    </select>
+                    <small hmtlfor='bytesBaseInput' id='bytesHelp' className='form-text text-muted'>Specifies the representation of bytes</small>
+                </div>
+                <br />
+                <div className='form-group'>
+                    <label className='label-description'>Page size</label>
+                    <input className='form-control form-control-sm' id='pageSizeInput'
+                        type='text' placeholder='Page size' value={pageSize} disabled={true} />
+                    <small hmtlfor="pageSizeInput" id='pageSizeHelp' className='form-text text-muted'>Specifies the pagination size in tables</small>
+                </div>
+            </form>
+        </>
+    }
+}
+PreferencesView.contextType = UIPreferencesContext
diff --git a/src/SnapshotsTable.jsx b/src/SnapshotsTable.jsx
@@ -13,6 +13,7 @@ import { faSync, faThumbtack } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import Modal from 'react-bootstrap/Modal';
 import { faFileAlt } from '@fortawesome/free-regular-svg-icons';
+import { UIPreferencesContext } from './contexts/UIPreferencesContext';
 
 function pillVariant(tag) {
     if (tag.startsWith("latest-")) {
@@ -314,6 +315,7 @@ export class SnapshotsTable extends Component {
 
     render() {
         let { snapshots, unfilteredCount, uniqueCount, isLoading, error } = this.state;
+        const { bytesStringBase2 } = this.context
         if (error) {
             return <p>{error.message}</p>;
         }
@@ -362,7 +364,7 @@ export class SnapshotsTable extends Component {
             Header: 'Size',
             accessor: 'summary.size',
             width: 100,
-            Cell: x => sizeWithFailures(x.cell.value, x.row.original.summary),
+            Cell: x => sizeWithFailures(x.cell.value, x.row.original.summary, bytesStringBase2),
         }, {
             Header: 'Files',
             accessor: 'summary.files',
@@ -502,3 +504,4 @@ export class SnapshotsTable extends Component {
         </>;
     }
 }
+SnapshotsTable.contextType = UIPreferencesContext
diff --git a/src/SourcesTable.jsx b/src/SourcesTable.jsx
@@ -13,6 +13,7 @@ import { Link } from 'react-router-dom';
 import { handleChange } from './forms';
 import MyTable from './Table';
 import { CLIEquivalent, compare, errorAlert, ownerName, policyEditorURL, redirect, sizeDisplayName, sizeWithFailures, sourceQueryStringParams } from './uiutil';
+import { UIPreferencesContext } from './contexts/UIPreferencesContext';
 
 const localSnapshots = "Local Snapshots"
 const allSnapshots = "All Snapshots"
@@ -88,15 +89,15 @@ export class SourcesTable extends Component {
         });
     }
 
-    statusCell(x, parent) {
+    statusCell(x, parent, bytesStringBase2) {
         switch (x.cell.value) {
             case "IDLE":
             case "PAUSED":
                 return <>
                     <Button data-testid="edit-policy" as={Link} to={policyEditorURL(x.row.original.source)} variant="primary" size="sm">Policy</Button>
                     <Button data-testid="snapshot-now" variant="success" size="sm" onClick={() => {
                         parent.startSnapshot(x.row.original.source);
-                        }}>Snapshot Now
+                    }}>Snapshot Now
                     </Button>
                 </>;
 
@@ -111,15 +112,15 @@ export class SourcesTable extends Component {
                 let title = "";
                 let totals = "";
                 if (u) {
-                    title = " hashed " + u.hashedFiles + " files (" + sizeDisplayName(u.hashedBytes) + ")\n" +
-                        " cached " + u.cachedFiles + " files (" + sizeDisplayName(u.cachedBytes) + ")\n" +
+                    title = " hashed " + u.hashedFiles + " files (" + sizeDisplayName(u.hashedBytes, bytesStringBase2) + ")\n" +
+                        " cached " + u.cachedFiles + " files (" + sizeDisplayName(u.cachedBytes, bytesStringBase2) + ")\n" +
                         " dir " + u.directory;
 
                     const totalBytes = u.hashedBytes + u.cachedBytes;
 
-                    totals = sizeDisplayName(totalBytes);
+                    totals = sizeDisplayName(totalBytes, bytesStringBase2);
                     if (u.estimatedBytes) {
-                        totals += "/" + sizeDisplayName(u.estimatedBytes);
+                        totals += "/" + sizeDisplayName(u.estimatedBytes, bytesStringBase2);
 
                         const percent = Math.round(totalBytes * 1000.0 / u.estimatedBytes) / 10.0;
                         if (percent <= 100) {
@@ -178,6 +179,7 @@ export class SourcesTable extends Component {
 
     render() {
         let { sources, isLoading, error } = this.state;
+        const { bytesStringBase2 } = this.context
         if (error) {
             return <p>{error.message}</p>;
         }
@@ -234,7 +236,7 @@ export class SourcesTable extends Component {
             accessor: x => x.lastSnapshot ? x.lastSnapshot.stats.totalSize : 0,
             Cell: x => sizeWithFailures(
                 x.cell.value,
-                x.row.original.lastSnapshot && x.row.original.lastSnapshot.rootEntry ? x.row.original.lastSnapshot.rootEntry.summ : null),
+                x.row.original.lastSnapshot && x.row.original.lastSnapshot.rootEntry ? x.row.original.lastSnapshot.rootEntry.summ : null, bytesStringBase2),
         }, {
             id: 'lastSnapshotTime',
             Header: 'Last Snapshot',
@@ -252,7 +254,7 @@ export class SourcesTable extends Component {
             Header: '',
             width: 300,
             accessor: x => x.status,
-            Cell: x => this.statusCell(x, this),
+            Cell: x => this.statusCell(x, this, bytesStringBase2),
         }]
 
         return <>
@@ -290,3 +292,4 @@ export class SourcesTable extends Component {
         </>;
     }
 }
+SourcesTable.contextType = UIPreferencesContext
diff --git a/src/TaskDetails.jsx b/src/TaskDetails.jsx
@@ -12,6 +12,7 @@ import Table from 'react-bootstrap/Table';
 import Spinner from 'react-bootstrap/Spinner';
 import { TaskLogs } from './TaskLogs';
 import { cancelTask, formatDuration, GoBackButton, redirect, sizeDisplayName } from './uiutil';
+import { UIPreferencesContext } from './contexts/UIPreferencesContext';
 
 export class TaskDetails extends Component {
     constructor() {
@@ -157,6 +158,7 @@ export class TaskDetails extends Component {
 
     render() {
         const { task, isLoading, error } = this.state;
+        const { bytesStringBase2 } = this.context
         if (error) {
             return <p>{error.message}</p>;
         }
@@ -192,7 +194,7 @@ export class TaskDetails extends Component {
                             </tr>
                         </thead>
                         <tbody>
-                            {this.sortedBadges(task.counters)}
+                            {this.sortedBadges(task.counters, bytesStringBase2)}
                         </tbody>
                     </Table>
                 </Col>
@@ -221,3 +223,4 @@ export class TaskDetails extends Component {
             ;
     }
 }
+TaskDetails.contextType = UIPreferencesContext
diff --git a/src/TaskLogs.jsx b/src/TaskLogs.jsx
@@ -82,7 +82,7 @@ export class TaskLogs extends Component {
 
     formatLogParams(entry) {
         // if there are any properties other than `msg, ts, level, mod` output them as JSON.
-        let {msg, ts, level, mod, ...parametersOnly} = entry;
+        let { msg, ts, level, mod, ...parametersOnly } = entry;
 
         const p = JSON.stringify(parametersOnly);
         if (p !== "{}") {
@@ -111,11 +111,11 @@ export class TaskLogs extends Component {
         if (logs) {
             return <div className="logs-table"><Table size="sm" bordered hover>
                 <tbody>
-                    {logs.map((v,ndx) => <tr key={ndx + '-' + v.ts} className={'loglevel-' + v.level}>
+                    {logs.map((v, ndx) => <tr key={ndx + '-' + v.ts} className={'loglevel-' + v.level}>
                         <td className="elide" title={this.fullLogTime(v.ts)}>{this.formatLogTime(v.ts)} {v.msg} {this.formatLogParams(v)}</td></tr>)}
                 </tbody>
             </Table>
-            <div ref={this.messagesEndRef} />
+                <div ref={this.messagesEndRef} />
             </div>;
         }
 

diff --git a/src/ThemeSelector.tsx b/src/ThemeSelector.tsx