Skip to content

Commit 50a0fe7

Browse files
arunjaindevarunjaindev
authored
Merge pull request #2726 from devtron-labs/feature/canary-visibility
feat: manual canary control & its visibility
2 parents 88ce0c3 + e87e6e9 commit 50a0fe7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+1165
-824
lines changed

‎.env

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,4 +69,5 @@ FEATURE_DEFAULT_AUTHENTICATED_VIEW_ENABLE=false
6969
GATEKEEPER_URL=https://license.devtron.ai/dashboard
7070
FEATURE_AI_INTEGRATION_ENABLE=false
7171
LOGIN_PAGE_IMAGE=
72+
FEATURE_MANAGE_TRAFFIC_ENABLE=false
7273
FEATURE_REDFISH_NODE_ENABLE=false

‎.eslintignore

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,8 @@ vite.config.mts
99
src/Pages/GlobalConfigurations/Authorization/APITokens/__tests__/ApiTokens.test.tsx
1010
src/components/AppSelector/ChartSelector.tsx
1111
src/components/ApplicationGroup/AppGroup.service.ts
12-
src/components/ApplicationGroup/AppGroup.types.ts
1312
src/components/ApplicationGroup/AppGroup.utils.ts
1413
src/components/ApplicationGroup/AppGroupAppFilter.components.tsx
15-
src/components/ApplicationGroup/AppGroupAppFilter.tsx
1614
src/components/ApplicationGroup/AppGroupDetailsRoute.tsx
1715
src/components/ApplicationGroup/AppGroupRoute.tsx
1816
src/components/ApplicationGroup/Constants.ts
@@ -23,7 +21,6 @@ src/components/ApplicationGroup/Details/EnvCIDetails/EnvCIDetails.tsx
2321
src/components/ApplicationGroup/Details/EnvCIDetails/__test__/EnvCIDetails.test.tsx
2422
src/components/ApplicationGroup/Details/EnvironmentConfig/__test__/ApplicationRoutes.test.tsx
2523
src/components/ApplicationGroup/Details/EnvironmentConfig/__test__/EnvConfig.test.tsx
26-
src/components/ApplicationGroup/Details/EnvironmentOverview/EnvironmentOverview.tsx
2724
src/components/ApplicationGroup/Details/EnvironmentOverview/HibernateModal.tsx
2825
src/components/ApplicationGroup/Details/EnvironmentOverview/HibernateStatusListDrawer.tsx
2926
src/components/ApplicationGroup/Details/EnvironmentOverview/HibernateStatusRow.tsx

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{
22
"name": "dashboard",
3-
"version": "1.10.0",
3+
"version": "1.14.2",
44
"private": true,
55
"homepage": "/dashboard",
66
"dependencies": {
7-
"@devtron-labs/devtron-fe-common-lib": "1.14.1",
7+
"@devtron-labs/devtron-fe-common-lib": "1.14.2",
88
"@esbuild-plugins/node-globals-polyfill": "0.2.3",
99
"@rjsf/core": "^5.13.3",
1010
"@rjsf/utils": "^5.13.3",

‎src/Pages/Shared/EnvironmentOverviewTable/EnvironmentOverview.constants.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,3 +45,5 @@ export const EnvironmentOverviewTableHeaderValues: Record<keyof typeof Environme
4545
DEPLOYED_BY: 'DEPLOYED BY',
4646
STATUS: null,
4747
}
48+
49+
export const ENVIRONMENT_OVERVIEW_DRAG_SELECTOR_IDENTIFIER = 'environment-overview-drag-selector'

‎src/Pages/Shared/EnvironmentOverviewTable/EnvironmentOverviewBulkSelectionActionWidget.tsx

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
/*
2+
* Copyright (c) 2024. Devtron Inc.
3+
*/
4+
5+
import { useEffect } from 'react'
6+
7+
import {
8+
Button,
9+
ButtonStyleType,
10+
ButtonVariantType,
11+
ComponentSizeType,
12+
DraggableButton,
13+
DraggablePositionVariant,
14+
DraggableWrapper,
15+
Icon,
16+
useRegisterShortcut,
17+
} from '@devtron-labs/devtron-fe-common-lib'
18+
19+
import { ENVIRONMENT_OVERVIEW_DRAG_SELECTOR_IDENTIFIER } from './EnvironmentOverview.constants'
20+
import { EnvironmentOverviewPopupMenu } from './EnvironmentOverviewPopupMenu'
21+
import { EnvironmentOverviewBulkSelectionWidgetProps } from './EnvironmentOverviewTable.types'
22+
23+
export const EnvironmentOverviewBulkSelectionWidget = ({
24+
count,
25+
onClose,
26+
parentRef,
27+
popUpMenuItems,
28+
children,
29+
}: EnvironmentOverviewBulkSelectionWidgetProps) => {
30+
const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
31+
32+
useEffect(() => {
33+
registerShortcut({ keys: ['Escape'], callback: onClose })
34+
35+
return () => {
36+
unregisterShortcut(['Escape'])
37+
}
38+
}, [])
39+
40+
return (
41+
<DraggableWrapper
42+
dragSelector={`.${ENVIRONMENT_OVERVIEW_DRAG_SELECTOR_IDENTIFIER}`}
43+
positionVariant={DraggablePositionVariant.PARENT_BOTTOM_CENTER}
44+
zIndex="calc(var(--modal-index) - 1)"
45+
parentRef={parentRef}
46+
>
47+
<div className="bulk-selection-widget br-8 pl-7 pr-11 py-11 flex dc__gap-8">
48+
<DraggableButton dragClassName={ENVIRONMENT_OVERVIEW_DRAG_SELECTOR_IDENTIFIER} />
49+
<div className="flex dc__gap-8 fs-13 lh-20 fw-6">
50+
<span className="bcb-5 br-4 px-6 cn-0">{count}</span>
51+
<span className="cn-9">Selected</span>
52+
</div>
53+
<div className="w-1 h-20 bcb-1" />
54+
{children}
55+
{popUpMenuItems.length > 0 && <EnvironmentOverviewPopupMenu popUpMenuItems={popUpMenuItems} />}
56+
<div className="w-1 h-20 bcb-1" />
57+
<Button
58+
icon={<Icon name="ic-close-large" color={null} />}
59+
dataTestId="environment-overview-table-action-widget-close"
60+
style={ButtonStyleType.negativeGrey}
61+
variant={ButtonVariantType.borderLess}
62+
ariaLabel="Clear selection(s)"
63+
size={ComponentSizeType.small}
64+
onClick={onClose}
65+
showAriaLabelInTippy={false}
66+
/>
67+
</div>
68+
</DraggableWrapper>
69+
)
70+
}

‎src/Pages/Shared/EnvironmentOverviewTable/EnvironmentOverviewPopupMenu.tsx

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
// TODO: Replace this with ActionMenu component
2+
import {
3+
Button,
4+
ButtonStyleType,
5+
ButtonVariantType,
6+
ComponentSizeType,
7+
Icon,
8+
PopupMenu,
9+
} from '@devtron-labs/devtron-fe-common-lib'
10+
11+
import { EnvironmentOverviewTableRow } from './EnvironmentOverviewTable.types'
12+
13+
export const EnvironmentOverviewPopupMenu = ({
14+
popUpMenuItems,
15+
}: Pick<EnvironmentOverviewTableRow, 'popUpMenuItems'>) => (
16+
<PopupMenu autoClose>
17+
<PopupMenu.Button isKebab rootClassName="p-0 dc__no-border cursor">
18+
<Button
19+
icon={<Icon name="ic-more-vertical" color={null} />}
20+
dataTestId="environment-overview-pop-up-menu"
21+
style={ButtonStyleType.neutral}
22+
variant={ButtonVariantType.borderLess}
23+
ariaLabel="environment-overview-pop-up-menu"
24+
size={ComponentSizeType.xs}
25+
showAriaLabelInTippy={false}
26+
/>
27+
</PopupMenu.Button>
28+
<PopupMenu.Body rootClassName="dc__border py-4 w-180">
29+
{popUpMenuItems.map((popUpMenuItem) => {
30+
if ('label' in popUpMenuItem) {
31+
const { label, onClick, disabled, iconName } = popUpMenuItem
32+
33+
return (
34+
<button
35+
key={label}
36+
type="button"
37+
className={`dc__transparent w-100 py-6 px-8 flexbox dc__align-items-center dc__gap-8 ${disabled ? ' dc__opacity-0_5 cursor-not-allowed' : 'dc__hover-n50'}`}
38+
onClick={onClick}
39+
disabled={disabled}
40+
>
41+
{iconName && <Icon name={iconName} color="N800" />}
42+
<span className="dc__truncate cn-9 fs-13 lh-20">{label}</span>
43+
</button>
44+
)
45+
}
46+
47+
return popUpMenuItem
48+
})}
49+
</PopupMenu.Body>
50+
</PopupMenu>
51+
)

‎src/Pages/Shared/EnvironmentOverviewTable/EnvironmentOverviewTable.component.tsx

Lines changed: 8 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ import {
2525
getRandomColor,
2626
handleRelativeDateSorting,
2727
ImageChipCell,
28-
PopupMenu,
2928
processDeployedTime,
3029
RegistryType,
3130
SortableTableHeaderCell,
@@ -38,56 +37,18 @@ import {
3837
import { ReactComponent as ICActivity } from '@Icons/ic-activity.svg'
3938
import { ReactComponent as ICArrowLineDown } from '@Icons/ic-arrow-line-down.svg'
4039
import { ReactComponent as DevtronIcon } from '@Icons/ic-devtron-app.svg'
41-
import { ReactComponent as ICMoreOption } from '@Icons/ic-more-option.svg'
4240

4341
import {
4442
EnvironmentOverviewTableHeaderFixedKeys,
4543
EnvironmentOverviewTableHeaderValues,
4644
EnvironmentOverviewTableHeaderVariableKeys,
4745
EnvironmentOverviewTableSortableKeys,
4846
} from './EnvironmentOverview.constants'
49-
import {
50-
EnvironmentOverviewTableProps,
51-
EnvironmentOverviewTableRow,
52-
EnvironmentOverviewTableRowData,
53-
} from './EnvironmentOverviewTable.types'
47+
import { EnvironmentOverviewPopupMenu } from './EnvironmentOverviewPopupMenu'
48+
import { EnvironmentOverviewTableProps, EnvironmentOverviewTableRowData } from './EnvironmentOverviewTable.types'
5449

5550
import './EnvironmentOverviewTable.scss'
5651

57-
const renderPopUpMenu = (items: EnvironmentOverviewTableRow['popUpMenuItems']) => (
58-
<PopupMenu autoClose>
59-
<PopupMenu.Button isKebab rootClassName="p-4 flex dc__no-border cursor">
60-
<ICMoreOption className="icon-dim-16 fcn-6 rotateBy--90" />
61-
</PopupMenu.Button>
62-
<PopupMenu.Body rootClassName="dc__border py-4 w-180">
63-
{items.map((popUpMenuItem) => {
64-
if ('label' in popUpMenuItem) {
65-
const { label, onClick, disabled, Icon, iconType = 'fill' } = popUpMenuItem
66-
67-
return (
68-
<button
69-
key={label}
70-
type="button"
71-
className={`dc__transparent w-100 py-6 px-8 flexbox dc__align-items-center dc__gap-8 ${disabled ? ' dc__opacity-0_5 cursor-not-allowed' : 'dc__hover-n50'}`}
72-
onClick={onClick}
73-
disabled={disabled}
74-
>
75-
{Icon && (
76-
<Icon
77-
className={`icon-dim-16 ${iconType === 'fill' ? 'fcn-7' : ''} ${iconType === 'stroke' ? 'scn-7' : ''}`}
78-
/>
79-
)}
80-
<span className="dc__truncate cn-9 fs-13 lh-20">{label}</span>
81-
</button>
82-
)
83-
}
84-
85-
return popUpMenuItem
86-
})}
87-
</PopupMenu.Body>
88-
</PopupMenu>
89-
)
90-
9152
export const EnvironmentOverviewTable = ({
9253
rows = [],
9354
isVirtualEnv,
@@ -108,10 +69,10 @@ export const EnvironmentOverviewTable = ({
10869
() =>
10970
rows.sort((a, b) => {
11071
if (sortBy === EnvironmentOverviewTableSortableKeys.DEPLOYED_AT) {
111-
return handleRelativeDateSorting(a.environment.deployedAt, b.environment.deployedAt, sortOrder)
72+
return handleRelativeDateSorting(a.app.deployedAt, b.app.deployedAt, sortOrder)
11273
}
11374

114-
return stringComparatorBySortOrder(a.environment.name, b.environment.name, sortOrder)
75+
return stringComparatorBySortOrder(a.app.name, b.app.name, sortOrder)
11576
}),
11677
[rows, sortBy, sortOrder],
11778
)
@@ -202,15 +163,15 @@ export const EnvironmentOverviewTable = ({
202163
)
203164

204165
const renderRow = ({
205-
environment,
166+
app,
206167
isChecked,
207168
deployedAtLink,
208169
redirectLink,
209170
onCommitClick,
210171
onLastDeployedImageClick,
211172
popUpMenuItems = [],
212173
}: EnvironmentOverviewTableProps['rows'][0]) => {
213-
const { id, name, status, commits, deployedAt, deployedBy, deploymentStatus, lastDeployedImage } = environment
174+
const { id, name, status, commits, deployedAt, deployedBy, deploymentStatus, lastDeployedImage } = app
214175

215176
return (
216177
<div className={`environment-overview-table__row ${isChecked ? isCheckedRowClassName : ''}`}>
@@ -231,7 +192,7 @@ export const EnvironmentOverviewTable = ({
231192
{name}
232193
</Link>
233194
</Tooltip>
234-
{!!popUpMenuItems?.length && renderPopUpMenu(popUpMenuItems)}
195+
{!!popUpMenuItems?.length && <EnvironmentOverviewPopupMenu popUpMenuItems={popUpMenuItems} />}
235196
</div>
236197
</div>
237198
<div
@@ -283,7 +244,7 @@ export const EnvironmentOverviewTable = ({
283244
<div className="environment-overview-table dc__border br-4 bg__primary w-100">
284245
{renderHeaderRow()}
285246
{sortedRows.map((row) => (
286-
<Fragment key={row.environment.id}>{renderRow(row)}</Fragment>
247+
<Fragment key={row.app.id}>{renderRow(row)}</Fragment>
287248
))}
288249
</div>
289250
)

‎src/Pages/Shared/EnvironmentOverviewTable/EnvironmentOverviewTable.types.ts

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { FunctionComponent, MouseEvent, ReactElement, SVGProps } from 'react'
17+
import { MouseEvent, MutableRefObject, PropsWithChildren, ReactElement } from 'react'
18+
19+
import { IconName } from '@devtron-labs/devtron-fe-common-lib'
1820

1921
import { EnvironmentOverviewTableHeaderKeys } from './EnvironmentOverview.constants'
2022

@@ -32,15 +34,14 @@ export interface EnvironmentOverviewTableRowData {
3234
export type EnvironmentOverviewTablePopUpMenuItem =
3335
| {
3436
label: string
35-
Icon?: FunctionComponent<SVGProps<SVGSVGElement>>
36-
iconType?: 'fill' | 'stroke'
37+
iconName?: IconName
3738
disabled?: boolean
3839
onClick?: (event: MouseEvent<HTMLButtonElement>) => void
3940
}
4041
| ReactElement
4142

4243
export interface EnvironmentOverviewTableRow {
43-
environment: EnvironmentOverviewTableRowData
44+
app: EnvironmentOverviewTableRowData
4445
isChecked?: boolean
4546
onLastDeployedImageClick: (event: MouseEvent<HTMLButtonElement>) => void
4647
onCommitClick: (event: MouseEvent<HTMLButtonElement>) => void
@@ -54,3 +55,11 @@ export interface EnvironmentOverviewTableProps {
5455
isVirtualEnv?: boolean
5556
onCheckboxSelect: (id: EnvironmentOverviewTableRowData['id'], isChecked: boolean, isAllChecked: boolean) => void
5657
}
58+
59+
export interface EnvironmentOverviewBulkSelectionWidgetProps
60+
extends PropsWithChildren<{
61+
count: number
62+
onClose: () => void
63+
parentRef: MutableRefObject<HTMLDivElement>
64+
}>,
65+
Pick<EnvironmentOverviewTableRow, 'popUpMenuItems'> {}

‎src/Pages/Shared/EnvironmentOverviewTable/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,6 @@
1515
*/
1616

1717
export { EnvironmentOverviewTableSortableKeys } from './EnvironmentOverview.constants'
18+
export * from './EnvironmentOverviewBulkSelectionActionWidget'
1819
export * from './EnvironmentOverviewTable.component'
1920
export * from './EnvironmentOverviewTable.types'

‎src/assets/icons/dark/ic-checkbox-selected-error.svg

Lines changed: 4 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)