From 54ee2a36d149239d2f234b69f6482b94a6e43c9a Mon Sep 17 00:00:00 2001 From: Georgi2704 Date: Thu, 30 Jan 2025 16:54:56 +0100 Subject: [PATCH 1/3] Make Navbar and side-menu fixed on page, add websocket disconnected icon in navbar --- .changeset/wild-otters-laugh.md | 5 ++ .../WfoHeaderWebsocketBadge.tsx | 57 +++++++++++++++++++ .../WfoWebsocketStatusBadge/index.ts | 1 + .../WfoPageHeader/WfoPageHeader.tsx | 2 + .../WfoPageTemplate/WfoPageTemplate.tsx | 11 ++-- .../src/messages/en-GB.json | 1 + .../src/messages/nl-NL.json | 1 + .../src/rtk/endpoints/streamMessages.ts | 2 +- 8 files changed, 73 insertions(+), 7 deletions(-) create mode 100644 .changeset/wild-otters-laugh.md create mode 100644 packages/orchestrator-ui-components/src/components/WfoBadges/WfoWebsocketStatusBadge/WfoHeaderWebsocketBadge.tsx diff --git a/.changeset/wild-otters-laugh.md b/.changeset/wild-otters-laugh.md new file mode 100644 index 000000000..8a17b7910 --- /dev/null +++ b/.changeset/wild-otters-laugh.md @@ -0,0 +1,5 @@ +--- +'@orchestrator-ui/orchestrator-ui-components': minor +--- + +1662 Make the navbar fixed when scrolling and notify user for failing websocket there. diff --git a/packages/orchestrator-ui-components/src/components/WfoBadges/WfoWebsocketStatusBadge/WfoHeaderWebsocketBadge.tsx b/packages/orchestrator-ui-components/src/components/WfoBadges/WfoWebsocketStatusBadge/WfoHeaderWebsocketBadge.tsx new file mode 100644 index 000000000..7ab13e5af --- /dev/null +++ b/packages/orchestrator-ui-components/src/components/WfoBadges/WfoWebsocketStatusBadge/WfoHeaderWebsocketBadge.tsx @@ -0,0 +1,57 @@ +import React, { useCallback } from 'react'; +import { useDispatch } from 'react-redux'; + +import { useTranslations } from 'next-intl'; + +import { EuiFlexGroup, EuiText } from '@elastic/eui'; + +import { WfoHeaderBadge } from '@/components'; +import { useWithOrchestratorTheme } from '@/hooks'; +import { useOrchestratorTheme } from '@/hooks/useOrchestratorTheme'; +import { WfoBoltFill, WfoBoltSlashFill } from '@/icons'; +import { orchestratorApi } from '@/rtk'; +import { useStreamMessagesQuery } from '@/rtk/endpoints/streamMessages'; + +import { getStyles } from './styles'; + +export const WfoHeaderWebsocketBadge = () => { + const dispatch = useDispatch(); + const { disconnectedStyle } = useWithOrchestratorTheme(getStyles); + + const t = useTranslations('main'); + const { theme } = useOrchestratorTheme(); + const { data: websocketConnected } = useStreamMessagesQuery(); + + const reconnect = useCallback(() => { + dispatch(orchestratorApi.util.resetApiState()); + }, [dispatch]); + + return !websocketConnected ? ( + + + {t('websocketDisconnectedShort')} + + + websocketConnected ? ( + + ) : ( + + ) + } + css={disconnectedStyle} + onClick={() => { + if (!websocketConnected) { + reconnect(); + } + }} + onClickAriaLabel={'undefined'} + iconOnClick={undefined} + iconOnClickAriaLabel={undefined} + /> + + ) : ( + <> + ); +}; diff --git a/packages/orchestrator-ui-components/src/components/WfoBadges/WfoWebsocketStatusBadge/index.ts b/packages/orchestrator-ui-components/src/components/WfoBadges/WfoWebsocketStatusBadge/index.ts index 12b743689..8d058f04a 100644 --- a/packages/orchestrator-ui-components/src/components/WfoBadges/WfoWebsocketStatusBadge/index.ts +++ b/packages/orchestrator-ui-components/src/components/WfoBadges/WfoWebsocketStatusBadge/index.ts @@ -1 +1,2 @@ export * from './WfoWebsocketStatusBadge'; +export * from './WfoHeaderWebsocketBadge'; diff --git a/packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoPageHeader/WfoPageHeader.tsx b/packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoPageHeader/WfoPageHeader.tsx index 7c0692dd6..d3ae7c9ad 100644 --- a/packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoPageHeader/WfoPageHeader.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoPageHeader/WfoPageHeader.tsx @@ -17,6 +17,7 @@ import { WfoEngineStatusBadge, WfoEnvironmentBadge, WfoFailedTasksBadge, + WfoHeaderWebsocketBadge, } from '@/components'; import { WfoAppLogo } from '@/components/WfoPageTemplate/WfoPageHeader/WfoAppLogo'; import { getWfoPageHeaderStyles } from '@/components/WfoPageTemplate/WfoPageHeader/styles'; @@ -70,6 +71,7 @@ export const WfoPageHeader: FC = ({ + diff --git a/packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoPageTemplate/WfoPageTemplate.tsx b/packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoPageTemplate/WfoPageTemplate.tsx index 7e36e1c46..9c9bb6575 100644 --- a/packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoPageTemplate/WfoPageTemplate.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoPageTemplate/WfoPageTemplate.tsx @@ -1,13 +1,11 @@ import React, { FC, ReactElement, ReactNode, useState } from 'react'; -import { EuiPageTemplate } from '@elastic/eui'; import type { EuiThemeColorMode } from '@elastic/eui'; +import { EuiPageTemplate } from '@elastic/eui'; import { EuiSideNavItemType } from '@elastic/eui/src/components/side_nav/side_nav_types'; -import { useOrchestratorTheme } from '../../../hooks/useOrchestratorTheme'; -import { WfoBreadcrumbs } from '../WfoBreadcrumbs'; -import { WfoPageHeader } from '../WfoPageHeader'; -import { WfoSidebar } from '../WfoSidebar'; +import { WfoBreadcrumbs, WfoPageHeader, WfoSidebar } from '@/components'; +import { useOrchestratorTheme } from '@/hooks'; export interface WfoPageTemplateProps { getAppLogo: (navigationHeight: number) => ReactElement; @@ -35,7 +33,6 @@ export const WfoPageTemplate: FC = ({ navigationHeight={navigationHeight} onThemeSwitch={onThemeSwitch} /> - {/* Sidebar and content area */} = ({ ({ streamMessages: build.query({ queryFn: () => { - return { data: false }; + return { data: true }; }, async onCacheEntryAdded( _, From 6b1746368440d210c8d5e9df6394dfb17fae9112 Mon Sep 17 00:00:00 2001 From: Georgi2704 Date: Mon, 3 Feb 2025 12:00:57 +0100 Subject: [PATCH 2/3] Resolved comments, cleanup --- .../WfoHeaderWebsocketBadge.tsx | 57 ------------------- .../WfoWebsocketStatusBadge.tsx | 16 ++++-- .../WfoWebsocketStatusBadge/index.ts | 1 - .../WfoPageHeader/WfoPageHeader.tsx | 6 +- .../WfoPageTemplate/WfoPageTemplate.tsx | 2 + 5 files changed, 18 insertions(+), 64 deletions(-) delete mode 100644 packages/orchestrator-ui-components/src/components/WfoBadges/WfoWebsocketStatusBadge/WfoHeaderWebsocketBadge.tsx diff --git a/packages/orchestrator-ui-components/src/components/WfoBadges/WfoWebsocketStatusBadge/WfoHeaderWebsocketBadge.tsx b/packages/orchestrator-ui-components/src/components/WfoBadges/WfoWebsocketStatusBadge/WfoHeaderWebsocketBadge.tsx deleted file mode 100644 index 7ab13e5af..000000000 --- a/packages/orchestrator-ui-components/src/components/WfoBadges/WfoWebsocketStatusBadge/WfoHeaderWebsocketBadge.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React, { useCallback } from 'react'; -import { useDispatch } from 'react-redux'; - -import { useTranslations } from 'next-intl'; - -import { EuiFlexGroup, EuiText } from '@elastic/eui'; - -import { WfoHeaderBadge } from '@/components'; -import { useWithOrchestratorTheme } from '@/hooks'; -import { useOrchestratorTheme } from '@/hooks/useOrchestratorTheme'; -import { WfoBoltFill, WfoBoltSlashFill } from '@/icons'; -import { orchestratorApi } from '@/rtk'; -import { useStreamMessagesQuery } from '@/rtk/endpoints/streamMessages'; - -import { getStyles } from './styles'; - -export const WfoHeaderWebsocketBadge = () => { - const dispatch = useDispatch(); - const { disconnectedStyle } = useWithOrchestratorTheme(getStyles); - - const t = useTranslations('main'); - const { theme } = useOrchestratorTheme(); - const { data: websocketConnected } = useStreamMessagesQuery(); - - const reconnect = useCallback(() => { - dispatch(orchestratorApi.util.resetApiState()); - }, [dispatch]); - - return !websocketConnected ? ( - - - {t('websocketDisconnectedShort')} - - - websocketConnected ? ( - - ) : ( - - ) - } - css={disconnectedStyle} - onClick={() => { - if (!websocketConnected) { - reconnect(); - } - }} - onClickAriaLabel={'undefined'} - iconOnClick={undefined} - iconOnClickAriaLabel={undefined} - /> - - ) : ( - <> - ); -}; diff --git a/packages/orchestrator-ui-components/src/components/WfoBadges/WfoWebsocketStatusBadge/WfoWebsocketStatusBadge.tsx b/packages/orchestrator-ui-components/src/components/WfoBadges/WfoWebsocketStatusBadge/WfoWebsocketStatusBadge.tsx index 67c516d9e..cd1c2f33d 100644 --- a/packages/orchestrator-ui-components/src/components/WfoBadges/WfoWebsocketStatusBadge/WfoWebsocketStatusBadge.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoBadges/WfoWebsocketStatusBadge/WfoWebsocketStatusBadge.tsx @@ -1,20 +1,26 @@ -import React, { useCallback, useEffect } from 'react'; +import React, { FC, useCallback, useEffect } from 'react'; import { useDispatch } from 'react-redux'; import { useTranslations } from 'next-intl'; import { EuiToolTip } from '@elastic/eui'; +import { WfoHeaderBadge } from '@/components'; import { useWithOrchestratorTheme } from '@/hooks'; import { useOrchestratorTheme } from '@/hooks/useOrchestratorTheme'; import { WfoBoltFill, WfoBoltSlashFill } from '@/icons'; import { orchestratorApi } from '@/rtk'; import { useStreamMessagesQuery } from '@/rtk/endpoints/streamMessages'; -import { WfoHeaderBadge } from '../WfoHeaderBadge'; import { getStyles } from './styles'; -export const WfoWebsocketStatusBadge = () => { +interface WfoWebsocketStatusBadgeProps { + showOnlyWhenDisconnected?: boolean; +} + +export const WfoWebsocketStatusBadge: FC = ({ + showOnlyWhenDisconnected = false, +}) => { const dispatch = useDispatch(); const { connectedStyle, disconnectedStyle } = useWithOrchestratorTheme(getStyles); @@ -56,7 +62,7 @@ export const WfoWebsocketStatusBadge = () => { }; }, [reconnect, websocketConnected]); - return ( + return !(websocketConnected && showOnlyWhenDisconnected) ? ( { iconOnClickAriaLabel={undefined} /> + ) : ( + <> ); }; diff --git a/packages/orchestrator-ui-components/src/components/WfoBadges/WfoWebsocketStatusBadge/index.ts b/packages/orchestrator-ui-components/src/components/WfoBadges/WfoWebsocketStatusBadge/index.ts index 8d058f04a..12b743689 100644 --- a/packages/orchestrator-ui-components/src/components/WfoBadges/WfoWebsocketStatusBadge/index.ts +++ b/packages/orchestrator-ui-components/src/components/WfoBadges/WfoWebsocketStatusBadge/index.ts @@ -1,2 +1 @@ export * from './WfoWebsocketStatusBadge'; -export * from './WfoHeaderWebsocketBadge'; diff --git a/packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoPageHeader/WfoPageHeader.tsx b/packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoPageHeader/WfoPageHeader.tsx index d3ae7c9ad..b30813ff7 100644 --- a/packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoPageHeader/WfoPageHeader.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoPageHeader/WfoPageHeader.tsx @@ -17,7 +17,7 @@ import { WfoEngineStatusBadge, WfoEnvironmentBadge, WfoFailedTasksBadge, - WfoHeaderWebsocketBadge, + WfoWebsocketStatusBadge, } from '@/components'; import { WfoAppLogo } from '@/components/WfoPageTemplate/WfoPageHeader/WfoAppLogo'; import { getWfoPageHeaderStyles } from '@/components/WfoPageTemplate/WfoPageHeader/styles'; @@ -71,7 +71,9 @@ export const WfoPageHeader: FC = ({ - + diff --git a/packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoPageTemplate/WfoPageTemplate.tsx b/packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoPageTemplate/WfoPageTemplate.tsx index 9c9bb6575..1d99cba6a 100644 --- a/packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoPageTemplate/WfoPageTemplate.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoPageTemplate/WfoPageTemplate.tsx @@ -45,6 +45,8 @@ export const WfoPageTemplate: FC = ({ From c2edc3a0baa0e840247e4eb1a8f667c27fbb20d2 Mon Sep 17 00:00:00 2001 From: Georgi2704 Date: Mon, 3 Feb 2025 13:09:54 +0100 Subject: [PATCH 3/3] Renamed some variables for better clarity --- .../WfoWebsocketStatusBadge/WfoWebsocketStatusBadge.tsx | 8 +++++--- .../WfoPageTemplate/WfoPageHeader/WfoPageHeader.tsx | 4 +--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/orchestrator-ui-components/src/components/WfoBadges/WfoWebsocketStatusBadge/WfoWebsocketStatusBadge.tsx b/packages/orchestrator-ui-components/src/components/WfoBadges/WfoWebsocketStatusBadge/WfoWebsocketStatusBadge.tsx index cd1c2f33d..f4ca03576 100644 --- a/packages/orchestrator-ui-components/src/components/WfoBadges/WfoWebsocketStatusBadge/WfoWebsocketStatusBadge.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoBadges/WfoWebsocketStatusBadge/WfoWebsocketStatusBadge.tsx @@ -15,11 +15,11 @@ import { useStreamMessagesQuery } from '@/rtk/endpoints/streamMessages'; import { getStyles } from './styles'; interface WfoWebsocketStatusBadgeProps { - showOnlyWhenDisconnected?: boolean; + hideWhenConnected?: boolean; } export const WfoWebsocketStatusBadge: FC = ({ - showOnlyWhenDisconnected = false, + hideWhenConnected = false, }) => { const dispatch = useDispatch(); const { connectedStyle, disconnectedStyle } = @@ -29,6 +29,8 @@ export const WfoWebsocketStatusBadge: FC = ({ const { theme } = useOrchestratorTheme(); const { data: websocketConnected } = useStreamMessagesQuery(); + const showBadge = !(websocketConnected && hideWhenConnected); + const reconnect = useCallback(() => { dispatch(orchestratorApi.util.resetApiState()); }, [dispatch]); @@ -62,7 +64,7 @@ export const WfoWebsocketStatusBadge: FC = ({ }; }, [reconnect, websocketConnected]); - return !(websocketConnected && showOnlyWhenDisconnected) ? ( + return showBadge ? ( = ({ - +