web: clear logs functionality (#4170)

New button in the resource bar to clear logs. On the all view,
this will clear logs for all resources. On an individual resource,
it will just clear that resource's logs.

Alerts for non-existent spans (i.e. because they've been removed)
will be ignored to prevent showing counts on the filters that won't
actually have any content.

internal/engine/configs/tiltfile_log_writer.go

@@ -24,5 +24,5 @@ func (w *tiltfileLogWriter) Write(level logger.Level, fields logger.Fields, p []
 }
 
 func SpanIDForLoadCount(loadCount int) logstore.SpanID {
-	return logstore.SpanID(fmt.Sprintf("tilfile:%d", loadCount))
+	return logstore.SpanID(fmt.Sprintf("tiltfile:%d", loadCount))
 }

web/src/AlertPane.test.tsx

@@ -6,6 +6,7 @@ import AlertPane from "./AlertPane"
 import LogStore from "./LogStore"
 import PathBuilder from "./PathBuilder"
 import { oneResourceUnrecognizedError } from "./testdata"
+import { appendLinesForManifestAndSpan } from "./testlogs"
 import { TriggerMode } from "./types"
 
 type Resource = Proto.webviewResource
@@ -205,12 +206,17 @@ it("renders warnings", () => {
       finishTime: ts,
       isCrashRebuild: true,
       warnings: ["Hi I'm a warning"],
+      spanId: "build:1",
     },
   ]
   if (!resource.k8sResourceInfo) throw new Error("missing k8s info")
   resource.k8sResourceInfo.podCreationTime = ts
   resource.k8sResourceInfo.podStatus = "ok"
 
+  appendLinesForManifestAndSpan(logStore, resource.name!, "build:1", [
+    "build 1",
+  ])
+
   let resources = [resource]
 
   const tree = renderer

web/src/ClearLogs.test.tsx

@@ -0,0 +1,65 @@
+import { mount } from "enzyme"
+import React from "react"
+import ClearLogs from "./ClearLogs"
+import { logLinesToString } from "./logs"
+import LogStore, { LogStoreProvider } from "./LogStore"
+import { oneResource } from "./testdata"
+import { appendLinesForManifestAndSpan } from "./testlogs"
+
+describe("ClearLogs", () => {
+  const createPopulatedLogStore = (): LogStore => {
+    const logStore = new LogStore()
+    appendLinesForManifestAndSpan(logStore, "", "", [
+      "global 1\n",
+      "global 2\n",
+    ])
+    appendLinesForManifestAndSpan(logStore, "vigoda", "build:m1:1", [
+      "m1:1 build line 1\n",
+    ])
+    appendLinesForManifestAndSpan(logStore, "vigoda", "pod:m1-abc123", [
+      "m1:1 runtime line 1\n",
+    ])
+    appendLinesForManifestAndSpan(logStore, "manifest2", "build:m2", [
+      "m2 build line 1\n",
+    ])
+    appendLinesForManifestAndSpan(logStore, "vigoda", "build:m1:2", [
+      "m1:2 build line 1\n",
+      "m1:2 build line 2\n",
+    ])
+    appendLinesForManifestAndSpan(logStore, "manifest2", "pod:m2-def456", [
+      "m2 runtime line 1\n",
+    ])
+    return logStore
+  }
+
+  it("clears all resources", () => {
+    const logStore = createPopulatedLogStore()
+    const root = mount(
+      <LogStoreProvider value={logStore}>
+        <ClearLogs />
+      </LogStoreProvider>
+    )
+    root.find(ClearLogs).simulate("click")
+    expect(logStore.spans).toEqual({})
+    expect(logStore.allLog()).toHaveLength(0)
+  })
+
+  it("clears a specific resource", () => {
+    const logStore = createPopulatedLogStore()
+    const resource = oneResource()
+    const root = mount(
+      <LogStoreProvider value={logStore}>
+        <ClearLogs resource={resource} />
+      </LogStoreProvider>
+    )
+    root.find(ClearLogs).simulate("click")
+    expect(Object.keys(logStore.spans).sort()).toEqual([
+      "_",
+      "build:m2",
+      "pod:m2-def456",
+    ])
+    expect(logLinesToString(logStore.allLog(), false)).toEqual(
+      "global 1\nglobal 2\nm2 build line 1\nm2 runtime line 1"
+    )
+  })
+})

web/src/ClearLogs.tsx

@@ -0,0 +1,46 @@
+import React from "react"
+import styled from "styled-components"
+import { useLogStore } from "./LogStore"
+import {
+  AnimDuration,
+  Color,
+  FontSize,
+  mixinResetButtonStyle,
+} from "./style-helpers"
+
+const ClearLogsButton = styled.button`
+  ${mixinResetButtonStyle}
+  margin-left: auto;
+  font-size: ${FontSize.small};
+  color: ${Color.white};
+  transition: color ${AnimDuration.default} ease;
+
+  &:hover {
+    color: ${Color.blue};
+  }
+`
+
+export interface ClearLogsProps {
+  resource?: Proto.webviewResource
+}
+
+const ClearLogs: React.FC<ClearLogsProps> = ({ resource }) => {
+  const logStore = useLogStore()
+  const label = resource?.name ? "Clear Logs" : "Clear All Logs"
+
+  const clearLogs = () => {
+    let spans: { [key: string]: Proto.webviewLogSpan }
+    if (resource) {
+      const manifestName = resource.name ?? ""
+      spans = logStore.spansForManifest(manifestName)
+    } else {
+      spans = logStore.allSpans()
+    }
+
+    logStore.removeSpans(Object.keys(spans))
+  }
+
+  return <ClearLogsButton onClick={() => clearLogs()}>{label}</ClearLogsButton>
+}
+
+export default ClearLogs

web/src/LogStore.test.ts

@@ -473,4 +473,36 @@ describe("LogStore", () => {
     expect(spans["build:2"].manifestName).toEqual("be")
     expect(spans["_"].manifestName).toEqual("")
   })
+
+  it("removes manifests", () => {
+    let logs = new LogStore()
+
+    logs.append({
+      spans: {
+        "build:1": { manifestName: "keep" },
+        "build:2": { manifestName: "purge" },
+        "": {},
+      },
+      segments: [
+        newGlobalSegment("global line 1\n"),
+        newManifestSegment("build:1", "start of line - "),
+        newManifestSegment("build:2", "build 2\n"),
+        newManifestSegment("build:1", "middle of line - "),
+        newManifestSegment("build:2", "build 3\n"),
+        newManifestSegment("build:1", "end of line\n"),
+      ],
+      fromCheckpoint: 0,
+      toCheckpoint: 4,
+    })
+
+    logs.removeSpans(["build:2"])
+    expect(logs.segments).toHaveLength(4)
+    expect(logs.segmentToLine).toHaveLength(4)
+    expect(Object.keys(logs.spans).sort()).toEqual(["_", "build:1"])
+
+    expect(logLinesToString(logs.allLog(), true)).toEqual(
+      "global line 1\nkeep        ┊ start of line - middle of line - end of line"
+    )
+    expect(logLinesToString(logs.manifestLog("be"), false)).toEqual("")
+  })
 })