From fb3b70b729ba723c7de98cfa726f1cd5de27755a Mon Sep 17 00:00:00 2001 From: SagarRajput-7 <162284829+SagarRajput-7@users.noreply.github.com> Date: Wed, 29 Jan 2025 17:32:01 +0530 Subject: [PATCH] feat: added worker count and other misc changes (#6951) * feat: added worker count - via autocomplete API * feat: added worker count and code fix * feat: added lightMode styles for all celery feat * feat: changed routes to have redirects, subroute etc * feat: feedback changes * feat: removed console.log --- frontend/src/AppRoutes/routes.ts | 13 +- .../CeleryOverviewTable.styles.scss | 185 +++++++++++------- .../CeleryOverviewTable.tsx | 24 ++- .../useGetCeleryFilters.ts | 26 ++- .../CeleryTaskDetail.style.scss | 48 +++++ .../CeleryTaskGraph.style.scss | 82 +++++++- .../CeleryTaskGraph/CeleryTaskGraphGrid.tsx | 36 ++-- .../CeleryTaskGraph/CeleryTaskGraphUtils.ts | 43 ---- .../CeleryTask/useCeleryFilterOptions.ts | 12 ++ frontend/src/constants/routes.ts | 4 +- frontend/src/container/AppLayout/index.tsx | 4 +- .../container/GridTableComponent/index.tsx | 12 +- frontend/src/container/SideNav/SideNav.tsx | 2 +- frontend/src/container/SideNav/config.ts | 4 +- frontend/src/container/SideNav/menuItems.tsx | 2 +- .../container/TopNav/Breadcrumbs/index.tsx | 2 +- .../TopNav/DateTimeSelectionV2/config.ts | 4 +- .../CeleryOverview/CeleryOverview.styles.scss | 30 ++- .../CeleryOverviewDetails.styles.scss | 13 ++ .../CeleryOverviewDetails.tsx | 12 +- .../ValueInfo.styles.scss | 31 +++ .../Celery/CeleryTask/CeleryTask.styles.scss | 30 ++- .../MQDetailPage/MQDetailPage.tsx | 30 +-- .../MessagingQueues.styles.scss | 37 +--- .../pages/MessagingQueues/MessagingQueues.tsx | 2 +- .../MessagingQueuesMainPage.tsx | 26 ++- frontend/src/utils/permission/index.ts | 4 +- 27 files changed, 460 insertions(+), 258 deletions(-) diff --git a/frontend/src/AppRoutes/routes.ts b/frontend/src/AppRoutes/routes.ts index bee46680c08..37bcee42a4f 100644 --- a/frontend/src/AppRoutes/routes.ts +++ b/frontend/src/AppRoutes/routes.ts @@ -28,7 +28,6 @@ import { LogsExplorer, LogsIndexToFields, LogsSaveViews, - MQDetailPage, MySettings, NewDashboardPage, OldLogsExplorer, @@ -395,10 +394,10 @@ const routes: AppRoutes[] = [ key: 'INTEGRATIONS', }, { - path: ROUTES.MESSAGING_QUEUES, + path: ROUTES.MESSAGING_QUEUES_KAFKA, exact: true, component: MessagingQueues, - key: 'MESSAGING_QUEUES', + key: 'MESSAGING_QUEUES_KAFKA', isPrivate: true, }, { @@ -416,10 +415,10 @@ const routes: AppRoutes[] = [ isPrivate: true, }, { - path: ROUTES.MESSAGING_QUEUES_DETAIL, + path: ROUTES.MESSAGING_QUEUES_KAFKA_DETAIL, exact: true, - component: MQDetailPage, - key: 'MESSAGING_QUEUES_DETAIL', + component: MessagingQueues, + key: 'MESSAGING_QUEUES_KAFKA_DETAIL', isPrivate: true, }, { @@ -461,6 +460,7 @@ export const oldRoutes = [ '/logs-save-views', '/traces-save-views', '/settings/access-tokens', + '/messaging-queues', ]; export const oldNewRoutesMapping: Record = { @@ -470,6 +470,7 @@ export const oldNewRoutesMapping: Record = { '/logs-save-views': '/logs/saved-views', '/traces-save-views': '/traces/saved-views', '/settings/access-tokens': '/settings/api-keys', + '/messaging-queues': '/messaging-queues/overview', }; export const ROUTES_NOT_TO_BE_OVERRIDEN: string[] = [ diff --git a/frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.styles.scss b/frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.styles.scss index e3791267309..5273c4f8938 100644 --- a/frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.styles.scss +++ b/frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.styles.scss @@ -12,93 +12,138 @@ cursor: pointer; } -.celery-overview-table { - .ant-table { - .ant-table-thead > tr > th { - padding: 12px; - font-weight: 500; - font-size: 12px; - line-height: 18px; +.celery-overview-table-container { + width: 100%; - background: var(--bg-ink-500); - border-bottom: none; - - color: var(--Vanilla-400, #c0c1c3); - font-family: Inter; - font-size: 11px; - font-style: normal; - font-weight: 600; - line-height: 18px; /* 163.636% */ - letter-spacing: 0.44px; - text-transform: uppercase; - - &::before { - background-color: transparent; + > .ant-input-search { + margin-bottom: 8px; + } + + .celery-overview-table { + .ant-table { + .ant-table-thead > tr > th { + padding: 12px; + font-weight: 500; + font-size: 12px; + line-height: 18px; + + background: var(--bg-ink-500); + border-bottom: none; + + color: var(--Vanilla-400, #c0c1c3); + font-family: Inter; + font-size: 11px; + font-style: normal; + font-weight: 600; + line-height: 18px; /* 163.636% */ + letter-spacing: 0.44px; + text-transform: uppercase; + + &::before { + background-color: transparent; + } } - } - .ant-table-cell { - padding: 12px; - font-size: 13px; - line-height: 20px; - color: var(--bg-vanilla-100); - background: var(--bg-ink-500); - } + .ant-table-cell { + padding: 12px; + font-size: 13px; + line-height: 20px; + color: var(--bg-vanilla-100); + background: var(--bg-ink-500); + } - .progress-container { - .ant-progress-bg { - height: 8px !important; - border-radius: 4px; + .progress-container { + .ant-progress-bg { + height: 8px !important; + border-radius: 4px; + } } - } - .ant-table-tbody > tr:hover > td { - background: rgba(255, 255, 255, 0.04); - } + .ant-table-tbody > tr:hover > td { + background: rgba(255, 255, 255, 0.04); + } - .ant-table-cell:first-child { - text-align: justify; - } + .ant-table-cell:first-child { + text-align: justify; + } - .ant-table-cell:nth-child(2) { - padding-left: 16px; - padding-right: 16px; - } + .ant-table-cell:nth-child(2) { + padding-left: 16px; + padding-right: 16px; + } - .ant-table-cell:nth-child(n + 3) { - padding-right: 24px; - } - .column-header-right { - text-align: right; - } - .column-header-left { - text-align: left; + .ant-table-cell:nth-child(n + 3) { + padding-right: 24px; + } + .column-header-right { + text-align: right; + } + .column-header-left { + text-align: left; + } + .ant-table-tbody > tr > td { + border-bottom: none; + } } - .ant-table-tbody > tr > td { - border-bottom: none; + + .ant-pagination { + position: relative; + bottom: 0; + width: 100%; + background: var(--bg-ink-500); + padding: 4px; + margin: 0; + + // this is to offset intercom icon + padding-right: 72px; + + .ant-pagination-item { + border-radius: 4px; + + &-active { + background: var(--bg-robin-500); + border-color: var(--bg-robin-500); + + a { + color: var(--bg-ink-500) !important; + } + } + } } } +} - .ant-pagination { - position: relative; - bottom: 0; - width: 100%; - background: var(--bg-ink-500); - padding: 4px; - margin: 0; +.lightMode { + .celery-overview-table-container { + .celery-overview-table { + .ant-table { + .ant-table-thead > tr > th { + background: var(--bg-vanilla-100); + color: var(--text-ink-300); + } - // this is to offset intercom icon - padding-right: 72px; + .ant-table-cell { + background: var(--bg-vanilla-100); + color: var(--bg-ink-500); + } + + .ant-table-tbody > tr:hover > td { + background: rgba(0, 0, 0, 0.04); + } + } - .ant-pagination-item { - border-radius: 4px; + .ant-pagination { + background: var(--bg-vanilla-100); - &-active { - background: var(--bg-robin-500); - border-color: var(--bg-robin-500); + .ant-pagination-item { + &-active { + background: var(--bg-robin-500); + border-color: var(--bg-robin-500); - a { - color: var(--bg-ink-500) !important; + a { + color: var(--bg-vanilla-100) !important; + } + } } } } diff --git a/frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx b/frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx index d30df14eff9..685ee44f52a 100644 --- a/frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx +++ b/frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx @@ -400,6 +400,15 @@ export default function CeleryOverviewTable({ confirm(); }; + // Add defaultSorting state + const [sortedInfo, setSortedInfo] = useState<{ + columnKey: string; + order: 'ascend' | 'descend'; + }>({ + columnKey: 'error_percentage', + order: 'descend', + }); + const columns = useMemo( () => getDraggedColumns( @@ -411,10 +420,15 @@ export default function CeleryOverviewTable({ handleSearch, item.key?.toString(), ), + // Only set defaultSortOrder for error_percentage, but allow sorting for all columns + ...(item.key === 'error_percentage' && { + defaultSortOrder: 'descend', + }), + sortOrder: sortedInfo.columnKey === item.key ? sortedInfo.order : null, })), draggedColumns, ), - [tableData, draggedColumns], + [tableData, draggedColumns, sortedInfo], ); const handleDragColumn = useCallback( (fromIndex: number, toIndex: number) => @@ -459,7 +473,7 @@ export default function CeleryOverviewTable({ ]); return ( -
+
setSearchText(e.target.value)} @@ -488,6 +502,12 @@ export default function CeleryOverviewTable({ className: 'clickable-row', })} tableLayout="fixed" + onChange={(_pagination, _filters, sorter): void => { + setSortedInfo({ + columnKey: (sorter as { columnKey: string }).columnKey, + order: (sorter as { order: 'ascend' | 'descend' }).order, + }); + }} />
); diff --git a/frontend/src/components/CeleryTask/CeleryTaskConfigOptions/useGetCeleryFilters.ts b/frontend/src/components/CeleryTask/CeleryTaskConfigOptions/useGetCeleryFilters.ts index 9a513779e20..ff18d29f74e 100644 --- a/frontend/src/components/CeleryTask/CeleryTaskConfigOptions/useGetCeleryFilters.ts +++ b/frontend/src/components/CeleryTask/CeleryTaskConfigOptions/useGetCeleryFilters.ts @@ -8,6 +8,11 @@ import { DataSource } from 'types/common/queryBuilder'; export interface Filters { searchText: string; attributeKey: string | string[]; + aggregateOperator?: string; + dataSource?: DataSource; + aggregateAttribute?: string; + filterAttributeKeyDataType?: DataTypes; + tagType?: string; } export interface GetAllFiltersResponse { @@ -16,7 +21,15 @@ export interface GetAllFiltersResponse { } export function useGetAllFilters(props: Filters): GetAllFiltersResponse { - const { searchText, attributeKey } = props; + const { + searchText, + attributeKey, + aggregateOperator, + dataSource, + aggregateAttribute, + filterAttributeKeyDataType, + tagType, + } = props; const { data, isLoading } = useQuery( ['attributesValues', attributeKey, searchText], @@ -26,13 +39,14 @@ export function useGetAllFilters(props: Filters): GetAllFiltersResponse { const responses = await Promise.all( keys.map((key) => getAttributesValues({ - aggregateOperator: 'noop', - dataSource: DataSource.TRACES, - aggregateAttribute: '', + aggregateOperator: aggregateOperator || 'noop', + dataSource: dataSource || DataSource.TRACES, + aggregateAttribute: aggregateAttribute || '', attributeKey: key, searchText: searchText ?? '', - filterAttributeKeyDataType: DataTypes.String, - tagType: 'tag', + filterAttributeKeyDataType: + filterAttributeKeyDataType || DataTypes.String, + tagType: tagType || 'tag', }), ), ); diff --git a/frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.style.scss b/frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.style.scss index 7275b00cfb9..f48c1673a01 100644 --- a/frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.style.scss +++ b/frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.style.scss @@ -72,3 +72,51 @@ } } } + +.lightMode { + .celery-task-detail-drawer { + .ant-drawer-wrapper-body { + background: var(--bg-vanilla-100); + border: 1px solid var(--bg-vanilla-300); + } + + .ant-drawer-body { + .ant-card { + .ant-card-body { + background: var(--bg-vanilla-100); + + .ant-table { + background: var(--bg-vanilla-100); + } + } + } + } + + .ant-drawer-header { + border-bottom: 1px solid var(--bg-vanilla-300); + .ant-drawer-header-title { + button > svg { + color: var(--bg-ink-500); + } + + .ant-drawer-title { + .title { + color: var(--bg-ink-400); + } + + .subtitle { + color: var(--bg-ink-300); + } + } + } + } + + .ant-drawer-footer { + border-top: 1px solid var(--bg-vanilla-300); + + .footer-text { + color: var(--bg-ink-400); + } + } + } +} diff --git a/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.style.scss b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.style.scss index 55d17b8034e..74559eab970 100644 --- a/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.style.scss +++ b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.style.scss @@ -24,12 +24,53 @@ .widget-graph-container { &.bar { - height: calc(100% - 105px); + height: calc(100% - 110px); } } } } + .celery-task-graph-worker-count { + height: 100%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + border: 1px solid var(--bg-slate-500); + background: linear-gradient( + 0deg, + rgba(171, 189, 255, 0) 0%, + rgba(171, 189, 255, 0) 100% + ), + #0b0c0e; + + .ant-card-body { + height: 100%; + width: 100%; + } + + .worker-count-text-container { + height: 100%; + display: flex; + justify-content: center; + align-items: center; + + .celery-task-graph-worker-count-text { + font-size: 2.5vw; + text-align: center; + } + } + + .worker-count-header { + display: flex; + justify-content: start; + align-items: start; + position: absolute; + height: 100%; + width: 100%; + } + } + .celery-task-graph-bar, .celery-task-graph-task-latency { height: 380px !important; @@ -46,7 +87,7 @@ .widget-graph-container { &.bar { - height: calc(100% - 105px); + height: calc(100% - 110px); } &.graph { @@ -126,3 +167,40 @@ background-color: var(--bg-vanilla-100); } } + +.lightMode { + .celery-task-graph-grid-container { + .celery-task-graph-grid { + .celery-task-graph-worker-count { + border: 1px solid var(--bg-vanilla-300); + background: unset; + } + } + } + + .celery-task-states { + border-bottom: 1px solid var(--bg-vanilla-300); + + &__tab { + &:not([data-last-tab='true']) { + border-right: 1px solid var(--bg-vanilla-300); + } + + &--selected { + background-color: var(--bg-vanilla-200); + } + } + + &__label { + color: var(--bg-ink-500); + } + + &__value { + color: var(--bg-slate-100); + } + + &__indicator { + background-color: var(--bg-ink-400); + } + } +} diff --git a/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphGrid.tsx b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphGrid.tsx index e4accd0d5a9..0ee664434e3 100644 --- a/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphGrid.tsx +++ b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphGrid.tsx @@ -1,11 +1,15 @@ import './CeleryTaskGraph.style.scss'; +import { Card, Typography } from 'antd'; import { useMemo } from 'react'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; +import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse'; +import { DataSource } from 'types/common/queryBuilder'; import { GlobalReducer } from 'types/reducer/globalTime'; import { CaptureDataProps } from '../CeleryTaskDetail/CeleryTaskDetail'; +import { useCeleryFilterOptions } from '../useCeleryFilterOptions'; import CeleryTaskBar from './CeleryTaskBar'; import CeleryTaskGraph from './CeleryTaskGraph'; import { @@ -13,7 +17,6 @@ import { celeryErrorByWorkerWidgetData, celeryLatencyByWorkerWidgetData, celeryTasksByWorkerWidgetData, - celeryWorkerOnlineWidgetData, } from './CeleryTaskGraphUtils'; import CeleryTaskLatencyGraph from './CeleryTaskLatencyGraph'; @@ -28,11 +31,6 @@ export default function CeleryTaskGraphGrid({ (state) => state.globalTime, ); - const celeryWorkerOnlineData = useMemo( - () => celeryWorkerOnlineWidgetData(minTime, maxTime), - [minTime, maxTime], - ); - const celeryActiveTasksData = useMemo( () => celeryActiveTasksWidgetData(minTime, maxTime), [minTime, maxTime], @@ -65,15 +63,31 @@ export default function CeleryTaskGraphGrid({ 'Latency by worker', ]; + const { options } = useCeleryFilterOptions( + 'worker', + 'rate', + DataSource.METRICS, + 'flower_task_runtime_seconds_sum', + DataTypes.String, + 'tag', + ); + return (
- + +
+ + Worker Count + +
+
+ + {options.filter((option) => option.value).length} + +
+
diff --git a/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphUtils.ts b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphUtils.ts index a82274430d4..96f9565a40a 100644 --- a/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphUtils.ts +++ b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphUtils.ts @@ -490,49 +490,6 @@ export const celeryActiveTasksWidgetData = ( }), ); -export const celeryWorkerOnlineWidgetData = ( - startTime: number, - endTime: number, -): Widgets => - getWidgetQueryBuilder( - getWidgetQuery({ - title: 'Worker Online', - description: 'Represents the number of workers online.', - panelTypes: PANEL_TYPES.VALUE, - queryData: [ - { - aggregateAttribute: { - dataType: DataTypes.Float64, - id: 'flower_task_runtime_seconds_sum--float64--Sum--true', - isColumn: true, - isJSON: false, - key: 'flower_task_runtime_seconds_sum', - type: 'Sum', - }, - aggregateOperator: 'rate', - dataSource: DataSource.METRICS, - disabled: false, - expression: 'A', - filters: { - items: [], - op: 'AND', - }, - functions: [], - groupBy: [], - having: [], - legend: '', - limit: null, - orderBy: [], - queryName: 'A', - reduceTo: 'avg', - spaceAggregation: 'sum', - stepInterval: getStepInterval(startTime, endTime), - timeAggregation: 'rate', - }, - ], - }), - ); - export const celeryTaskLatencyWidgetData = ( type: string, startTime: number, diff --git a/frontend/src/components/CeleryTask/useCeleryFilterOptions.ts b/frontend/src/components/CeleryTask/useCeleryFilterOptions.ts index a2cc2628036..1aadcb3d8b8 100644 --- a/frontend/src/components/CeleryTask/useCeleryFilterOptions.ts +++ b/frontend/src/components/CeleryTask/useCeleryFilterOptions.ts @@ -1,11 +1,18 @@ import { DefaultOptionType } from 'antd/es/select'; import useDebouncedFn from 'hooks/useDebouncedFunction'; import { useState } from 'react'; +import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse'; +import { DataSource } from 'types/common/queryBuilder'; import { useGetAllFilters } from './CeleryTaskConfigOptions/useGetCeleryFilters'; export const useCeleryFilterOptions = ( type: string | string[], + aggregateOperator?: string, + dataSource?: DataSource, + aggregateAttribute?: string, + filterAttributeKeyDataType?: DataTypes, + tagType?: string, ): { searchText: string; handleSearch: (value: string) => void; @@ -16,6 +23,11 @@ export const useCeleryFilterOptions = ( const { isFetching, options } = useGetAllFilters({ attributeKey: type, searchText, + aggregateOperator, + dataSource, + aggregateAttribute, + filterAttributeKeyDataType, + tagType, }); const handleDebouncedSearch = useDebouncedFn((searchText): void => { setSearchText(searchText as string); diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts index b90cd9b916b..bd6a4f97bca 100644 --- a/frontend/src/constants/routes.ts +++ b/frontend/src/constants/routes.ts @@ -59,8 +59,8 @@ const ROUTES = { WORKSPACE_SUSPENDED: '/workspace-suspended', SHORTCUTS: '/shortcuts', INTEGRATIONS: '/integrations', - MESSAGING_QUEUES: '/messaging-queues', - MESSAGING_QUEUES_DETAIL: '/messaging-queues/detail', + MESSAGING_QUEUES_KAFKA: '/messaging-queues/kafka', + MESSAGING_QUEUES_KAFKA_DETAIL: '/messaging-queues/kafka/detail', INFRASTRUCTURE_MONITORING_HOSTS: '/infrastructure-monitoring/hosts', INFRASTRUCTURE_MONITORING_KUBERNETES: '/infrastructure-monitoring/kubernetes', MESSAGING_QUEUES_CELERY_TASK: '/messaging-queues/celery-task', diff --git a/frontend/src/container/AppLayout/index.tsx b/frontend/src/container/AppLayout/index.tsx index d846165f8f0..e8a08326923 100644 --- a/frontend/src/container/AppLayout/index.tsx +++ b/frontend/src/container/AppLayout/index.tsx @@ -287,8 +287,8 @@ function AppLayout(props: AppLayoutProps): JSX.Element { routeKey === 'TRACES_EXPLORER' || routeKey === 'TRACES_SAVE_VIEWS'; const isMessagingQueues = (): boolean => - routeKey === 'MESSAGING_QUEUES' || - routeKey === 'MESSAGING_QUEUES_DETAIL' || + routeKey === 'MESSAGING_QUEUES_KAFKA' || + routeKey === 'MESSAGING_QUEUES_KAFKA_DETAIL' || routeKey === 'MESSAGING_QUEUES_CELERY_TASK' || routeKey === 'MESSAGING_QUEUES_OVERVIEW'; diff --git a/frontend/src/container/GridTableComponent/index.tsx b/frontend/src/container/GridTableComponent/index.tsx index db3d72a9749..0bcefbb7ad8 100644 --- a/frontend/src/container/GridTableComponent/index.tsx +++ b/frontend/src/container/GridTableComponent/index.tsx @@ -23,21 +23,15 @@ import { TableData, } from './utils'; -export const HoverButtonWrapper = styled.div` +const ButtonWrapper = styled.div` position: absolute; right: 0; top: 50%; transform: translateY(-50%); - opacity: 0; - transition: opacity 0.2s; `; const RelativeWrapper = styled.div` position: relative; - - &:hover ${HoverButtonWrapper} { - opacity: 1; - } `; function GridTableComponent({ @@ -206,12 +200,12 @@ function GridTableComponent({ return ( {LineClampedTextComponent} - + - + ); }, diff --git a/frontend/src/container/SideNav/SideNav.tsx b/frontend/src/container/SideNav/SideNav.tsx index 982a30e3c6d..a5761ec0d8a 100644 --- a/frontend/src/container/SideNav/SideNav.tsx +++ b/frontend/src/container/SideNav/SideNav.tsx @@ -239,7 +239,7 @@ function SideNav(): JSX.Element { ); registerShortcut(GlobalShortcuts.NavigateToMessagingQueues, () => - onClickHandler(ROUTES.MESSAGING_QUEUES, null), + onClickHandler(ROUTES.MESSAGING_QUEUES_OVERVIEW, null), ); registerShortcut(GlobalShortcuts.NavigateToAlerts, () => diff --git a/frontend/src/container/SideNav/config.ts b/frontend/src/container/SideNav/config.ts index 875fb31b6b7..df86d3a16eb 100644 --- a/frontend/src/container/SideNav/config.ts +++ b/frontend/src/container/SideNav/config.ts @@ -49,8 +49,8 @@ export const routeConfig: Record = { [ROUTES.TRACE_EXPLORER]: [QueryParams.resourceAttributes], [ROUTES.LOGS_PIPELINES]: [QueryParams.resourceAttributes], [ROUTES.WORKSPACE_LOCKED]: [QueryParams.resourceAttributes], - [ROUTES.MESSAGING_QUEUES]: [QueryParams.resourceAttributes], - [ROUTES.MESSAGING_QUEUES_DETAIL]: [QueryParams.resourceAttributes], + [ROUTES.MESSAGING_QUEUES_KAFKA]: [QueryParams.resourceAttributes], + [ROUTES.MESSAGING_QUEUES_KAFKA_DETAIL]: [QueryParams.resourceAttributes], [ROUTES.MESSAGING_QUEUES_CELERY_TASK]: [QueryParams.resourceAttributes], [ROUTES.MESSAGING_QUEUES_OVERVIEW]: [QueryParams.resourceAttributes], [ROUTES.INFRASTRUCTURE_MONITORING_HOSTS]: [QueryParams.resourceAttributes], diff --git a/frontend/src/container/SideNav/menuItems.tsx b/frontend/src/container/SideNav/menuItems.tsx index 0c7230cb503..c2b8f3c401c 100644 --- a/frontend/src/container/SideNav/menuItems.tsx +++ b/frontend/src/container/SideNav/menuItems.tsx @@ -94,7 +94,7 @@ const menuItems: SidebarItem[] = [ icon: , }, { - key: ROUTES.MESSAGING_QUEUES, + key: ROUTES.MESSAGING_QUEUES_OVERVIEW, label: 'Messaging Queues', icon: , }, diff --git a/frontend/src/container/TopNav/Breadcrumbs/index.tsx b/frontend/src/container/TopNav/Breadcrumbs/index.tsx index f234d7335f0..771505cc8cc 100644 --- a/frontend/src/container/TopNav/Breadcrumbs/index.tsx +++ b/frontend/src/container/TopNav/Breadcrumbs/index.tsx @@ -29,7 +29,7 @@ const breadcrumbNameMap: Record = { [ROUTES.SUPPORT]: 'Support', [ROUTES.WORKSPACE_LOCKED]: 'Workspace Locked', [ROUTES.WORKSPACE_SUSPENDED]: 'Workspace Suspended', - [ROUTES.MESSAGING_QUEUES]: 'Messaging Queues', + [ROUTES.MESSAGING_QUEUES_OVERVIEW]: 'Messaging Queues', }; function ShowBreadcrumbs(props: RouteComponentProps): JSX.Element { diff --git a/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts b/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts index f844d7f07d5..56ca05c94b9 100644 --- a/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts +++ b/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts @@ -212,8 +212,8 @@ export const routesToSkip = [ ROUTES.SERVICE_TOP_LEVEL_OPERATIONS, ROUTES.ALERT_HISTORY, ROUTES.ALERT_OVERVIEW, - ROUTES.MESSAGING_QUEUES, - ROUTES.MESSAGING_QUEUES_DETAIL, + ROUTES.MESSAGING_QUEUES_KAFKA, + ROUTES.MESSAGING_QUEUES_KAFKA_DETAIL, ROUTES.MESSAGING_QUEUES_CELERY_TASK, ROUTES.MESSAGING_QUEUES_OVERVIEW, ROUTES.INFRASTRUCTURE_MONITORING_HOSTS, diff --git a/frontend/src/pages/Celery/CeleryOverview/CeleryOverview.styles.scss b/frontend/src/pages/Celery/CeleryOverview/CeleryOverview.styles.scss index d31f533d15f..a10524ea7f8 100644 --- a/frontend/src/pages/Celery/CeleryOverview/CeleryOverview.styles.scss +++ b/frontend/src/pages/Celery/CeleryOverview/CeleryOverview.styles.scss @@ -1,22 +1,4 @@ .celery-overview-container { - .celery-overview-breadcrumb { - display: flex; - padding: 0px 16px; - align-items: center; - gap: 8px; - padding-top: 10px; - padding-bottom: 8px; - color: var(--bg-vanilla-400); - font-family: Inter; - font-size: 14px; - font-style: normal; - font-weight: 400; - line-height: 20px; - letter-spacing: -0.07px; - - border-bottom: 1px solid var(--bg-slate-400); - } - .celery-overview-content { display: flex; flex-direction: column; @@ -42,3 +24,15 @@ } } } + +.lightMode { + .celery-overview-container { + .celery-overview-content { + .celery-overview-content-header { + .celery-overview-content-header-title { + color: var(--bg-slate-200); + } + } + } + } +} diff --git a/frontend/src/pages/Celery/CeleryOverview/CeleryOverviewDetail/CeleryOverviewDetails.styles.scss b/frontend/src/pages/Celery/CeleryOverview/CeleryOverviewDetail/CeleryOverviewDetails.styles.scss index 81964618281..c2e0aac0b88 100644 --- a/frontend/src/pages/Celery/CeleryOverview/CeleryOverviewDetail/CeleryOverviewDetails.styles.scss +++ b/frontend/src/pages/Celery/CeleryOverview/CeleryOverviewDetail/CeleryOverviewDetails.styles.scss @@ -28,3 +28,16 @@ } } } + +.lightMode { + .overview-right-panel-graph-card { + border: 1px solid var(--bg-vanilla-300) !important; + background: var(--bg-vanilla-100); + + .request-rate-card, + .error-rate-card, + .avg-latency-card { + border-bottom: 0.75px solid var(--bg-vanilla-300); + } + } +} diff --git a/frontend/src/pages/Celery/CeleryOverview/CeleryOverviewDetail/CeleryOverviewDetails.tsx b/frontend/src/pages/Celery/CeleryOverview/CeleryOverviewDetail/CeleryOverviewDetails.tsx index 7fd5ab0b473..26677556c03 100644 --- a/frontend/src/pages/Celery/CeleryOverview/CeleryOverviewDetail/CeleryOverviewDetails.tsx +++ b/frontend/src/pages/Celery/CeleryOverview/CeleryOverviewDetail/CeleryOverviewDetails.tsx @@ -29,7 +29,9 @@ export default function CeleryOverviewDetails({ case 'span_name': return getFiltersFromKeyValue('name', value, ''); case 'messaging_system': - return getFiltersFromKeyValue('messaging.system', value, 'tag'); + return value === 'celery' + ? undefined + : getFiltersFromKeyValue('messaging.system', value, 'tag'); case 'destination': return getFiltersFromKeyValue( details.messaging_system === 'celery' @@ -48,12 +50,6 @@ export default function CeleryOverviewDetails({ return keyValues.filter((item) => item !== undefined) as TagFilterItem[]; }, [details]); - const groupByFilter = useMemo( - () => - getFiltersFromKeyValue('messaging.destination.partition.id', '', 'tag').key, - [], - ); - return (
- +
); diff --git a/frontend/src/pages/Celery/CeleryOverview/CeleryOverviewDetail/ValueInfo.styles.scss b/frontend/src/pages/Celery/CeleryOverview/CeleryOverviewDetail/ValueInfo.styles.scss index 8d42c449d6f..ff67876460b 100644 --- a/frontend/src/pages/Celery/CeleryOverview/CeleryOverviewDetail/ValueInfo.styles.scss +++ b/frontend/src/pages/Celery/CeleryOverview/CeleryOverviewDetail/ValueInfo.styles.scss @@ -49,6 +49,8 @@ margin-top: 8px; background: #262626; border: none; + box-shadow: none; + border-radius: 4px; &:hover { background: #404040; @@ -61,3 +63,32 @@ } } } + +.lightMode { + .value-info-card { + border: 1px solid var(--bg-vanilla-300) !important; + background: var(--bg-vanilla-100); + + .metric-column { + .metric-title { + color: var(--bg-slate-100); + } + + .metric-unit { + color: var(--bg-ink-500); + } + + .metric-reference { + color: var(--bg-ink-500); + } + + .trace-button { + background: var(--bg-slate-200); + + &:hover { + background: var(--bg-slate-100); + } + } + } + } +} diff --git a/frontend/src/pages/Celery/CeleryTask/CeleryTask.styles.scss b/frontend/src/pages/Celery/CeleryTask/CeleryTask.styles.scss index 03d53af4489..97711285061 100644 --- a/frontend/src/pages/Celery/CeleryTask/CeleryTask.styles.scss +++ b/frontend/src/pages/Celery/CeleryTask/CeleryTask.styles.scss @@ -1,22 +1,4 @@ .celery-task-container { - .celery-task-breadcrumb { - display: flex; - padding: 0px 16px; - align-items: center; - gap: 8px; - padding-top: 10px; - padding-bottom: 8px; - color: var(--bg-vanilla-400); - font-family: Inter; - font-size: 14px; - font-style: normal; - font-weight: 400; - line-height: 20px; - letter-spacing: -0.07px; - - border-bottom: 1px solid var(--bg-slate-400); - } - .celery-content { display: flex; flex-direction: column; @@ -42,3 +24,15 @@ } } } + +.lightMode { + .celery-task-container { + .celery-content { + .celery-content-header { + .celery-content-header-title { + color: var(--bg-slate-200); + } + } + } + } +} diff --git a/frontend/src/pages/MessagingQueues/MQDetailPage/MQDetailPage.tsx b/frontend/src/pages/MessagingQueues/MQDetailPage/MQDetailPage.tsx index 5793d40b7b2..6b542f2a4b3 100644 --- a/frontend/src/pages/MessagingQueues/MQDetailPage/MQDetailPage.tsx +++ b/frontend/src/pages/MessagingQueues/MQDetailPage/MQDetailPage.tsx @@ -1,13 +1,12 @@ /* eslint-disable no-nested-ternary */ import '../MessagingQueues.styles.scss'; -import { Select, Typography } from 'antd'; +import { Select } from 'antd'; import logEvent from 'api/common/logEvent'; import { QueryParams } from 'constants/query'; import ROUTES from 'constants/routes'; import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2'; import useUrlQuery from 'hooks/useUrlQuery'; -import { ListMinus } from 'lucide-react'; import { useEffect, useState } from 'react'; import { useHistory } from 'react-router-dom'; @@ -65,20 +64,27 @@ function MQDetailPage(): JSX.Element { selectedView !== MessagingQueuesViewType.dropRate.value && selectedView !== MessagingQueuesViewType.metricPage.value; + const handleBackClick = (): void => { + history.push(ROUTES.MESSAGING_QUEUES_KAFKA); + }; + return (
-
- - history.push(ROUTES.MESSAGING_QUEUES)} - className="message-queue-text" - > - Messaging Queues - -
- Kafka / views / +
{ + if (e.key === 'Enter' || e.key === ' ') { + handleBackClick(); + } + }} + role="button" + tabIndex={0} + > + Kafka / views / +