Replaced moment with date-fns etc

.vscode/tasks.json

@@ -6,7 +6,7 @@
     {
       "type": "npm",
       "script": "start",
-      "problemMatcher": ["$ts-loader-1", "$ts-loader-2"]
+      "problemMatcher": ["$ts-loader-1", "$ts-loader-2", "$tsc"]
     }
   ]
 }

package.json

@@ -15,7 +15,7 @@
     "test": "jest",
     "lint": "tslint --project .",
     "build": "parcel build src/index.html",
-    "start": "ts-node devProxy.ts"
+    "start": "parcel -o src/index.html"
   },
   "author": {
     "name": "Erik Dalén",
@@ -26,16 +26,14 @@
     "url": "https://github.com/dalen/puppetexplorer.git"
   },
   "dependencies": {
-    "bootstrap": "4.0.0-beta.2",
+    "bootstrap": "^4.0.0",
     "bootswatch": "^4.0.0-beta.3",
     "bs-fetch": "^0.2.0",
-    "bs-moment": "^0.2.1",
     "classnames": "^2.2.5",
+    "date-fns": "^1.29.0",
     "font-awesome": "^4.7.0",
     "immutable": "^4.0.0-rc.9",
     "maybe.ts": "^0.1.0",
-    "moment": "^2.17.0",
-    "moment-timezone": "^0.5.11",
     "node-puppetdbquery": "^1.1.1",
     "object-dig": "^0.1.1",
     "object-hash": "^1.1.8",
@@ -44,15 +42,15 @@
     "qs": "^6.4.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "react-fontawesome": "^1.6.1",
-    "react-moment": "^0.7.0",
+    "react-icons": "^2.2.7",
+    "react-popper": "^0.8.0",
     "react-redux": "^5.0.4",
     "react-router": "^4.1.2",
     "react-router-dom": "^4.1.2",
     "react-transition-group": "^2.2.1",
-    "reactstrap": "^5.0.0-alpha.4",
+    "reactstrap": "^5.0.0-beta",
     "reason-react": "^0.3.1",
-    "recharts": "^1.0.0-beta.7",
+    "recharts": "^1.0.0-beta.10",
     "redux": "^3.7.2",
     "redux-loop": "^4.1.0",
     "result.ts": "^0.3.1",
@@ -67,7 +65,9 @@
     "@types/qs": "^6.5.1",
     "@types/react": "^16.0.33",
     "@types/react-dom": "^16.0.3",
+    "@types/react-fa": "^4.1.3",
     "@types/react-fontawesome": "^1.6.1",
+    "@types/react-icons": "^2.2.4",
     "@types/react-router-dom": "^4.2.0",
     "@types/reactstrap": "^5.0.3",
     "@types/recharts": "^1.0.8",
@@ -81,17 +81,18 @@
     "npm2rpm": "^2.3.0",
     "open": "^0.0.5",
     "parcel-bundler": "^1.5.1",
+    "parcel-plugin-typescript": "^0.5.3",
     "prettier": "^1.8.2",
     "protractor": "^5.1.2",
     "ts-jest": "^22.0.0",
     "ts-node": "^4.1.0",
     "tslint": "^5.8.0",
     "tslint-config-airbnb": "^5.5.0",
-    "tslint-config-prettier": "^1.6.0",
+    "tslint-config-prettier": "^1.7.0",
     "tslint-immutable": "^4.5.0",
     "tslint-plugin-prettier": "^1.3.0",
     "tslint-react": "^3.4.0",
-    "typescript": "^2.7.0-rc"
+    "typescript": "^2.7.1"
   },
   "prettier": {
     "singleQuote": true,

src/Config.ts

@@ -23,7 +23,7 @@ export type Config = {
 
 export const defaults = (): Config => {
   return {
-    serverUrl: '/api',
+    serverUrl: 'http://puppetdb.puppetexplorer.io/',
     nodeFacts: [
       'operatingsystem',
       'operatingsystemrelease',

src/index.html

@@ -9,7 +9,6 @@
   <base href="/">
 
   <!-- Style sheets-->
-  <link rel="stylesheet" type="text/css" href="../node_modules/font-awesome/css/font-awesome.min.css">
   <link rel="stylesheet" type="text/css" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
   <link rel="stylesheet" type="text/css" href="style.css">
 
@@ -20,23 +19,6 @@
   <div id="root"></div>
 
   <script src="main.tsx" type="text/javascript"></script>
-  <script>
-    // Google Analytics settings
-    GA_TRACKING_ID = 'UA-XXXXXXXX-YY';
-    GA_DOMAIN = 'auto';
-  </script>
-
-  <script>
-    (function (i, s, o, g, r, a, m) {
-      i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
-        (i[r].q = i[r].q || []).push(arguments)
-      }, i[r].l = 1 * new Date(); a = s.createElement(o),
-        m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
-    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
-
-    ga('create', GA_TRACKING_ID, GA_DOMAIN);
-    ga('send', 'pageview');
-  </script>
 </body>
 
 </html>

src/modules/dashboard/components/DashBoardMetric.tsx

@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import { Card, CardBody, CardTitle, CardText } from 'reactstrap';
-import * as Icon from 'react-fontawesome';
+import { FaRefresh } from 'react-icons/lib/fa';
 import * as Maybe from 'maybe.ts';
 
 import * as PuppetDB from '../../../PuppetDB';
@@ -48,7 +48,7 @@ export default class DashBoardMetric extends React.Component<Props, State> {
 
   render(): JSX.Element {
     const children = Maybe.toValue(
-      <Icon name="refresh" className="spin" />,
+      <FaRefresh className="spin" />,
       Maybe.map(
         val => (
           <span>

src/modules/events/components/EventListItem.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import * as Icon from 'react-fontawesome';
+import { FaCaretDown, FaCaretRight } from 'react-icons/lib/fa';
 import { Collapse, Badge } from 'reactstrap';
-import Moment from 'react-moment';
 import { Link } from 'react-router-dom';
+import * as date from 'date-fns';
 
 import * as PuppetDB from '../../../PuppetDB';
 
@@ -66,10 +66,11 @@ export default class EventListItem extends React.Component<Props, State> {
       <tr>
         {this.props.showNode && <td>{event.certname}</td>}
         <td>
-          <Icon
-            name={this.state.show ? 'triangle-bottom' : 'triangle-right'}
-            onClick={this.toggle}
-          />
+          {this.state.show ? (
+            <FaCaretDown onClick={this.toggle} />
+          ) : (
+            <FaCaretRight onClick={this.toggle} />
+          )}
           {event.resource_type}
           <wbr />[{event.resource_title}]
           <Collapse isOpen={this.state.show}>
@@ -95,7 +96,7 @@ export default class EventListItem extends React.Component<Props, State> {
                 <dt>Timestamp:</dt>
                 <dd>
                   <span title={event.timestamp}>
-                    <Moment format="LLL">{event.timestamp}</Moment>
+                    {date.parse(event.timestamp).toLocaleString()}
                   </span>
                 </dd>
                 {event.report && (

src/modules/events/components/EventsContainer.tsx

@@ -11,7 +11,8 @@ import {
   Label,
   Input,
 } from 'reactstrap';
-import * as moment from 'moment';
+import * as dateFns from 'date-fns';
+
 import * as qs from 'qs';
 
 import { updateSearch } from '../../../util';
@@ -30,7 +31,7 @@ type Props = {
 
 const changeDate = (history: History, which: string, value: string) => {
   updateSearch(history, {
-    [which]: moment(value).format('YYYY-MM-DD'),
+    [which]: dateFns.format(dateFns.parse(value), 'YYYY-MM-DD'),
   });
 };
 
@@ -45,20 +46,14 @@ const dateRangeEventQuery = (
       ? [
           '>=',
           'timestamp',
-          moment
-            .utc(dateFrom)
-            .startOf('day')
-            .toISOString(),
+          dateFns.startOfDay(dateFns.parse(dateFrom)).toISOString(),
         ]
       : null,
     dateTo
       ? [
           '<=',
           'timestamp',
-          moment
-            .utc(dateTo)
-            .endOf('day')
-            .toISOString(),
+          dateFns.endOfDay(dateFns.parse(dateFrom)).toISOString(),
         ]
       : null,
   );
@@ -68,9 +63,9 @@ const dateRangeEventQuery = (
 const getDate = (search: string, which: string): string => {
   const searchParsed = qs.parse(search);
   if (typeof searchParsed[which] === 'string') {
-    return moment.utc(searchParsed[which]).format('YYYY-MM-DD');
+    return dateFns.parse(searchParsed[which]).toLocaleDateString();
   }
-  return moment().format('YYYY-MM-DD');
+  return new Date().toLocaleDateString();
 };
 
 export default (props: Props) => {

src/modules/facts/components/FactListItem.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ListGroupItem } from 'reactstrap';
-import * as Icon from 'react-fontawesome';
+import { FaBarChart, FaCaretRight, FaCaretDown } from 'react-icons/lib/fa';
 import { OrderedSet } from 'immutable';
 
 import * as PuppetDB from '../../../PuppetDB';
@@ -50,7 +50,7 @@ export default class FactListItem extends React.Component<Props, State> {
       return (
         <ListGroupItem onClick={this.toggleChart} active={this.isActive()}>
           {this.indent()}
-          <Icon name="stats" /> {PuppetDB.FactPath.name(fact)}
+          <FaBarChart /> {PuppetDB.FactPath.name(fact)}
         </ListGroupItem>
       );
     }
@@ -61,7 +61,7 @@ export default class FactListItem extends React.Component<Props, State> {
           onClick={this.toggle}
         >
           {this.indent()}
-          <Icon name={this.state.expanded ? 'collapse-up' : 'expand'} />
+          {this.state.expanded ? <FaCaretDown /> : <FaCaretRight />}
           {PuppetDB.FactPath.name(fact)}
         </ListGroupItem>
         {this.state.expanded &&

src/modules/menubar/components/MenuBar.tsx

@@ -1,6 +1,6 @@
 // @flow
 import * as React from 'react';
-import * as Icon from 'react-fontawesome';
+import { FaDashboard, FaList, FaCalendar, FaTags } from 'react-icons/lib/fa';
 import { Navbar, Nav, NavItem } from 'reactstrap';
 
 import RouterNavLink from '../../../components/RouterNavLink';
@@ -10,22 +10,22 @@ export default (): JSX.Element => (
     <Nav navbar>
       <NavItem>
         <RouterNavLink exact to="/">
-          <Icon name="dashboard" /> Dashboard
+          <FaDashboard /> Dashboard
         </RouterNavLink>
       </NavItem>
       <NavItem>
         <RouterNavLink exact to="/nodes">
-          <Icon name="list" /> Nodes
+          <FaList /> Nodes
         </RouterNavLink>
       </NavItem>
       <NavItem>
         <RouterNavLink exact to="/events">
-          <Icon name="calendar" /> Events
+          <FaCalendar /> Events
         </RouterNavLink>
       </NavItem>
       <NavItem>
         <RouterNavLink exact to="/facts">
-          <Icon name="tags" /> Facts
+          <FaTags /> Facts
         </RouterNavLink>
       </NavItem>
     </Nav>

src/modules/node_detail/components/ReportListItem.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Moment from 'react-moment';
+import * as date from 'date-fns';
 import { Link } from 'react-router-dom';
 import * as Maybe from 'maybe.ts';
 
@@ -12,9 +12,7 @@ export default (props: { readonly report: PuppetDB.Report }) => (
     <td>
       <Link to={`/report/${props.report.hash}/events`}>
         <span title={props.report.end_time}>
-          <Moment fromNow ago>
-            {props.report.end_time}
-          </Moment>
+          {date.distanceInWordsToNow(date.parse(props.report.end_time))} ago
         </span>
       </Link>
     </td>

src/modules/node_list/components/NodeListItem.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-import * as Icon from 'react-fontawesome';
-import Moment from 'react-moment';
+import { FaExclamationTriangle } from 'react-icons/lib/fa';
+import * as date from 'date-fns';
 import * as Maybe from 'maybe.ts';
 
 import { metricValue, statusIcon } from '../../reports/index';
@@ -55,11 +55,12 @@ export default class NodeListItem extends React.Component<Props, State> {
           </Link>
         </td>
         <td title={this.props.node.catalog_timestamp}>
-          <Icon name="warning-sign" className="text-warning" />
+          <FaExclamationTriangle className="text-warning" />
           <span title={this.props.node.report_timestamp}>
-            <Moment fromNow ago>
-              {this.props.node.report_timestamp}
-            </Moment>
+            {date.distanceInWordsToNow(
+              date.parse(this.props.node.report_timestamp),
+            )}{' '}
+            ago
           </span>
         </td>
         <td className="text-center">

src/modules/reports/components/LogListItem.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Badge } from 'reactstrap';
-import Moment from 'react-moment';
+import * as date from 'date-fns';
 
 import * as PuppetDB from '../../../PuppetDB';
 
@@ -31,17 +31,17 @@ const color = (status: string): string => {
 };
 
 const message = (msg: string): JSX.Element => {
-  if (/\r|\n/.exec(msg)) {
+  if (/\r|\n/.exec(msg) != null) {
     return <pre>{msg}</pre>;
   }
-  return <p>message</p>;
+  return <p>{msg}</p>;
 };
 
 export default ({ log }: { readonly log: PuppetDB.Log }) => (
   <tr>
     <td>
-      <span title={log.time}>
-        <Moment format="LLL">{log.time}</Moment>
+      <span style={{ whiteSpace: 'nowrap' }} title={log.time}>
+        {date.parse(log.time).toLocaleTimeString()}
       </span>
     </td>
     <td>