New: Server Side UI Filtering, Error Boundaries (#501)

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>

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

@@ -4,6 +4,7 @@ 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 {
@@ -19,7 +20,10 @@ class About extends Component {
       migrationVersion,
       appData,
       startupPath,
-      mode
+      mode,
+      startTime,
+      timeFormat,
+      longDateFormat
     } = this.props;
 
     return (
@@ -57,6 +61,17 @@ class About extends Component {
             title="Mode"
             data={titleCase(mode)}
           />
+
+          <DescriptionListItem
+            title="Uptime"
+            data={
+              <StartTime
+                startTime={startTime}
+                timeFormat={timeFormat}
+                longDateFormat={longDateFormat}
+              />
+            }
+          />
         </DescriptionList>
       </FieldSet>
     );
@@ -65,13 +80,16 @@ class About extends Component {
 }
 
 About.propTypes = {
-  version: PropTypes.string,
-  isMonoRuntime: PropTypes.bool,
-  runtimeVersion: PropTypes.string,
-  migrationVersion: PropTypes.number,
-  appData: PropTypes.string,
-  startupPath: PropTypes.string,
-  mode: PropTypes.string
+  version: PropTypes.string.isRequired,
+  isMonoRuntime: PropTypes.bool.isRequired,
+  runtimeVersion: PropTypes.string.isRequired,
+  migrationVersion: PropTypes.number.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

@@ -3,14 +3,18 @@ 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,
-    (status) => {
+    createUISettingsSelector(),
+    (status, uiSettings) => {
       return {
-        ...status.item
+        ...status.item,
+        timeFormat: uiSettings.timeFormat,
+        longDateFormat: uiSettings.longDateFormat
       };
     }
   );

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;