New: Project Aphrodite

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;

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

@@ -0,0 +1,90 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import combinePath from 'Utilities/String/combinePath';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import { executeCommand } from 'Store/Actions/commandActions';
+import { fetchLogFiles } from 'Store/Actions/systemActions';
+import * as commandNames from 'Commands/commandNames';
+import LogFiles from './LogFiles';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.system.logFiles,
+    (state) => state.system.status.item,
+    createCommandExecutingSelector(commandNames.DELETE_LOG_FILES),
+    (logFiles, status, deleteFilesExecuting) => {
+      const {
+        isFetching,
+        items
+      } = logFiles;
+
+      const {
+        appData,
+        isWindows
+      } = status;
+
+      return {
+        isFetching,
+        items,
+        deleteFilesExecuting,
+        currentLogView: 'Log Files',
+        location: combinePath(isWindows, appData, ['logs'])
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  fetchLogFiles,
+  executeCommand
+};
+
+class LogFilesConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    this.props.fetchLogFiles();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.deleteFilesExecuting && !this.props.deleteFilesExecuting) {
+      this.props.fetchLogFiles();
+    }
+  }
+
+  //
+  // Listeners
+
+  onRefreshPress = () => {
+    this.props.fetchLogFiles();
+  }
+
+  onDeleteFilesPress = () => {
+    this.props.executeCommand({ name: commandNames.DELETE_LOG_FILES });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <LogFiles
+        onRefreshPress={this.onRefreshPress}
+        onDeleteFilesPress={this.onDeleteFilesPress}
+        {...this.props}
+      />
+    );
+  }
+}
+
+LogFilesConnector.propTypes = {
+  deleteFilesExecuting: PropTypes.bool.isRequired,
+  fetchLogFiles: PropTypes.func.isRequired,
+  executeCommand: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(LogFilesConnector);

frontend/src/System/Logs/Files/LogFilesTableRow.css

@@ -0,0 +1,5 @@
+.download {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 100px;
+}

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

@@ -0,0 +1,50 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Link from 'Components/Link/Link';
+import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import TableRow from 'Components/Table/TableRow';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import styles from './LogFilesTableRow.css';
+
+class LogFilesTableRow extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      filename,
+      lastWriteTime,
+      downloadUrl
+    } = this.props;
+
+    return (
+      <TableRow>
+        <TableRowCell>{filename}</TableRowCell>
+
+        <RelativeDateCellConnector
+          date={lastWriteTime}
+        />
+
+        <TableRowCell className={styles.download}>
+          <Link
+            to={downloadUrl}
+            target="_blank"
+            noRouter={true}
+          >
+            Download
+          </Link>
+        </TableRowCell>
+      </TableRow>
+    );
+  }
+
+}
+
+LogFilesTableRow.propTypes = {
+  filename: PropTypes.string.isRequired,
+  lastWriteTime: PropTypes.string.isRequired,
+  downloadUrl: PropTypes.string.isRequired
+};
+
+export default LogFilesTableRow;

frontend/src/System/Logs/Logs.js

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import { Route } from 'react-router-dom';
+import Switch from 'Components/Router/Switch';
+import LogFilesConnector from './Files/LogFilesConnector';
+import UpdateLogFilesConnector from './Updates/UpdateLogFilesConnector';
+
+class Logs extends Component {
+
+  //
+  // Render
+
+  render() {
+    return (
+      <Switch>
+        <Route
+          exact={true}
+          path="/system/logs/files"
+          component={LogFilesConnector}
+        />
+
+        <Route
+          path="/system/logs/files/update"
+          component={UpdateLogFilesConnector}
+        />
+      </Switch>
+    );
+  }
+}
+
+export default Logs;

frontend/src/System/Logs/LogsNavMenu.js

@@ -0,0 +1,71 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Menu from 'Components/Menu/Menu';
+import MenuButton from 'Components/Menu/MenuButton';
+import MenuContent from 'Components/Menu/MenuContent';
+import MenuItem from 'Components/Menu/MenuItem';
+
+class LogsNavMenu extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isMenuOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onMenuButtonPress = () => {
+    this.setState({ isMenuOpen: !this.state.isMenuOpen });
+  }
+
+  onMenuItemPress = () => {
+    this.setState({ isMenuOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      current
+    } = this.props;
+
+    return (
+      <Menu>
+        <MenuButton
+          onPress={this.onMenuButtonPress}
+        >
+          {current}
+        </MenuButton>
+        <MenuContent
+          isOpen={this.state.isMenuOpen}
+        >
+          <MenuItem
+            to={'/system/logs/files'}
+          >
+            Log Files
+          </MenuItem>
+
+          <MenuItem
+            to={'/system/logs/files/update'}
+          >
+            Updater Log Files
+          </MenuItem>
+        </MenuContent>
+      </Menu>
+    );
+  }
+}
+
+LogsNavMenu.propTypes = {
+  current: PropTypes.string.isRequired
+};
+
+export default LogsNavMenu;

frontend/src/System/Logs/Updates/UpdateLogFilesConnector.js

@@ -0,0 +1,90 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import combinePath from 'Utilities/String/combinePath';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import { executeCommand } from 'Store/Actions/commandActions';
+import { fetchUpdateLogFiles } from 'Store/Actions/systemActions';
+import * as commandNames from 'Commands/commandNames';
+import LogFiles from '../Files/LogFiles';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.system.updateLogFiles,
+    (state) => state.system.status.item,
+    createCommandExecutingSelector(commandNames.DELETE_UPDATE_LOG_FILES),
+    (updateLogFiles, status, deleteFilesExecuting) => {
+      const {
+        isFetching,
+        items
+      } = updateLogFiles;
+
+      const {
+        appData,
+        isWindows
+      } = status;
+
+      return {
+        isFetching,
+        items,
+        deleteFilesExecuting,
+        currentLogView: 'Updater Log Files',
+        location: combinePath(isWindows, appData, ['UpdateLogs'])
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  fetchUpdateLogFiles,
+  executeCommand
+};
+
+class UpdateLogFilesConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    this.props.fetchUpdateLogFiles();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.deleteFilesExecuting && !this.props.deleteFilesExecuting) {
+      this.props.fetchUpdateLogFiles();
+    }
+  }
+
+  //
+  // Listeners
+
+  onRefreshPress = () => {
+    this.props.fetchUpdateLogFiles();
+  }
+
+  onDeleteFilesPress = () => {
+    this.props.executeCommand({ name: commandNames.DELETE_UPDATE_LOG_FILES });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <LogFiles
+        onRefreshPress={this.onRefreshPress}
+        onDeleteFilesPress={this.onDeleteFilesPress}
+        {...this.props}
+      />
+    );
+  }
+}
+
+UpdateLogFilesConnector.propTypes = {
+  deleteFilesExecuting: PropTypes.bool.isRequired,
+  fetchUpdateLogFiles: PropTypes.func.isRequired,
+  executeCommand: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(UpdateLogFilesConnector);