diff --git a/client/app/components/DateInput.jsx b/client/app/components/DateInput.jsx
index ff7812ed8e..733c3b669c 100644
--- a/client/app/components/DateInput.jsx
+++ b/client/app/components/DateInput.jsx
@@ -1,9 +1,9 @@
-import moment from 'moment';
import React from 'react';
import PropTypes from 'prop-types';
import { react2angular } from 'react2angular';
import DatePicker from 'antd/lib/date-picker';
import { clientConfig } from '@/services/auth';
+import { Moment } from '@/components/proptypes';
export function DateInput({
value,
@@ -27,13 +27,7 @@ export function DateInput({
}
DateInput.propTypes = {
- value: (props, propName, componentName) => {
- const value = props[propName];
- if ((value !== null) && !moment.isMoment(value)) {
- return new Error('Prop `' + propName + '` supplied to `' + componentName +
- '` should be a Moment.js instance.');
- }
- },
+ value: Moment,
onSelect: PropTypes.func,
className: PropTypes.string,
};
diff --git a/client/app/components/DateRangeInput.jsx b/client/app/components/DateRangeInput.jsx
index d8ccef48f7..8dc2bd973f 100644
--- a/client/app/components/DateRangeInput.jsx
+++ b/client/app/components/DateRangeInput.jsx
@@ -1,10 +1,10 @@
-import moment from 'moment';
import { isArray } from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';
import { react2angular } from 'react2angular';
import DatePicker from 'antd/lib/date-picker';
import { clientConfig } from '@/services/auth';
+import { Moment } from '@/components/proptypes';
const { RangePicker } = DatePicker;
@@ -29,18 +29,7 @@ export function DateRangeInput({
}
DateRangeInput.propTypes = {
- value: (props, propName, componentName) => {
- const value = props[propName];
- if (
- (value !== null) && !(
- isArray(value) && (value.length === 2) &&
- moment.isMoment(value[0]) && moment.isMoment(value[1])
- )
- ) {
- return new Error('Prop `' + propName + '` supplied to `' + componentName +
- '` should be an array of two Moment.js instances.');
- }
- },
+ value: PropTypes.arrayOf(Moment),
onSelect: PropTypes.func,
className: PropTypes.string,
};
diff --git a/client/app/components/DateTimeInput.jsx b/client/app/components/DateTimeInput.jsx
index 92fb81f104..d51210813a 100644
--- a/client/app/components/DateTimeInput.jsx
+++ b/client/app/components/DateTimeInput.jsx
@@ -1,9 +1,9 @@
-import moment from 'moment';
import React from 'react';
import PropTypes from 'prop-types';
import { react2angular } from 'react2angular';
import DatePicker from 'antd/lib/date-picker';
import { clientConfig } from '@/services/auth';
+import { Moment } from '@/components/proptypes';
export function DateTimeInput({
value,
@@ -30,13 +30,7 @@ export function DateTimeInput({
}
DateTimeInput.propTypes = {
- value: (props, propName, componentName) => {
- const value = props[propName];
- if ((value !== null) && !moment.isMoment(value)) {
- return new Error('Prop `' + propName + '` supplied to `' + componentName +
- '` should be a Moment.js instance.');
- }
- },
+ value: Moment,
withSeconds: PropTypes.bool,
onSelect: PropTypes.func,
className: PropTypes.string,
diff --git a/client/app/components/DateTimeRangeInput.jsx b/client/app/components/DateTimeRangeInput.jsx
index 668ac9a23e..55e8ca7514 100644
--- a/client/app/components/DateTimeRangeInput.jsx
+++ b/client/app/components/DateTimeRangeInput.jsx
@@ -1,10 +1,10 @@
-import moment from 'moment';
import { isArray } from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';
import { react2angular } from 'react2angular';
import DatePicker from 'antd/lib/date-picker';
import { clientConfig } from '@/services/auth';
+import { Moment } from '@/components/proptypes';
const { RangePicker } = DatePicker;
@@ -32,18 +32,7 @@ export function DateTimeRangeInput({
}
DateTimeRangeInput.propTypes = {
- value: (props, propName, componentName) => {
- const value = props[propName];
- if (
- (value !== null) && !(
- isArray(value) && (value.length === 2) &&
- moment.isMoment(value[0]) && moment.isMoment(value[1])
- )
- ) {
- return new Error('Prop `' + propName + '` supplied to `' + componentName +
- '` should be an array of two Moment.js instances.');
- }
- },
+ value: PropTypes.arrayOf(Moment),
withSeconds: PropTypes.bool,
onSelect: PropTypes.func,
className: PropTypes.string,
diff --git a/client/app/components/TimeAgo.jsx b/client/app/components/TimeAgo.jsx
new file mode 100644
index 0000000000..2a3a55f55a
--- /dev/null
+++ b/client/app/components/TimeAgo.jsx
@@ -0,0 +1,98 @@
+import moment from 'moment';
+import { isNil } from 'lodash';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import { Moment } from '@/components/proptypes';
+import { clientConfig } from '@/services/auth';
+
+const autoUpdateList = new Set();
+
+function updateComponents() {
+ autoUpdateList.forEach(component => component.update());
+ setTimeout(updateComponents, 30 * 1000);
+}
+updateComponents();
+
+export class TimeAgo extends React.PureComponent {
+ static propTypes = {
+ // `date` and `placeholder` used in `getDerivedStateFromProps`
+ // eslint-disable-next-line react/no-unused-prop-types
+ date: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.number,
+ PropTypes.instanceOf(Date),
+ Moment,
+ ]),
+ // eslint-disable-next-line react/no-unused-prop-types
+ placeholder: PropTypes.string,
+ autoUpdate: PropTypes.bool,
+ };
+
+ static defaultProps = {
+ date: null,
+ placeholder: '',
+ autoUpdate: true,
+ };
+
+ static getDerivedStateFromProps({ date, placeholder }) {
+ // if `date` prop is not empty and a valid date/time - convert it to `moment`
+ date = !isNil(date) ? moment(date) : null;
+ date = date && date.isValid() ? date : null;
+
+ return {
+ value: date ? date.fromNow() : placeholder,
+ title: date ? date.format(clientConfig.dateTimeFormat) : '',
+ };
+ }
+
+ // Initial state, to get rid of React warning
+ state = {
+ title: null,
+ value: null,
+ };
+
+ componentDidMount() {
+ autoUpdateList.add(this);
+ this.update(true);
+ }
+
+ componentWillUnmount() {
+ autoUpdateList.delete(this);
+ }
+
+ update(force = false) {
+ if (force || this.props.autoUpdate) {
+ this.setState(this.constructor.getDerivedStateFromProps(this.props));
+ }
+ }
+
+ render() {
+ return {this.state.value};
+ }
+}
+
+export default function init(ngModule) {
+ ngModule.directive('amTimeAgo', () => ({
+ link($scope, element, attr) {
+ const modelName = attr.amTimeAgo;
+ $scope.$watch(modelName, (value) => {
+ ReactDOM.render(, element[0]);
+ });
+ },
+ }));
+
+ ngModule.component('rdTimeAgo', {
+ bindings: {
+ value: '=',
+ },
+ controller($scope, $element) {
+ $scope.$watch('$ctrl.value', () => {
+ // Initial render will occur here as well
+ ReactDOM.render(, $element[0]);
+ });
+ },
+ });
+}
+
+init.init = true;
diff --git a/client/app/components/proptypes.js b/client/app/components/proptypes.js
index 19b7f6c5aa..f35e89cc0e 100644
--- a/client/app/components/proptypes.js
+++ b/client/app/components/proptypes.js
@@ -1,4 +1,6 @@
import PropTypes from 'prop-types';
+import { wrap } from 'lodash';
+import moment from 'moment';
export const DataSource = PropTypes.shape({
syntax: PropTypes.string,
@@ -49,3 +51,15 @@ export const Action = PropTypes.shape({
export const AntdForm = PropTypes.shape({
validateFieldsAndScroll: PropTypes.func,
});
+
+function checkMoment(isRequired, props, propName, componentName) {
+ const value = props[propName];
+ const isRequiredValid = isRequired && (value !== null);
+ const isOptionalValid = !isRequired && ((value === null) || moment.isMoment(value));
+ if (!isRequiredValid && !isOptionalValid) {
+ return new Error('Prop `' + propName + '` supplied to `' + componentName + '` should be a Moment.js instance.');
+ }
+}
+
+export const Moment = wrap(false, checkMoment);
+Moment.isRequired = wrap(true, checkMoment);
diff --git a/client/app/components/rd-time-ago.js b/client/app/components/rd-time-ago.js
deleted file mode 100644
index de6c786278..0000000000
--- a/client/app/components/rd-time-ago.js
+++ /dev/null
@@ -1,17 +0,0 @@
-const RdTimeAgo = {
- bindings: {
- value: '=',
- },
- controller() {
- },
- template: '' +
- '' +
- '-' +
- '',
-};
-
-export default function init(ngModule) {
- ngModule.component('rdTimeAgo', RdTimeAgo);
-}
-
-init.init = true;
diff --git a/client/app/config/index.js b/client/app/config/index.js
index 2ce76b5e69..e1985c9742 100644
--- a/client/app/config/index.js
+++ b/client/app/config/index.js
@@ -16,7 +16,6 @@ import ngMessages from 'angular-messages';
import toastr from 'angular-toastr';
import ngUpload from 'angular-base64-upload';
import vsRepeat from 'angular-vs-repeat';
-import 'angular-moment';
import 'brace';
import 'angular-ui-ace';
import 'angular-resizable';
@@ -49,7 +48,6 @@ const requirements = [
uiBootstrap,
ngMessages,
uiSelect,
- 'angularMoment',
toastr,
'ui.ace',
ngUpload,
diff --git a/package-lock.json b/package-lock.json
index 0d806d44d3..5b01b9812e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -759,14 +759,6 @@
"resolved": "https://registry.npmjs.org/angular-messages/-/angular-messages-1.5.11.tgz",
"integrity": "sha1-6pnwFjWU/LCi23AbMDgzklDezJA="
},
- "angular-moment": {
- "version": "1.1.0",
- "resolved": "https://registry.npmjs.org/angular-moment/-/angular-moment-1.1.0.tgz",
- "integrity": "sha512-aWrKEfQRtkqhxx31RjPhmGMWuF77uPlIWRNOiJU3+Q3wzossBqzBlJOkagUGt3N5or6OJP5Pq83dIjH9HHhhng==",
- "requires": {
- "moment": ">=2.8.0 <3.0.0"
- }
- },
"angular-resizable": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/angular-resizable/-/angular-resizable-1.2.0.tgz",
@@ -3631,6 +3623,7 @@
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz",
"integrity": "sha1-k4NwpXtKUd6ix3wV1cX9+JUWQAk=",
"dev": true,
+ "optional": true,
"requires": {
"delayed-stream": "~1.0.0"
}
@@ -6796,7 +6789,8 @@
},
"ansi-regex": {
"version": "2.1.1",
- "bundled": true
+ "bundled": true,
+ "optional": true
},
"aproba": {
"version": "1.2.0",
@@ -6833,7 +6827,8 @@
},
"code-point-at": {
"version": "1.1.0",
- "bundled": true
+ "bundled": true,
+ "optional": true
},
"concat-map": {
"version": "0.0.1",
@@ -6842,7 +6837,8 @@
},
"console-control-strings": {
"version": "1.1.0",
- "bundled": true
+ "bundled": true,
+ "optional": true
},
"core-util-is": {
"version": "1.0.2",
@@ -6945,7 +6941,8 @@
},
"inherits": {
"version": "2.0.3",
- "bundled": true
+ "bundled": true,
+ "optional": true
},
"ini": {
"version": "1.3.5",
@@ -6955,6 +6952,7 @@
"is-fullwidth-code-point": {
"version": "1.0.0",
"bundled": true,
+ "optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -6974,11 +6972,13 @@
},
"minimist": {
"version": "0.0.8",
- "bundled": true
+ "bundled": true,
+ "optional": true
},
"minipass": {
"version": "2.2.4",
"bundled": true,
+ "optional": true,
"requires": {
"safe-buffer": "^5.1.1",
"yallist": "^3.0.0"
@@ -6995,6 +6995,7 @@
"mkdirp": {
"version": "0.5.1",
"bundled": true,
+ "optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -7078,6 +7079,7 @@
"once": {
"version": "1.4.0",
"bundled": true,
+ "optional": true,
"requires": {
"wrappy": "1"
}
@@ -7153,7 +7155,8 @@
},
"safe-buffer": {
"version": "5.1.1",
- "bundled": true
+ "bundled": true,
+ "optional": true
},
"safer-buffer": {
"version": "2.1.2",
@@ -7183,6 +7186,7 @@
"string-width": {
"version": "1.0.2",
"bundled": true,
+ "optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -7200,6 +7204,7 @@
"strip-ansi": {
"version": "3.0.1",
"bundled": true,
+ "optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@@ -7238,11 +7243,13 @@
},
"wrappy": {
"version": "1.0.2",
- "bundled": true
+ "bundled": true,
+ "optional": true
},
"yallist": {
"version": "3.0.2",
- "bundled": true
+ "bundled": true,
+ "optional": true
}
}
},
@@ -10696,6 +10703,7 @@
"resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
"integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=",
"dev": true,
+ "optional": true,
"requires": {
"hoek": "2.x.x"
}
@@ -10757,7 +10765,8 @@
"version": "2.16.3",
"resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
"integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=",
- "dev": true
+ "dev": true,
+ "optional": true
},
"http-signature": {
"version": "1.1.1",
diff --git a/package.json b/package.json
index 14fb2e7278..5bf25c9999 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,6 @@
"angular": "~1.5.8",
"angular-base64-upload": "^0.1.23",
"angular-messages": "~1.5.8",
- "angular-moment": "^1.1.0",
"angular-resizable": "^1.2.0",
"angular-resource": "~1.5.8",
"angular-route": "~1.5.8",