Skip to content

Commit ac34dc0

Browse files
RohitRaj011RohitRaj011
authored
Merge pull request #2733 from devtron-labs/refactor/manage-traffic
feat: Move BulkManageTrafficDrawer to route
2 parents 01cf4db + d155bcc commit ac34dc0

File tree

2 files changed

+167
-150
lines changed

2 files changed

+167
-150
lines changed

‎src/components/ApplicationGroup/Details/EnvironmentOverview/EnvironmentOverview.tsx

Lines changed: 166 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
*/
1616

1717
import { useEffect, useRef, useState } from 'react'
18-
import { useHistory, useLocation, useParams } from 'react-router-dom'
18+
import { generatePath, Route, Switch, useHistory, useLocation, useRouteMatch } from 'react-router-dom'
1919
import moment from 'moment'
2020

2121
import {
@@ -56,6 +56,7 @@ import {
5656
import { GROUP_LIST_HEADER } from '@Components/ApplicationGroup/Constants'
5757
import { importComponentFromFELibrary } from '@Components/common'
5858
import { Moment12HourFormat } from '@Config/constants'
59+
import { URLS } from '@Config/routes'
5960
import {
6061
EnvironmentOverviewBulkSelectionWidget,
6162
EnvironmentOverviewTable,
@@ -74,7 +75,7 @@ const processDeploymentWindowAppGroupOverviewMap = importComponentFromFELibrary(
7475
null,
7576
'function',
7677
)
77-
const AppGroupManageTrafficDrawer = importComponentFromFELibrary('AppGroupManageTrafficDrawer', null, 'function')
78+
const BulkManageTrafficDrawer = importComponentFromFELibrary('BulkManageTrafficDrawer', null, 'function')
7879
const ManageTrafficButton = importComponentFromFELibrary('ManageTrafficButton', null, 'function')
7980
const ClonePipelineMenuButton = importComponentFromFELibrary('ClonePipelineMenuButton', null, 'function')
8081
const ClonePipelineModal = importComponentFromFELibrary('ClonePipelineModal', null, 'function')
@@ -84,6 +85,8 @@ const getManageTrafficMenuButtonConfig = importComponentFromFELibrary(
8485
'function',
8586
)
8687

88+
const ENV_OVERVIEW_PATH = `${URLS.APPLICATION_GROUP}/:envId/${URLS.APP_OVERVIEW}`
89+
8790
const EnvironmentOverview = ({
8891
appGroupListData,
8992
filteredAppIds,
@@ -116,10 +119,12 @@ const EnvironmentOverview = ({
116119
Record<string, { type: string; excludedUserEmails: string[]; userActionState: ACTION_STATE; isActive: boolean }>
117120
>({})
118121
const [restartLoader, setRestartLoader] = useState<boolean>(false)
119-
const [isManageTrafficDrawerOpen, setIsManageTrafficDrawerOpen] = useState(false)
120122

121123
// HOOKS
122-
const { envId } = useParams<{ envId: string }>()
124+
const {
125+
path,
126+
params: { envId },
127+
} = useRouteMatch<{ envId: string }>()
123128
const history = useHistory()
124129
const location = useLocation()
125130
const { searchParams } = useSearchString()
@@ -291,9 +296,15 @@ const EnvironmentOverview = ({
291296

292297
const handleBulkSelectionWidgetClose = () => setSelectedAppDetailsList([])
293298

294-
const handleOpenManageTrafficDrawer = () => setIsManageTrafficDrawerOpen(true)
299+
const getManageTrafficPath = () => generatePath(`${ENV_OVERVIEW_PATH}/${URLS.MANAGE_TRAFFIC}`, { envId })
300+
301+
const handleOpenManageTrafficDrawer = () => {
302+
history.push(getManageTrafficPath())
303+
}
295304

296-
const handleCloseManageTrafficDrawer = () => setIsManageTrafficDrawerOpen(false)
305+
const handleCloseManageTrafficDrawer = () => {
306+
history.push(generatePath(ENV_OVERVIEW_PATH, { envId }))
307+
}
297308

298309
// CONFIGS
299310
const environmentOverviewTableRows = (appListData?.appInfoList ?? []).map<EnvironmentOverviewTableRow>(
@@ -431,164 +442,169 @@ const EnvironmentOverview = ({
431442
}
432443

433444
return environmentOverviewTableRows.length > 0 ? (
434-
<div
435-
ref={parentRef}
436-
className="env-overview-container flex-grow-1 dc__overflow-auto dc__content-center bg__primary p-20 dc__position-rel"
437-
>
438-
{/* SIDE INFO COLUMN */}
439-
<aside className="flexbox-col dc__gap-16">
440-
<div className="flexbox-col dc__gap-12">
441-
<div>
442-
<div className="mxh-64 dc__mxw-120 mh-40 w-100 h-100 flexbox">
443-
<div className="flex dc__border-radius-8-imp mw-48 h-48 bcb-1">
444-
<GridIconBlue className="w-32 h-32" />
445+
<>
446+
<Switch>
447+
{BulkManageTrafficDrawer && (
448+
<Route path={`${path}/${URLS.MANAGE_TRAFFIC}`}>
449+
<BulkManageTrafficDrawer
450+
envId={+envId}
451+
envName={appListData.environment}
452+
appInfoList={appListData?.appInfoList}
453+
initialSelectedAppList={selectedAppDetailsList}
454+
onClose={handleCloseManageTrafficDrawer}
455+
/>
456+
</Route>
457+
)}
458+
</Switch>
459+
<div
460+
ref={parentRef}
461+
className="env-overview-container flex-grow-1 dc__overflow-auto dc__content-center bg__primary p-20 dc__position-rel"
462+
>
463+
{/* SIDE INFO COLUMN */}
464+
<aside className="flexbox-col dc__gap-16">
465+
<div className="flexbox-col dc__gap-12">
466+
<div>
467+
<div className="mxh-64 dc__mxw-120 mh-40 w-100 h-100 flexbox">
468+
<div className="flex dc__border-radius-8-imp mw-48 h-48 bcb-1">
469+
<GridIconBlue className="w-32 h-32" />
470+
</div>
445471
</div>
446472
</div>
447-
</div>
448473

449-
<div className="fs-16 fw-7 lh-24 cn-9 dc__word-break font-merriweather">
450-
{appGroupListData.environmentName}
451-
</div>
452-
<EditableTextArea
453-
emptyState="Write a short description for this environment"
454-
placeholder="Write a short description for this environment"
455-
initialText={description}
456-
updateContent={handleSaveDescription}
457-
validations={{
458-
maxLength: {
459-
value: BIO_MAX_LENGTH,
460-
message: BIO_MAX_LENGTH_ERROR,
461-
},
462-
}}
463-
/>
464-
</div>
465-
<div className="dc__border-top-n1" />
466-
<div className="flexbox-col dc__gap-12">
467-
<div>
468-
<div className="fs-13 fw-4 lh-20 cn-7 mb-4">Type</div>
469-
<div className="flexbox flex-justify flex-align-center dc__gap-10 fs-13 fw-6 lh-20 cn-9">
470-
{appGroupListData.environmentType}
474+
<div className="fs-16 fw-7 lh-24 cn-9 dc__word-break font-merriweather">
475+
{appGroupListData.environmentName}
471476
</div>
477+
<EditableTextArea
478+
emptyState="Write a short description for this environment"
479+
placeholder="Write a short description for this environment"
480+
initialText={description}
481+
updateContent={handleSaveDescription}
482+
validations={{
483+
maxLength: {
484+
value: BIO_MAX_LENGTH,
485+
message: BIO_MAX_LENGTH_ERROR,
486+
},
487+
}}
488+
/>
472489
</div>
490+
<div className="dc__border-top-n1" />
491+
<div className="flexbox-col dc__gap-12">
492+
<div>
493+
<div className="fs-13 fw-4 lh-20 cn-7 mb-4">Type</div>
494+
<div className="flexbox flex-justify flex-align-center dc__gap-10 fs-13 fw-6 lh-20 cn-9">
495+
{appGroupListData.environmentType}
496+
</div>
497+
</div>
473498

474-
<div>
475-
<div className="fs-13 fw-4 lh-20 cn-7 mb-4">Namespace</div>
476-
<div className="fs-13 fw-6 lh-20 cn-9 dc__word-break">
477-
<span>{appGroupListData.namespace}</span>
499+
<div>
500+
<div className="fs-13 fw-4 lh-20 cn-7 mb-4">Namespace</div>
501+
<div className="fs-13 fw-6 lh-20 cn-9 dc__word-break">
502+
<span>{appGroupListData.namespace}</span>
503+
</div>
478504
</div>
479-
</div>
480-
<div>
481-
<div className="fs-13 fw-4 lh-20 cn-7 mb-4">Cluster</div>
482-
<div className="fs-13 fw-6 lh-20 cn-9 dc__word-break">
483-
<span>{appGroupListData.clusterName}</span>
505+
<div>
506+
<div className="fs-13 fw-4 lh-20 cn-7 mb-4">Cluster</div>
507+
<div className="fs-13 fw-6 lh-20 cn-9 dc__word-break">
508+
<span>{appGroupListData.clusterName}</span>
509+
</div>
484510
</div>
485-
</div>
486-
<div>
487-
<div className="fs-13 fw-4 lh-20 cn-7 mb-4">Created on</div>
488-
<div className="fs-13 fw-6 lh-20 cn-9 dc__word-break">
489-
{appGroupListData.createdOn
490-
? moment(appGroupListData.createdOn).format(Moment12HourFormat)
491-
: '-'}
511+
<div>
512+
<div className="fs-13 fw-4 lh-20 cn-7 mb-4">Created on</div>
513+
<div className="fs-13 fw-6 lh-20 cn-9 dc__word-break">
514+
{appGroupListData.createdOn
515+
? moment(appGroupListData.createdOn).format(Moment12HourFormat)
516+
: '-'}
517+
</div>
492518
</div>
493-
</div>
494-
<div>
495-
<div className="fs-13 fw-4 lh-20 cn-7 mb-4">Created by</div>
496-
<div className="fs-13 fw-6 lh-20 cn-9 dc__word-break flexbox flex-align-center dc__gap-8">
497-
<div
498-
className="icon-dim-20 mw-20 flexbox flex-justify-center flex-align-center dc__border-radius-50-per dc__uppercase cn-0 fw-4"
499-
style={{ backgroundColor: getRandomColor(appGroupListData.createdBy) }}
500-
>
501-
{appGroupListData.createdBy[0]}
519+
<div>
520+
<div className="fs-13 fw-4 lh-20 cn-7 mb-4">Created by</div>
521+
<div className="fs-13 fw-6 lh-20 cn-9 dc__word-break flexbox flex-align-center dc__gap-8">
522+
<div
523+
className="icon-dim-20 mw-20 flexbox flex-justify-center flex-align-center dc__border-radius-50-per dc__uppercase cn-0 fw-4"
524+
style={{ backgroundColor: getRandomColor(appGroupListData.createdBy) }}
525+
>
526+
{appGroupListData.createdBy[0]}
527+
</div>
528+
{appGroupListData.createdBy}
502529
</div>
503-
{appGroupListData.createdBy}
504530
</div>
505531
</div>
532+
</aside>
533+
534+
{/* OVERVIEW TABLE */}
535+
<div className="mw-none">
536+
<div className="dc__align-self-stretch flex dc__content-space left fs-14 h-30 fw-6 lh-20 cn-9 mb-12">
537+
<span className="flex">
538+
<GridIcon className="icon-dim-20 mr-8 scn-9" /> {GROUP_LIST_HEADER.APPLICATIONS}
539+
</span>
540+
{window._env_.FEATURE_MANAGE_TRAFFIC_ENABLE && ManageTrafficButton && (
541+
<ManageTrafficButton to={getManageTrafficPath()} />
542+
)}
543+
</div>
544+
<EnvironmentOverviewTable
545+
rows={environmentOverviewTableRows}
546+
isVirtualEnv={isVirtualEnv}
547+
onCheckboxSelect={handleCheckboxSelect}
548+
/>
506549
</div>
507-
</aside>
508-
509-
{/* OVERVIEW TABLE */}
510-
<div className="mw-none">
511-
<div className="dc__align-self-stretch flex dc__content-space left fs-14 h-30 fw-6 lh-20 cn-9 mb-12">
512-
<span className="flex">
513-
<GridIcon className="icon-dim-20 mr-8 scn-9" /> {GROUP_LIST_HEADER.APPLICATIONS}
514-
</span>
515-
{window._env_.FEATURE_MANAGE_TRAFFIC_ENABLE && ManageTrafficButton && (
516-
<ManageTrafficButton onClick={handleOpenManageTrafficDrawer} />
517-
)}
518-
</div>
519-
<EnvironmentOverviewTable
520-
rows={environmentOverviewTableRows}
521-
isVirtualEnv={isVirtualEnv}
522-
onCheckboxSelect={handleCheckboxSelect}
523-
/>
550+
{/* MODALS */}
551+
{renderOverviewModal()}
552+
553+
{/* BULK SELECTION WIDGET */}
554+
{!!selectedAppDetailsList.length && (
555+
<EnvironmentOverviewBulkSelectionWidget
556+
parentRef={parentRef}
557+
count={selectedAppDetailsList.length}
558+
onClose={handleBulkSelectionWidgetClose}
559+
popUpMenuItems={[
560+
...(window._env_.FEATURE_MANAGE_TRAFFIC_ENABLE && getManageTrafficMenuButtonConfig
561+
? [getManageTrafficMenuButtonConfig({ onClick: handleOpenManageTrafficDrawer })]
562+
: []),
563+
...(ClonePipelineMenuButton && appListData.environment
564+
? [
565+
<ClonePipelineMenuButton
566+
sourceEnvironmentName={appListData.environment}
567+
onClick={() => {
568+
setOpenClonePipelineConfig(true)
569+
}}
570+
/>,
571+
]
572+
: []),
573+
]}
574+
>
575+
<div className="flex dc__gap-4">
576+
<Button
577+
icon={<Icon name="ic-arrows-clockwise" color={null} />}
578+
dataTestId="environment-overview-action-widget-restart-workloads"
579+
style={ButtonStyleType.neutral}
580+
variant={ButtonVariantType.borderLess}
581+
ariaLabel="Restart Workloads"
582+
size={ComponentSizeType.small}
583+
onClick={onClickShowBulkRestartModal}
584+
/>
585+
<Button
586+
icon={<Icon name="ic-hibernate-circle" color={null} />}
587+
dataTestId="environment-overview-action-widget-hibernate"
588+
style={ButtonStyleType.neutral}
589+
variant={ButtonVariantType.borderLess}
590+
ariaLabel="Hibernate Applications"
591+
size={ComponentSizeType.small}
592+
onClick={openHibernateModalPopup}
593+
/>
594+
<Button
595+
icon={<Icon name="ic-sun" color={null} />}
596+
dataTestId="environment-overview-action-widget-unhibernate"
597+
style={ButtonStyleType.neutral}
598+
variant={ButtonVariantType.borderLess}
599+
ariaLabel="Unhibernate Applications"
600+
size={ComponentSizeType.small}
601+
onClick={openUnHibernateModalPopup}
602+
/>
603+
</div>
604+
</EnvironmentOverviewBulkSelectionWidget>
605+
)}
524606
</div>
525-
{/* MODALS */}
526-
{renderOverviewModal()}
527-
528-
{AppGroupManageTrafficDrawer && isManageTrafficDrawerOpen && (
529-
<AppGroupManageTrafficDrawer
530-
envId={+envId}
531-
envName={appListData.environment}
532-
appInfoList={appListData?.appInfoList}
533-
initialSelectedAppList={selectedAppDetailsList}
534-
onClose={handleCloseManageTrafficDrawer}
535-
/>
536-
)}
537-
538-
{/* BULK SELECTION WIDGET */}
539-
{!!selectedAppDetailsList.length && (
540-
<EnvironmentOverviewBulkSelectionWidget
541-
parentRef={parentRef}
542-
count={selectedAppDetailsList.length}
543-
onClose={handleBulkSelectionWidgetClose}
544-
popUpMenuItems={[
545-
...(window._env_.FEATURE_MANAGE_TRAFFIC_ENABLE && getManageTrafficMenuButtonConfig
546-
? [getManageTrafficMenuButtonConfig({ onClick: handleOpenManageTrafficDrawer })]
547-
: []),
548-
...(ClonePipelineMenuButton && appListData.environment
549-
? [
550-
<ClonePipelineMenuButton
551-
sourceEnvironmentName={appListData.environment}
552-
onClick={() => {
553-
setOpenClonePipelineConfig(true)
554-
}}
555-
/>,
556-
]
557-
: []),
558-
]}
559-
>
560-
<div className="flex dc__gap-4">
561-
<Button
562-
icon={<Icon name="ic-arrows-clockwise" color={null} />}
563-
dataTestId="environment-overview-action-widget-restart-workloads"
564-
style={ButtonStyleType.neutral}
565-
variant={ButtonVariantType.borderLess}
566-
ariaLabel="Restart Workloads"
567-
size={ComponentSizeType.small}
568-
onClick={onClickShowBulkRestartModal}
569-
/>
570-
<Button
571-
icon={<Icon name="ic-hibernate-circle" color={null} />}
572-
dataTestId="environment-overview-action-widget-hibernate"
573-
style={ButtonStyleType.neutral}
574-
variant={ButtonVariantType.borderLess}
575-
ariaLabel="Hibernate Applications"
576-
size={ComponentSizeType.small}
577-
onClick={openHibernateModalPopup}
578-
/>
579-
<Button
580-
icon={<Icon name="ic-sun" color={null} />}
581-
dataTestId="environment-overview-action-widget-unhibernate"
582-
style={ButtonStyleType.neutral}
583-
variant={ButtonVariantType.borderLess}
584-
ariaLabel="Unhibernate Applications"
585-
size={ComponentSizeType.small}
586-
onClick={openUnHibernateModalPopup}
587-
/>
588-
</div>
589-
</EnvironmentOverviewBulkSelectionWidget>
590-
)}
591-
</div>
607+
</>
592608
) : null
593609
}
594610

‎src/config/routes.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ export const URLS = {
5252
APP_DIFF_VIEW: 'diff-view',
5353
APP_TRIGGER: 'trigger',
5454
APP_OVERVIEW: 'overview',
55+
MANAGE_TRAFFIC: 'manage-traffic',
5556
APP_CI_DETAILS: 'ci-details',
5657
APP_CD_DETAILS: 'cd-details',
5758
APP_DEPLOYMENT_METRICS: 'deployment-metrics',

0 commit comments

Comments
 (0)