New: Project Aphrodite

frontend/src/System/Status/About/About.css

@@ -0,0 +1,5 @@
+.descriptionList {
+  composes: descriptionList from 'Components/DescriptionList/DescriptionList.css';
+
+  margin-bottom: 10px;
+}

frontend/src/System/Status/About/About.js

@@ -0,0 +1,88 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import titleCase from 'Utilities/String/titleCase';
+import FieldSet from 'Components/FieldSet';
+import DescriptionList from 'Components/DescriptionList/DescriptionList';
+import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
+import StartTime from './StartTime';
+import styles from './About.css';
+
+class About extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      version,
+      isMonoRuntime,
+      runtimeVersion,
+      appData,
+      startupPath,
+      mode,
+      startTime,
+      timeFormat,
+      longDateFormat
+    } = this.props;
+
+    return (
+      <FieldSet legend="About">
+        <DescriptionList className={styles.descriptionList}>
+          <DescriptionListItem
+            title="Version"
+            data={version}
+          />
+
+          {
+            isMonoRuntime &&
+              <DescriptionListItem
+                title="Mono Version"
+                data={runtimeVersion}
+              />
+          }
+
+          <DescriptionListItem
+            title="AppData directory"
+            data={appData}
+          />
+
+          <DescriptionListItem
+            title="Startup directory"
+            data={startupPath}
+          />
+
+          <DescriptionListItem
+            title="Mode"
+            data={titleCase(mode)}
+          />
+
+          <DescriptionListItem
+            title="Uptime"
+            data={
+              <StartTime
+                startTime={startTime}
+                timeFormat={timeFormat}
+                longDateFormat={longDateFormat}
+              />
+            }
+          />
+        </DescriptionList>
+      </FieldSet>
+    );
+  }
+
+}
+
+About.propTypes = {
+  version: PropTypes.string.isRequired,
+  isMonoRuntime: PropTypes.bool.isRequired,
+  runtimeVersion: PropTypes.string.isRequired,
+  appData: PropTypes.string.isRequired,
+  startupPath: PropTypes.string.isRequired,
+  mode: PropTypes.string.isRequired,
+  startTime: PropTypes.string.isRequired,
+  timeFormat: PropTypes.string.isRequired,
+  longDateFormat: PropTypes.string.isRequired
+};
+
+export default About;

frontend/src/System/Status/About/AboutConnector.js

@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { fetchStatus } from 'Store/Actions/systemActions';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import About from './About';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.system.status,
+    createUISettingsSelector(),
+    (status, uiSettings) => {
+      return {
+        ...status.item,
+        timeFormat: uiSettings.timeFormat,
+        longDateFormat: uiSettings.longDateFormat
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  fetchStatus
+};
+
+class AboutConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    this.props.fetchStatus();
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <About
+        {...this.props}
+      />
+    );
+  }
+}
+
+AboutConnector.propTypes = {
+  fetchStatus: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(AboutConnector);

frontend/src/System/Status/About/StartTime.js

@@ -0,0 +1,93 @@
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import formatDateTime from 'Utilities/Date/formatDateTime';
+import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
+
+function getUptime(startTime) {
+  return formatTimeSpan(moment().diff(startTime));
+}
+
+class StartTime extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    const {
+      startTime,
+      timeFormat,
+      longDateFormat
+    } = props;
+
+    this._timeoutId = null;
+
+    this.state = {
+      uptime: getUptime(startTime),
+      startTime: formatDateTime(startTime, longDateFormat, timeFormat, { includeSeconds: true })
+    };
+  }
+
+  componentDidMount() {
+    this._timeoutId = setTimeout(this.onTimeout, 1000);
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      startTime,
+      timeFormat,
+      longDateFormat
+    } = this.props;
+
+    if (
+      startTime !== prevProps.startTime ||
+      timeFormat !== prevProps.timeFormat ||
+      longDateFormat !== prevProps.longDateFormat
+    ) {
+      this.setState({
+        uptime: getUptime(startTime),
+        startTime: formatDateTime(startTime, longDateFormat, timeFormat, { includeSeconds: true })
+      });
+    }
+  }
+
+  componentWillUnmount() {
+    if (this._timeoutId) {
+      this._timeoutId = clearTimeout(this._timeoutId);
+    }
+  }
+
+  //
+  // Listeners
+
+  onTimeout = () => {
+    this.setState({ uptime: getUptime(this.props.startTime) });
+    this._timeoutId = setTimeout(this.onTimeout, 1000);
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      uptime,
+      startTime
+    } = this.state;
+
+    return (
+      <span title={startTime}>
+        {uptime}
+      </span>
+    );
+  }
+}
+
+StartTime.propTypes = {
+  startTime: PropTypes.string.isRequired,
+  timeFormat: PropTypes.string.isRequired,
+  longDateFormat: PropTypes.string.isRequired
+};
+
+export default StartTime;