web: update the document title and favicon when Tilt UI disconnects

web/src/HUD.tsx

@@ -27,7 +27,7 @@ import { ResourceSelectionProvider } from "./ResourceSelectionContext"
 import ShareSnapshotModal from "./ShareSnapshotModal"
 import { TiltSnackbarProvider } from "./Snackbar"
 import { SnapshotActionProvider } from "./snapshot"
-import SocketBar from "./SocketBar"
+import SocketBar, { isSocketConnected } from "./SocketBar"
 import { StarredResourcesContextProvider } from "./StarredResourcesContext"
 import { ShowErrorModal, ShowFatalErrorModal, SocketState } from "./types"
 
@@ -198,10 +198,6 @@ export default class HUD extends Component<HudProps, HudState> {
     }
 
     let tiltfileKey = session?.tiltfileKey
-    let runningBuild = session?.runningTiltBuild
-    let suggestedVersion = session?.suggestedTiltVersion
-    const versionSettings = session?.versionSettings
-    const checkUpdates = versionSettings?.checkUpdates ?? true
     let shareSnapshotModal = this.renderShareSnapshotModal(view)
     let fatalErrorModal = this.renderFatalErrorModal(view)
     let errorModal = this.renderErrorModal()
@@ -239,6 +235,7 @@ export default class HUD extends Component<HudProps, HudState> {
   }
 
   renderOverviewSwitch() {
+    const tiltConnected = isSocketConnected(this.state.socketState)
     return (
       <FeaturesProvider
         featureFlags={this.state.view.uiSession?.status?.featureFlags || null}
@@ -253,12 +250,18 @@ export default class HUD extends Component<HudProps, HudState> {
                       <Route
                         path={this.path("/r/:name/overview")}
                         render={(props: RouteComponentProps<any>) => (
-                          <OverviewResourcePane view={this.state.view} />
+                          <OverviewResourcePane
+                            view={this.state.view}
+                            tiltConnected={tiltConnected}
+                          />
                         )}
                       />
                       <Route
                         render={() => (
-                          <OverviewTablePane view={this.state.view} />
+                          <OverviewTablePane
+                            view={this.state.view}
+                            tiltConnected={tiltConnected}
+                          />
                         )}
                       />
                     </Switch>

web/src/HeaderBar.stories.tsx

@@ -19,23 +19,41 @@ export default {
 }
 
 export const TwoResources = () => (
-  <HeaderBar view={twoResourceView()} currentPage={AnalyticsType.Detail} />
+  <HeaderBar
+    view={twoResourceView()}
+    currentPage={AnalyticsType.Detail}
+    tiltConnected={true}
+  />
 )
 
 export const TenResources = () => (
-  <HeaderBar view={tenResourceView()} currentPage={AnalyticsType.Detail} />
+  <HeaderBar
+    view={tenResourceView()}
+    currentPage={AnalyticsType.Detail}
+    tiltConnected={true}
+  />
 )
 
 export const TenResourcesErrorsAndWarnings = () => {
   let view = tenResourceView() as any
   view.uiResources[0].status.updateStatus = UpdateStatus.Error
   view.uiResources[1].status.buildHistory[0].warnings = ["warning time"]
   view.uiResources[5].status.updateStatus = UpdateStatus.Error
-  return <HeaderBar view={view} currentPage={AnalyticsType.Grid} />
+  return (
+    <HeaderBar
+      view={view}
+      currentPage={AnalyticsType.Grid}
+      tiltConnected={true}
+    />
+  )
 }
 
 export const OneHundredResources = () => (
-  <HeaderBar view={nResourceView(100)} currentPage={AnalyticsType.Grid} />
+  <HeaderBar
+    view={nResourceView(100)}
+    currentPage={AnalyticsType.Grid}
+    tiltConnected={true}
+  />
 )
 
 export const UpgradeAvailable = () => {
@@ -44,5 +62,11 @@ export const UpgradeAvailable = () => {
   status!.suggestedTiltVersion = "0.18.1"
   status!.runningTiltBuild = { version: "0.18.0", dev: false }
   status!.versionSettings = { checkUpdates: true }
-  return <HeaderBar view={view} currentPage={AnalyticsType.Detail} />
+  return (
+    <HeaderBar
+      view={view}
+      currentPage={AnalyticsType.Detail}
+      tiltConnected={true}
+    />
+  )
 }

web/src/HeaderBar.tsx

@@ -105,10 +105,15 @@ const ViewLinkSection = styled.div`
 
 type HeaderBarProps = {
   view: Proto.webviewView
+  tiltConnected: boolean
   currentPage?: AnalyticsType.Detail | AnalyticsType.Grid
 }
 
-export default function HeaderBar({ view, currentPage }: HeaderBarProps) {
+export default function HeaderBar({
+  view,
+  currentPage,
+  tiltConnected,
+}: HeaderBarProps) {
   let isSnapshot = usePathBuilder().isSnapshot()
   let snapshot = useSnapshotAction()
   let session = view?.uiSession?.status
@@ -164,6 +169,7 @@ export default function HeaderBar({ view, currentPage }: HeaderBarProps) {
         displayText="Resources"
         labelText="Status summary for all resources"
         resources={resources}
+        tiltConnected={tiltConnected}
       />
       <CustomNav view={view} />
       <GlobalNav {...globalNavProps} />

web/src/OverviewResourcePane.stories.tsx

@@ -68,7 +68,7 @@ function OverviewResourcePaneHarness(props: {
   return (
     <MemoryRouter initialEntries={[entry]}>
       <ResourceNavProvider validateResource={validateResource}>
-        <OverviewResourcePane view={view} />
+        <OverviewResourcePane view={view} tiltConnected={true} />
       </ResourceNavProvider>
     </MemoryRouter>
   )

web/src/OverviewResourcePane.tsx

@@ -19,6 +19,7 @@ import { ResourceName } from "./types"
 type UIResource = Proto.v1alpha1UIResource
 type OverviewResourcePaneProps = {
   view: Proto.webviewView
+  tiltConnected: boolean
 }
 
 let OverviewResourcePaneRoot = styled.div`
@@ -93,7 +94,11 @@ export default function OverviewResourcePane(props: OverviewResourcePaneProps) {
 
   return (
     <OverviewResourcePaneRoot>
-      <HeaderBar view={props.view} currentPage={AnalyticsType.Detail} />
+      <HeaderBar
+        view={props.view}
+        currentPage={AnalyticsType.Detail}
+        tiltConnected={props.tiltConnected}
+      />
       <StarredResourceBar
         {...starredResourcePropsFromView(props.view, selectedTab)}
       />

web/src/OverviewTablePane.stories.tsx

@@ -58,21 +58,25 @@ export default {
   },
 }
 
-export const TwoResources = () => <OverviewTablePane view={twoResourceView()} />
+export const TwoResources = () => (
+  <OverviewTablePane view={twoResourceView()} tiltConnected={true} />
+)
 
-export const TenResources = () => <OverviewTablePane view={tenResourceView()} />
+export const TenResources = () => (
+  <OverviewTablePane view={tenResourceView()} tiltConnected={true} />
+)
 
 export const TenResourcesWithLabels = () => (
-  <OverviewTablePane view={nResourceWithLabelsView(10)} />
+  <OverviewTablePane view={nResourceWithLabelsView(10)} tiltConnected={true} />
 )
 
 export const OneHundredResources = () => (
-  <OverviewTablePane view={nResourceView(100)} />
+  <OverviewTablePane view={nResourceView(100)} tiltConnected={true} />
 )
 
 export const OneHundredResourcesOneStar = () => (
   <StarredResourceMemoryProvider initialValueForTesting={["vigoda_2"]}>
-    <OverviewTablePane view={nResourceView(100)} />
+    <OverviewTablePane view={nResourceView(100)} tiltConnected={true} />
   </StarredResourceMemoryProvider>
 )
 
@@ -91,7 +95,7 @@ export const OneHundredResourcesTenStars = () => {
   ]
   return (
     <StarredResourceMemoryProvider initialValueForTesting={items}>
-      <OverviewTablePane view={nResourceView(100)} />
+      <OverviewTablePane view={nResourceView(100)} tiltConnected={true} />
     </StarredResourceMemoryProvider>
   )
 }

web/src/OverviewTablePane.tsx

@@ -13,6 +13,7 @@ import { Color, SizeUnit, Width } from "./style-helpers"
 
 type OverviewTablePaneProps = {
   view: Proto.webviewView
+  tiltConnected: boolean
 }
 
 let OverviewTablePaneStyle = styled.div`
@@ -56,7 +57,11 @@ export default function OverviewTablePane(props: OverviewTablePaneProps) {
   return (
     <OverviewTablePaneStyle>
       <OverviewTableStickyNav>
-        <HeaderBar view={props.view} currentPage={AnalyticsType.Grid} />
+        <HeaderBar
+          view={props.view}
+          currentPage={AnalyticsType.Grid}
+          tiltConnected={props.tiltConnected}
+        />
         <StarredResourceBar {...starredResourcePropsFromView(props.view, "")} />
         <OverviewTableMenu aria-label="Resource menu">
           <OverviewTableResourceNameFilter />

web/src/ResourceStatusSummary.tsx

@@ -299,12 +299,18 @@ function statusCounts(statuses: ResourceStatus[]): StatusCounts {
   }
 }
 
-function ResourceMetadata(props: { counts: StatusCounts }) {
+function ResourceMetadata(props: {
+  counts: StatusCounts
+  tiltConnected?: boolean
+}) {
   let { totalEnabled, healthy, pending, unhealthy } = props.counts
   useEffect(() => {
     let favicon: any = document.head.querySelector("#favicon")
     let faviconHref = ""
-    if (unhealthy > 0) {
+    if (props.tiltConnected === false) {
+      document.title = `… disconnected ┊ Tilt`
+      faviconHref = "/static/ico/favicon-gray.ico"
+    } else if (unhealthy > 0) {
       document.title = `✖︎ ${unhealthy} ┊ Tilt`
       faviconHref = "/static/ico/favicon-red.ico"
     } else if (pending || totalEnabled === 0) {
@@ -317,7 +323,7 @@ function ResourceMetadata(props: { counts: StatusCounts }) {
     if (favicon) {
       favicon.href = faviconHref
     }
-  }, [totalEnabled, healthy, pending, unhealthy])
+  }, [totalEnabled, healthy, pending, unhealthy, props.tiltConnected])
   return <></>
 }
 
@@ -330,6 +336,7 @@ type ResourceStatusSummaryOptions = {
 
 type ResourceStatusSummaryProps = {
   statuses: ResourceStatus[]
+  tiltConnected?: boolean
 } & ResourceStatusSummaryOptions
 
 function ResourceStatusSummary(props: ResourceStatusSummaryProps) {
@@ -341,7 +348,10 @@ function ResourceStatusSummary(props: ResourceStatusSummaryProps) {
   return (
     <ResourceStatusSummaryRoot aria-label={labelText}>
       {updateMetadata && (
-        <ResourceMetadata counts={statusCounts(props.statuses)} />
+        <ResourceMetadata
+          counts={statusCounts(props.statuses)}
+          tiltConnected={props.tiltConnected}
+        />
       )}
       <ResourceGroupStatus
         counts={statusCounts(props.statuses)}
@@ -362,6 +372,7 @@ function ResourceStatusSummary(props: ResourceStatusSummaryProps) {
 
 type StatusSummaryProps<T> = {
   resources: readonly T[]
+  tiltConnected?: boolean
 } & ResourceStatusSummaryOptions
 
 export function SidebarGroupStatusSummary(

web/src/SocketBar.tsx

@@ -40,6 +40,18 @@ let Bar = styled.div`
   animation: ${pulse} 3s ease infinite;
 `
 
+export function isSocketConnected(state: SocketState) {
+  if (
+    state === SocketState.Reconnecting ||
+    state === SocketState.Closed ||
+    state === SocketState.Loading
+  ) {
+    return false
+  }
+
+  return true
+}
+
 export default function SocketBar(props: SocketBarProps) {
   let state = props.state
   let message = ""