fix: System status warning nav (#19405)

PostHog · Dec 19, 2023 · 447b584 · 447b584
1 parent effb98f
commit 447b584
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 12 deletions.
diff --git a/frontend/src/layout/navigation-3000/components/Navbar.tsx b/frontend/src/layout/navigation-3000/components/Navbar.tsx
@@ -4,6 +4,7 @@ import { useActions, useValues } from 'kea'
 import { commandBarLogic } from 'lib/components/CommandBar/commandBarLogic'
 import { Resizer } from 'lib/components/Resizer/Resizer'
 import { ScrollableShadows } from 'lib/components/ScrollableShadows/ScrollableShadows'
+import { IconWarning } from 'lib/lemon-ui/icons'
 import { Popover } from 'lib/lemon-ui/Popover'
 import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
@@ -20,7 +21,7 @@ import { NavbarButton } from './NavbarButton'
 
 export function Navbar(): JSX.Element {
     const { user } = useValues(userLogic)
-    const { isSitePopoverOpen } = useValues(navigationLogic)
+    const { isSitePopoverOpen, systemStatusHealthy } = useValues(navigationLogic)
     const { closeSitePopover, toggleSitePopover } = useActions(navigationLogic)
     const { isNavShown, isSidebarShown, activeNavbarItemId, navbarItems, mobileLayout } = useValues(navigation3000Logic)
     const { showSidebar, hideSidebar, toggleNavCollapsed, hideNavOnMobile } = useActions(navigation3000Logic)
@@ -89,6 +90,15 @@ export function Navbar(): JSX.Element {
                                 to={urls.settings('project')}
                             />
 
+                            {!systemStatusHealthy ? (
+                                <NavbarButton
+                                    icon={<IconWarning />}
+                                    identifier={Scene.Settings}
+                                    title="System issue!"
+                                    to={urls.instanceStatus()}
+                                />
+                            ) : null}
+
                             <Popover
                                 overlay={<SitePopoverOverlay />}
                                 visible={isSitePopoverOpen}

diff --git a/frontend/src/layout/navigation/TopBar/SitePopover.tsx b/frontend/src/layout/navigation/TopBar/SitePopover.tsx
@@ -137,17 +137,17 @@ export function InviteMembersButton({
 
 function SystemStatus(): JSX.Element {
     const { closeSitePopover } = useActions(navigationLogic)
-    const { systemStatus } = useValues(navigationLogic)
+    const { systemStatusHealthy } = useValues(navigationLogic)
 
     return (
         <LemonRow
-            status={systemStatus ? 'success' : 'danger'}
-            icon={systemStatus ? <IconCheckmark /> : <IconOffline />}
+            status={systemStatusHealthy ? 'success' : 'danger'}
+            icon={systemStatusHealthy ? <IconCheckmark /> : <IconOffline />}
             fullWidth
         >
             <>
                 <div className="SitePopover__main-info">
-                    {systemStatus ? 'All systems operational' : 'Potential system issue'}
+                    {systemStatusHealthy ? 'All systems operational' : 'Potential system issue'}
                 </div>
                 <Link
                     to={urls.instanceStatus()}
@@ -335,7 +335,7 @@ export function SitePopoverOverlay(): JSX.Element {
 
 export function SitePopover(): JSX.Element {
     const { user } = useValues(userLogic)
-    const { isSitePopoverOpen, systemStatus } = useValues(navigationLogic)
+    const { isSitePopoverOpen, systemStatusHealthy } = useValues(navigationLogic)
     const { toggleSitePopover, closeSitePopover } = useActions(navigationLogic)
 
     return (
@@ -348,7 +348,7 @@ export function SitePopover(): JSX.Element {
             <div className="SitePopover__crumb" onClick={toggleSitePopover} data-attr="top-menu-toggle">
                 <div className="SitePopover__profile-picture" title="Potential system issue">
                     <ProfilePicture name={user?.first_name} email={user?.email} size="md" />
-                    {!systemStatus && <IconExclamation className="SitePopover__danger" />}
+                    {!systemStatusHealthy && <IconExclamation className="SitePopover__danger" />}
                 </div>
                 <IconChevronDown />
             </div>

diff --git a/frontend/src/layout/navigation/navigationLogic.ts b/frontend/src/layout/navigation/navigationLogic.ts
@@ -137,18 +137,18 @@ export const navigationLogic = kea<navigationLogicType>([
                 !noSidebar &&
                 (mobileLayout ? isActivationSideBarShownBase && !isSideBarShownMobile : isActivationSideBarShownBase),
         ],
-        systemStatus: [
+        systemStatusHealthy: [
             (s) => [s.navigationStatus, preflightLogic.selectors.siteUrlMisconfigured],
             (status, siteUrlMisconfigured) => {
-                if (siteUrlMisconfigured) {
-                    return false
-                }
-
                 // On cloud non staff users don't have status metrics to review
                 if (preflightLogic.values.preflight?.cloud && !userLogic.values.user?.is_staff) {
                     return true
                 }
 
+                if (siteUrlMisconfigured) {
+                    return false
+                }
+
                 return status.system_status_ok
             },
         ],