add and track connection status, use components for app load

Signed-off-by: Mason Fish <mason@looky.cloud>

.github/workflows/ci.yml

@@ -164,18 +164,18 @@ jobs:
             ${{ runner.os }}-build-${{ env.cache-name }}-${{ matrix.node-version }}-
       - run: npm install --no-audit
       - run: npm run build
-# Disabling using built & installed app for now;
-# see brim#1145
-#      - name: Build and Install MacOS DMG
-#        if: runner.os == 'macOS'
-#        run: |
-#          set -x
-#          source scripts/lib/common.bash
-#          node scripts/release --darwin
-#          hdiutil attach dist/installers/Brim.dmg
-#          cp -R /Volumes/Brim/Brim.app /Applications
-#          retry_until_success 60 1 umount_macos_ci_dimg /Volumes/Brim
-#        shell: bash
+      # Disabling using built & installed app for now;
+      # see brim#1145
+      #      - name: Build and Install MacOS DMG
+      #        if: runner.os == 'macOS'
+      #        run: |
+      #          set -x
+      #          source scripts/lib/common.bash
+      #          node scripts/release --darwin
+      #          hdiutil attach dist/installers/Brim.dmg
+      #          cp -R /Volumes/Brim/Brim.app /Applications
+      #          retry_until_success 60 1 umount_macos_ci_dimg /Volumes/Brim
+      #        shell: bash
       - name: Download Linux packages
         if: runner.os == 'Linux'
         uses: actions/download-artifact@v1
@@ -203,3 +203,4 @@ jobs:
         with:
           name: artifacts-${{ matrix.os }}-node-${{ matrix.node-version }}
           path: /var/tmp/brimsec/itest
+

itest/lib/appStep/api/ingestFile.ts

@@ -24,6 +24,7 @@ export default async (app: Application, file: string) => {
   })
 
   const notice = await app.client.$(popNoticeLocator.css)
+  app.client.waitUntil(() => notice.isExisting())
   app.client.waitUntil(() =>
     notice.getText().then((text) => text === "Import complete.")
   )

src/css/main.scss

@@ -85,7 +85,6 @@
 @import "finding-span-card";
 @import "expand-button";
 @import "finding-detail";
-@import "login";
 @import "form";
 @import "pop-menu";
 @import "button-row";

src/js/components/ClusterPicker.tsx

@@ -2,16 +2,15 @@ import {useDispatch, useSelector} from "react-redux"
 import React, {ComponentType} from "react"
 import styled from "styled-components"
 
-import {setConnection} from "../flows/setConnection"
 import Clusters from "../state/Clusters"
 import Current from "../state/Current"
 import DropdownArrow from "../icons/DropdownArrow"
 import Modal from "../state/Modal"
-import Notice from "../state/Notice"
 import usePopupMenu from "./hooks/usePopupMenu"
 import {Cluster} from "../state/Clusters/types"
 import {AppDispatch} from "../state/types"
 import {MenuItemConstructorOptions} from "electron"
+import {initConnection} from "../flows/initConnection"
 
 const ClusterPickerWrapper = styled.div`
   display: flex;
@@ -46,8 +45,8 @@ export default function ClusterPicker() {
       checked: isCurrent,
       click: () => {
         if (isCurrent) return
-        dispatch(setConnection(c)).catch((e) => {
-          dispatch(Notice.set(e))
+        dispatch(initConnection(c)).catch(() => {
+          dispatch(Current.setConnectionId(c.id))
         })
       }
     }

src/js/components/ConnectionError.tsx

@@ -0,0 +1,68 @@
+import React, {useState} from "react"
+
+import MacSpinner from "./MacSpinner"
+import styled from "styled-components"
+import {Cluster} from "../state/Clusters/types"
+import ToolbarButton from "./Toolbar/Button"
+import {useDispatch} from "react-redux"
+import {initCurrentTab} from "../flows/initCurrentTab"
+
+const PageWrap = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+`
+
+const StyledHeader = styled.h1`
+  margin: 110px 0 0 0;
+  color: var(--aqua);
+  ${(p) => p.theme.typography.headingPage}
+`
+
+const StyledP = styled.p`
+  margin: 18px 0 0 0;
+  color: ${(p) => p.theme.colors.aqua};
+  ${(p) => p.theme.typography.labelNormal}
+`
+
+const StyledButton = styled(ToolbarButton)`
+  margin: 36px 0 0 0;
+`
+
+type Props = {
+  conn: Cluster
+}
+
+const ConnectionError = ({conn}: Props) => {
+  const dispatch = useDispatch()
+  const [isFetching, setIsFetching] = useState(false)
+
+  const onClick = async () => {
+    setIsFetching(true)
+    // add wait here so ui feedback is more visible to user
+    await new Promise((res) => setTimeout(res, 500))
+    await dispatch(initCurrentTab())
+    setIsFetching(false)
+  }
+
+  const {host, port} = conn
+  const errorMsg = isFetching
+    ? "Attempting to connect..."
+    : `The service at ${host}:${port} could not be reached.`
+
+  return (
+    <PageWrap>
+      <StyledHeader>Connection Error</StyledHeader>
+      <StyledP>{errorMsg}</StyledP>
+      <StyledButton
+        onClick={onClick}
+        text={isFetching ? "" : "Retry"}
+        icon={isFetching ? <MacSpinner /> : null}
+      />
+    </PageWrap>
+  )
+}
+
+export default ConnectionError

src/js/components/LeftPane.tsx

@@ -174,6 +174,7 @@ export function LeftPane() {
   const showSpaces = useSelector(Layout.getSpacesIsOpen)
   const historyHeight = useSelector(Layout.getHistoryHeight)
   const spacesHeight = useSelector(Layout.getSpacesHeight)
+  const conn = useSelector(Current.getConnection)
 
   const paneRef = useRef<HTMLDivElement>()
   const paneHeight = useRef(0)
@@ -228,7 +229,7 @@ export function LeftPane() {
           <AddSpaceButton />
         </SectionHeader>
         <SectionContents show={showSpaces}>
-          <SavedSpacesList spaces={spaces} />
+          <SavedSpacesList spaces={spaces} connStatus={conn.status} />
         </SectionContents>
         {showSpaces && <DragAnchor {...dragFunc()} />}
       </StyledSection>