Skip to content

Commit

Permalink
feat: added worker count and other misc changes (#6951)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@SagarRajput-7
SagarRajput-7 authored Jan 29, 2025
1 parent 36f91d1 commit fb3b70b
Show file tree
Hide file tree
Showing 27 changed files with 460 additions and 258 deletions.
13 changes: 7 additions & 6 deletions frontend/src/AppRoutes/routes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ import {
LogsExplorer,
LogsIndexToFields,
LogsSaveViews,
MQDetailPage,
MySettings,
NewDashboardPage,
OldLogsExplorer,
Expand Down Expand Up @@ -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,
},
{
Expand All @@ -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,
},
{
Expand Down Expand Up @@ -461,6 +460,7 @@ export const oldRoutes = [
'/logs-save-views',
'/traces-save-views',
'/settings/access-tokens',
'/messaging-queues',
];

export const oldNewRoutesMapping: Record<string, string> = {
Expand All @@ -470,6 +470,7 @@ export const oldNewRoutesMapping: Record<string, string> = {
'/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[] = [
Expand Down
185 changes: 115 additions & 70 deletions frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
}
}
Expand Down
24 changes: 22 additions & 2 deletions frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<RowData>(
Expand All @@ -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) =>
Expand Down Expand Up @@ -459,7 +473,7 @@ export default function CeleryOverviewTable({
]);

return (
<div style={{ width: '100%' }}>
<div className="celery-overview-table-container">
<Input.Search
placeholder="Search across all columns"
onChange={(e): void => setSearchText(e.target.value)}
Expand Down Expand Up @@ -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,
});
}}
/>
</div>
);
Expand Down
26 changes: 20 additions & 6 deletions frontend/src/components/CeleryTask/CeleryTaskConfigOptions/useGetCeleryFilters.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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],
Expand All @@ -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',
}),
),
);
Expand Down
Loading

0 comments on commit fb3b70b

Please sign in to comment.