Localize time for logs

webpack/__tests__/app_test.tsx

@@ -15,6 +15,7 @@ import { fakeUser } from "../__test_support__/fake_state/resources";
 describe("<App />: Controls Pop-Up", () => {
   function fakeProps(): AppProps {
     return {
+      timeOffset: 0, // Default to UTC
       dispatch: jest.fn(),
       loaded: [],
       logs: [],
@@ -61,7 +62,8 @@ describe.skip("<App />: Loading", () => {
       user: fakeUser(),
       bot: bot,
       consistent: true,
-      autoSyncEnabled: true
+      autoSyncEnabled: true,
+      timeOffset: 0
     };
     return p;
   }
@@ -95,7 +97,8 @@ describe("<App />: NavBar", () => {
       user: fakeUser(),
       bot: bot,
       consistent: true,
-      autoSyncEnabled: true
+      autoSyncEnabled: true,
+      timeOffset: 0
     };
   }
 

webpack/app.tsx

@@ -9,7 +9,7 @@ import { Everything, Log } from "./interfaces";
 import { LoadingPlant } from "./loading_plant";
 import { BotState } from "./devices/interfaces";
 import { ResourceName, TaggedUser } from "./resources/tagged_resources";
-import { selectAllLogs, maybeFetchUser } from "./resources/selectors";
+import { selectAllLogs, maybeFetchUser, maybeGetDevice } from "./resources/selectors";
 import { HotKeys } from "./hotkeys";
 import { ControlsPopup } from "./controls_popup";
 import { Content } from "./constants";
@@ -30,10 +30,13 @@ export interface AppProps {
   bot: BotState;
   consistent: boolean;
   autoSyncEnabled: boolean;
+  timeOffset: number;
 }
 
 function mapStateToProps(props: Everything): AppProps {
+  const dev = maybeGetDevice(props.resources.index);
   return {
+    timeOffset: dev ? dev.body.tz_offset_hrs : 0, // Default to UTC,
     dispatch: props.dispatch,
     user: maybeFetchUser(props.resources.index),
     bot: props.bot,
@@ -89,6 +92,7 @@ export class App extends React.Component<AppProps, {}> {
     return <div className="app">
       <HotKeys dispatch={this.props.dispatch} />
       <NavBar
+        timeOffset={this.props.timeOffset}
         consistent={this.props.consistent}
         user={this.props.user}
         bot={this.props.bot}

webpack/logs/components/logs_table.tsx

@@ -12,7 +12,7 @@ interface LogsRowProps {
 const LogsRow = ({ tlog, state, timeOffset }: LogsRowProps) => {
   const log = tlog.body;
   const { x, y, z, verbosity, type } = log.meta;
-  const time = formatLogTime(log.created_at);
+  const time = formatLogTime(log.created_at, timeOffset);
   return <tr key={tlog.uuid}>
     <td>
       <div className={`saucer ${type}`}>

webpack/logs/index.tsx

@@ -15,8 +15,8 @@ import { isUndefined } from "lodash";
 import { NumericSetting } from "../session_keys";
 import { catchErrors } from "../util";
 
-export const formatLogTime = (created_at: number) =>
-  moment.unix(created_at).local().format("MMM D, h:mma");
+export const formatLogTime = (created_at: number, timeoffset: number) =>
+  moment.unix(created_at).utcOffset(timeoffset).format("MMM D, h:mma");
 
 @connect(mapStateToProps)
 export class Logs extends React.Component<LogsProps, Partial<LogsState>> {

webpack/nav/__tests__/nav_index_test.tsx

@@ -11,6 +11,7 @@ describe("NavBar", () => {
   it("has correct parent classname", () => {
     const wrapper = shallow(
       <NavBar
+        timeOffset={0}
         consistent={true}
         logs={[log]}
         bot={bot}
@@ -24,6 +25,7 @@ describe("NavBar", () => {
 
   it("closes nav menu", () => {
     const wrapper = shallow(<NavBar
+      timeOffset={0}
       consistent={true}
       logs={[log]}
       bot={bot}

webpack/nav/__tests__/ticker_list_test.tsx

@@ -43,6 +43,7 @@ describe("<TickerList />", () => {
   it("shows log message and datetime", () => {
     const wrapper = mount(
       <TickerList
+        timeOffset={0}
         logs={[log]}
         tickerListOpen={false}
         toggle={jest.fn()} />
@@ -61,6 +62,7 @@ describe("<TickerList />", () => {
   it("shows empty log message", () => {
     const wrapper = mount(
       <TickerList
+        timeOffset={0}
         logs={[]}
         tickerListOpen={false}
         toggle={jest.fn()} />
@@ -73,6 +75,7 @@ describe("<TickerList />", () => {
   it("opens ticker", () => {
     const wrapper = mount(
       <TickerList
+        timeOffset={0}
         logs={[log, log]}
         tickerListOpen={true}
         toggle={jest.fn()} />
@@ -93,7 +96,7 @@ describe("<TickerList />", () => {
       .map(logType => mockStorj[logType + "Log"] = 0);
     log.meta.verbosity = 1;
     const wrapper = mount(<TickerList
-      logs={[log]} tickerListOpen={false} toggle={jest.fn()} />);
+      logs={[log]} tickerListOpen={false} toggle={jest.fn()} timeOffset={0} />);
     const labels = wrapper.find("label");
     expect(labels.length).toEqual(2);
     expect(labels.at(0).text())

webpack/nav/index.tsx

@@ -59,7 +59,7 @@ export class NavBar extends React.Component<NavBarProps, Partial<NavBarState>> {
 
     const { toggle, close } = this;
     const { mobileMenuOpen, tickerListOpen, accountMenuOpen } = this.state;
-    const { logs } = this.props;
+    const { logs, timeOffset } = this.props;
 
     return (
       <div className="nav-wrapper">
@@ -67,7 +67,7 @@ export class NavBar extends React.Component<NavBarProps, Partial<NavBarState>> {
           <Row>
             <Col xs={12}>
               <div>
-                <TickerList { ...{ logs, tickerListOpen, toggle } } />
+                <TickerList { ...{ logs, tickerListOpen, toggle, timeOffset } } />
                 <div className="nav-group">
                   <div className="nav-left">
                     <i

webpack/nav/interfaces.ts

@@ -18,6 +18,7 @@ export interface NavBarProps {
   user: TaggedUser | undefined;
   dispatch: Function;
   autoSyncEnabled: boolean;
+  timeOffset: number;
 }
 
 export interface NavBarState {
@@ -37,6 +38,7 @@ export interface TickerListProps {
   toggle: (property: keyof NavBarState) => ToggleEventHandler;
   logs: Log[]
   tickerListOpen: boolean;
+  timeOffset: number;
 }
 
 export interface NavLinksProps {

webpack/nav/ticker_list.tsx

@@ -45,8 +45,8 @@ const getfirstTickerLog = (logs: Log[]): Log => {
   }
 };
 
-const Ticker = (log: Log, index: number) => {
-  const time = formatLogTime(log.created_at);
+const Ticker = (log: Log, index: number, timeOffset: number) => {
+  const time = formatLogTime(log.created_at, timeOffset);
   const type = (log.meta || {}).type;
   return (
     // TODO: Should utilize log's `uuid` instead of index.
@@ -70,14 +70,14 @@ export let TickerList = (props: TickerListProps) => {
       className="ticker-list"
       onClick={props.toggle("tickerListOpen")} >
       <div className="first-ticker">
-        {Ticker(getfirstTickerLog(props.logs), -1)}
+        {Ticker(getfirstTickerLog(props.logs), -1, props.timeOffset)}
       </div>
       <Collapse isOpen={props.tickerListOpen}>
         {props
           .logs
           .filter((log, index) => index !== 0)
           .filter((log) => logFilter(log))
-          .map((log: Log, index: number) => Ticker(log, index))}
+          .map((log: Log, index: number) => Ticker(log, index, props.timeOffset))}
       </Collapse>
       <Collapse isOpen={props.tickerListOpen}>
         <Link to={"/app/logs"}>