Track log items by UUID instead of ID

webpack/logs/__tests__/index_test.tsx

@@ -5,12 +5,14 @@ jest.mock("react-redux", () => ({
 import * as React from "react";
 import { mount } from "enzyme";
 import { Logs, LogsFilterMenu } from "../index";
-import { Log } from "../../interfaces";
 import { ToolTips } from "../../constants";
+import { TaggedLog, SpecialStatus } from "../../resources/tagged_resources";
+import { Log } from "../../interfaces";
+import { generateUuid } from "../../resources/util";
 
 describe("<Logs />", () => {
-  function fakeLogs(): Log[] {
-    return [{
+  function fakeLogs(): TaggedLog[] {
+    const logs: Log[] = [{
       id: 1,
       created_at: -1,
       message: "Fake log message 1",
@@ -28,6 +30,14 @@ describe("<Logs />", () => {
       },
       channels: []
     }];
+    return logs.map((body: Log): TaggedLog => {
+      return {
+        kind: "Log",
+        uuid: generateUuid(body.id, "Log"),
+        specialStatus: SpecialStatus.SAVED,
+        body
+      };
+    });
   }
 
   it("renders", () => {

webpack/logs/index.tsx

@@ -3,12 +3,12 @@ import * as moment from "moment";
 import { connect } from "react-redux";
 import { Col, Row, Page, ToolTip } from "../ui";
 import { mapStateToProps } from "./state_to_props";
-import { Log } from "../interfaces";
 import { t } from "i18next";
 import { Popover, Position } from "@blueprintjs/core";
 import * as _ from "lodash";
 import { LogsTableProps, LogsState, LogsFilterMenuProps, LogsProps } from "./interfaces";
 import { ToolTips } from "../constants";
+import { TaggedLog } from "../resources/tagged_resources";
 
 export const formatLogTime = (created_at: number) =>
   moment.unix(created_at).local().format("MMM D, h:mma");
@@ -24,21 +24,22 @@ const LogsTable = (props: LogsTableProps) => {
       </tr>
     </thead>
     <tbody>
-      {props.logs.map((log: Log) => {
-        const isFiltered = log.message.toLowerCase().includes("filtered");
+      {props.logs.map((log: TaggedLog) => {
+        const isFiltered = log.body.message.toLowerCase().includes("filtered");
         if (!isFiltered) { return LogsRow(log, props.state); }
       })}
     </tbody>
   </table>;
 };
 
-const LogsRow = (log: Log, state: LogsState) => {
+const LogsRow = (tlog: TaggedLog, state: LogsState) => {
+  const log = tlog.body;
   const time = formatLogTime(log.created_at);
   const type = (log.meta || {}).type;
   const filtered = state[type as keyof LogsState];
   const displayLog = _.isUndefined(filtered) || filtered;
   return displayLog ?
-    <tr key={log.id}>
+    <tr key={tlog.uuid}>
       <td>
         <div className={`saucer ${type}`} />
         {_.startCase(type)}

webpack/logs/interfaces.ts

@@ -1,7 +1,7 @@
-import { Log } from "../interfaces";
+import { TaggedLog } from "../resources/tagged_resources";
 
 export interface LogsProps {
-  logs: Log[]
+  logs: TaggedLog[]
 }
 
 export interface Filters {
@@ -19,7 +19,7 @@ export interface LogsState extends Filters {
 }
 
 export interface LogsTableProps {
-  logs: Log[];
+  logs: TaggedLog[];
   state: LogsState;
 }
 

webpack/logs/state_to_props.ts

@@ -7,8 +7,7 @@ export function mapStateToProps(props: Everything): LogsProps {
 
   return {
     logs: _(selectAllLogs(props.resources.index))
-      .map(x => x.body)
-      .sortBy("created_at")
+      .sortBy("body.created_at")
       .reverse()
       .value()
   };