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

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

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;