Initial Commit Rework

frontend/src/System/Logs/Files/LogFiles.js

@@ -0,0 +1,139 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { icons } from 'Helpers/Props';
+import Alert from 'Components/Alert';
+import Link from 'Components/Link/Link';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import Table from 'Components/Table/Table';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
+import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
+import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import TableBody from 'Components/Table/TableBody';
+import LogsNavMenu from '../LogsNavMenu';
+import LogFilesTableRow from './LogFilesTableRow';
+
+const columns = [
+  {
+    name: 'filename',
+    label: 'Filename',
+    isVisible: true
+  },
+  {
+    name: 'lastWriteTime',
+    label: 'Last Write Time',
+    isVisible: true
+  },
+  {
+    name: 'download',
+    isVisible: true
+  }
+];
+
+class LogFiles extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      isFetching,
+      items,
+      deleteFilesExecuting,
+      currentLogView,
+      location,
+      onRefreshPress,
+      onDeleteFilesPress,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <PageContent title="Log Files">
+        <PageToolbar>
+          <PageToolbarSection>
+            <LogsNavMenu current={currentLogView} />
+
+            <PageToolbarSeparator />
+
+            <PageToolbarButton
+              label="Refresh"
+              iconName={icons.REFRESH}
+              spinningName={icons.REFRESH}
+              isSpinning={isFetching}
+              onPress={onRefreshPress}
+            />
+
+            <PageToolbarButton
+              label="Clear"
+              iconName={icons.CLEAR}
+              isSpinning={deleteFilesExecuting}
+              onPress={onDeleteFilesPress}
+            />
+          </PageToolbarSection>
+        </PageToolbar>
+        <PageContentBodyConnector>
+          <Alert>
+            <div>
+              Log files are located in: {location}
+            </div>
+
+            {
+              currentLogView === 'Log Files' &&
+                <div>
+                  The log level defaults to 'Info' and can be changed in <Link to="/settings/general">General Settings</Link>
+                </div>
+            }
+          </Alert>
+
+          {
+            isFetching &&
+              <LoadingIndicator />
+          }
+
+          {
+            !isFetching && !!items.length &&
+              <div>
+                <Table
+                  columns={columns}
+                  {...otherProps}
+                >
+                  <TableBody>
+                    {
+                      items.map((item) => {
+                        return (
+                          <LogFilesTableRow
+                            key={item.id}
+                            {...item}
+                          />
+                        );
+                      })
+                    }
+                  </TableBody>
+                </Table>
+              </div>
+          }
+
+          {
+            !isFetching && !items.length &&
+              <div>No log files</div>
+          }
+        </PageContentBodyConnector>
+      </PageContent>
+    );
+  }
+
+}
+
+LogFiles.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  items: PropTypes.array.isRequired,
+  deleteFilesExecuting: PropTypes.bool.isRequired,
+  currentLogView: PropTypes.string.isRequired,
+  location: PropTypes.string.isRequired,
+  onRefreshPress: PropTypes.func.isRequired,
+  onDeleteFilesPress: PropTypes.func.isRequired
+};
+
+export default LogFiles;