Skip to content

Commit

Permalink
Merge pull request #2418 from devtron-labs/feat/hibernation-patch
Browse files Browse the repository at this point in the history 
feat: integrate configure patch modal and edit patch button
  • Loading branch information
@arunjaindev
arunjaindev authored Feb 20, 2025
2 parents a54bbeb + b03061a commit 59db86e
Show file tree
Hide file tree
Showing 25 changed files with 349 additions and 215 deletions.
1 change: 0 additions & 1 deletion .env
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ EA_APP_DETAILS_POLLING_INTERVAL=30000
CENTRAL_API_ENDPOINT=https://api.devtron.ai
HIDE_GITOPS_OR_HELM_OPTION=true
CONFIGURABLE_TIMEOUT=
HIDE_APPLICATION_GROUPS=true
K8S_CLIENT=false
CLUSTER_TERMINAL_CONNECTION_POLLING_INTERVAL=7000
CLUSTER_TERMINAL_CONNECTION_RETRY_COUNT=7
Expand Down
1 change: 0 additions & 1 deletion config.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@
| GTM_ENABLED | "true" | Enable GTM for tag manager |
| GTM_ID | "" | Enable GTM_ID for tag manager args |
| HELM_APP_DETAILS_POLLING_INTERVAL | 3000 | API polling interval for helm app details |
| HIDE_APPLICATION_GROUPS | "false" | Hide application group from Devtron UI |
| HIDE_DISCORD | "true" | Hide Discord button from UI |
| HIDE_DEFAULT_CLUSTER | "true" | Hide default cluster |
| HIDE_EXCLUDE_INCLUDE_GIT_COMMITS | "true" | Hide exclude include git commits |
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"private": true,
"homepage": "/dashboard",
"dependencies": {
"@devtron-labs/devtron-fe-common-lib": "1.7.9",
"@devtron-labs/devtron-fe-common-lib": "1.7.10",
"@esbuild-plugins/node-globals-polyfill": "0.2.3",
"@rjsf/core": "^5.13.3",
"@rjsf/utils": "^5.13.3",
Expand Down
2 changes: 1 addition & 1 deletion src/Pages/GlobalConfigurations/DeploymentCharts/DeploymentChartsRouter.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const DeploymentChartsRouter = () => {

return (
// NOTE: need to give fixed height here for resizable code editor height
<div className="flexbox-col bg__tertiary dc__overflow-hidden h-100">
<div className="flexbox-col bg__primary h-100">
<Switch>
<Route exact path={URLS.GLOBAL_CONFIG_DEPLOYMENT_CHARTS_LIST}>
<DeploymentChartsList />
Expand Down
191 changes: 120 additions & 71 deletions src/Pages/GlobalConfigurations/DeploymentCharts/List/DeploymentChartsList.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,34 +14,54 @@
* limitations under the License.
*/

import { useState } from 'react'
import { useMemo, useState } from 'react'
import {
GenericEmptyState,
InfoColourBar,
APIResponseHandler,
useAsync,
Tooltip,
EMPTY_STATE_STATUS,
URLS,
SortableTableHeaderCell,
getAlphabetIcon,
useUrlFilters,
GenericFilterEmptyState,
highlightSearchText,
} from '@devtron-labs/devtron-fe-common-lib'
import DOMPurify from 'dompurify'
import { DOCUMENTATION } from '@Config/constants'
import emptyCustomChart from '@Images/ic-empty-custom-charts.webp'
import { ReactComponent as DevtronIcon } from '@Icons/ic-devtron-app.svg'
import { ReactComponent as HelpIcon } from '@Icons/ic-help.svg'
import { ReactComponent as ICFolderZip } from '@Icons/ic-folder-zip.svg'
import { ReactComponent as ICDevtronApp } from '@Icons/ic-devtron-app.svg'
import { importComponentFromFELibrary } from '@Components/common'
import UploadChartModal from './UploadChartModal'
import { getChartList } from './service'
import DeploymentChartsListHeader from './DeploymentChartsListHeader'
import UploadButton from './UploadButton'
import DownloadChartButton from './DownloadChartButton'
import './styles.scss'
import { DeploymentChartsListSortableKeys } from '../types'
import { sortChartList } from './utils'

const EditDeploymentChart = importComponentFromFELibrary('EditDeploymentChart', null, 'function')
const DeploymentChartActionButton = importComponentFromFELibrary('DeploymentChartActionButton', null, 'function')

const DeploymentChartsList = () => {
const [showUploadPopup, setShowUploadPopup] = useState(false)
const [chartListLoading, chartList, chartListError, reloadChartList] = useAsync(getChartList)

const { sortBy, sortOrder, searchKey, handleSearch, handleSorting, clearFilters } =
useUrlFilters<DeploymentChartsListSortableKeys>({
initialSortKey: DeploymentChartsListSortableKeys.CHART_NAME,
})

const handleTriggerSorting = (sortKey: DeploymentChartsListSortableKeys) => () => handleSorting(sortKey)

const filteredChartList = useMemo(() => {
const lowerCaseSearch = searchKey.toLowerCase()
const filteredList = chartList?.filter((chart) => chart.name.toLowerCase().includes(lowerCaseSearch)) || []
return filteredList.sort((a, b) => sortChartList(a, b, sortBy, sortOrder))
}, [sortBy, sortOrder, searchKey, chartList])

const handleCloseUploadChartModal = (isReloadChartList: boolean): void => {
setShowUploadPopup(false)
if (isReloadChartList) {
Expand Down Expand Up @@ -81,74 +101,103 @@ const DeploymentChartsList = () => {
}

return (
<div
className="chart-list flexbox-col dc__gap-20 dc__overflow-hidden h-100"
data-testid="custom-charts-list"
>
<DeploymentChartsListHeader handleOpenUploadChartModal={handleOpenUploadChartModal} />
<div
data-testid="custom-chart-list"
className="en-2 bw-1 bg__primary br-8 h-100 dc__overflow-hidden flexbox-col"
>
<InfoColourBar
message={
<>
<span className="fs-13 fw-6 lh-20">How to use?</span>
<span className="fs-13 fw-4 lh-20 ml-4 mr-4">
Uploaded charts can be used in Deployment template to deploy custom applications
created in Devtron.
</span>
<a
href={DOCUMENTATION.CUSTOM_CHART}
target="_blank"
rel="noreferrer"
className="dc__link dc__no-decor pointer"
>
Learn more
</a>
</>
}
classname="dc__content-start bcv-1 w-100 custom-chart-info-bar dc__border-bottom-v2 pt-6 pb-6 pl-16 pr-16"
Icon={HelpIcon}
iconClass="fcv-5 icon-dim-20"
/>
<div className="chart-list-row fw-6 cn-7 fs-12 dc__border-bottom pt-10 pb-10 pr-20 pl-20 dc__uppercase dc__no-shrink">
<span>Name</span>
<span>Version</span>
<span>Description</span>
</div>
<div className="h-100 dc__overflow-auto">
{chartList.map((chartData) => (
<div
key={`custom-chart_${chartData.name}`}
className="chart-list-row fw-4 cn-9 fs-13 dc__border-bottom-n1 pt-12 pb-12 pr-20 pl-20"
>
<div className="flexbox dc__gap-8 dc__align-items-center">
<span className="cn-9 dc__ellipsis-right">{chartData.name}</span>
{!chartData.isUserUploaded && (
<div className="flex bcb-1 br-6 py-2 px-6">
<DevtronIcon className="icon-dim-20" />
<span className="ml-4 fs-12 fw-6 cn-7 lh-20 devtron-tag">by Devtron</span>
<div className="flexbox-col h-100 dc__gap-8 pt-16" data-testid="custom-charts-list">
<DeploymentChartsListHeader
searchKey={searchKey}
handleSearch={handleSearch}
handleOpenUploadChartModal={handleOpenUploadChartModal}
/>
{filteredChartList.length ? (
<div className="flexbox-col dc__overflow-auto">
<div className="dc__grid dc__gap-16 dc__align-items-center chart-list-row dc__border-bottom px-20 py-10 fs-12 fw-6 lh-20 cn-7">
<span />
<SortableTableHeaderCell
title="Name"
isSortable
disabled={false}
sortOrder={sortOrder}
triggerSorting={handleTriggerSorting(DeploymentChartsListSortableKeys.CHART_NAME)}
isSorted={sortBy === DeploymentChartsListSortableKeys.CHART_NAME}
/>
<SortableTableHeaderCell
title="Version"
isSortable
disabled={false}
sortOrder={sortOrder}
triggerSorting={handleTriggerSorting(DeploymentChartsListSortableKeys.CHART_VERSION)}
isSorted={sortBy === DeploymentChartsListSortableKeys.CHART_VERSION}
/>
<SortableTableHeaderCell title="Description" isSortable={false} />
<SortableTableHeaderCell
title="Uploaded by"
isSortable
disabled={false}
sortOrder={sortOrder}
triggerSorting={handleTriggerSorting(DeploymentChartsListSortableKeys.UPLOADED_BY)}
isSorted={sortBy === DeploymentChartsListSortableKeys.UPLOADED_BY}
/>
<span />
</div>
<div className="flexbox-col dc__overflow-auto flex-grow-1">
{filteredChartList.map((chartData) => {
const { version, description, uploadedBy, isUserUploaded } = chartData.versions[0]
return (
<div
key={`custom-chart_${chartData.name}`}
className="chart-list-row bg__primary fw-4 cn-9 fs-13 lh-20 fw-4 dc__grid dc__gap-16 dc__align-items-center px-20 py-10 dc__hover-n50"
>
<div className="icon-dim-24 p-2">
<ICFolderZip className="icon-dim-20 fcb-5" />
</div>
<span
className="dc__truncate"
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(
highlightSearchText({
searchText: searchKey,
text: chartData.name,
highlightClasses: 'bcy-2',
}),
),
}}
/>
<div className="flexbox dc__gap-8">
<span>{version}</span>
<span className="cn-6">
{!!(chartData.versions.length - 1) &&
`+${chartData.versions.length - 1} more`}
</span>
</div>
<Tooltip content={description} placement="top">
<span className="dc__truncate">{description}</span>
</Tooltip>
<div>
<div className="flexbox dc__align-items-center dc__gap-8">
{isUserUploaded ? (
getAlphabetIcon(uploadedBy, 'icon-dim-20 m-0-imp')
) : (
<ICDevtronApp className="icon-dim-20 fcb-5 dc__no-shrink" />
)}
<Tooltip content={uploadedBy} placement="left">
<span className="dc__truncate">{uploadedBy}</span>
</Tooltip>
</div>
</div>
<div className="flex dc__gap-4">
{DeploymentChartActionButton && (
<DeploymentChartActionButton name={chartData.name} />
)}
<DownloadChartButton name={chartData.name} versions={chartData.versions} />
</div>
)}
</div>
<span>
{chartData.versions[0].version}
<span className="cn-5 ml-8">
{chartData.versions.length && `+${chartData.versions.length} more`}
</span>
</span>
<Tooltip content={chartData.versions[0].description} placement="left">
<span className="dc__ellipsis-right">{chartData.versions[0].description}</span>
</Tooltip>
<div className="flexbox dc__gap-4">
{EditDeploymentChart && <EditDeploymentChart name={chartData.name} />}
<DownloadChartButton name={chartData.name} versions={chartData.versions} />
</div>
</div>
))}
</div>
)
})}
</div>
</div>
</div>
) : (
<GenericFilterEmptyState handleClearFilters={clearFilters} />
)}
</div>
)
}
Expand Down
21 changes: 14 additions & 7 deletions src/Pages/GlobalConfigurations/DeploymentCharts/List/DeploymentChartsListHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,18 @@
*/

import { CUSTOM_CHART_TITLE_DESCRIPTION_CONTENT, DOCUMENTATION } from '@Config/constants'
import { InfoIconTippy } from '@devtron-labs/devtron-fe-common-lib'
import { InfoIconTippy, SearchBar } from '@devtron-labs/devtron-fe-common-lib'
import UploadButton from './UploadButton'
import { DeploymentChartsListHeaderProps } from '../types'

const DeploymentChartsListHeader = ({ handleOpenUploadChartModal }: DeploymentChartsListHeaderProps) => (
<div className="flexbox dc__content-space cn-9 fw-6 fs-16">
<div className="flex">
{CUSTOM_CHART_TITLE_DESCRIPTION_CONTENT.heading}
const DeploymentChartsListHeader = ({
handleOpenUploadChartModal,
handleSearch,
searchKey,
}: DeploymentChartsListHeaderProps) => (
<div className="flexbox dc__content-space px-20">
<div className="flex dc__gap-8">
<h2 className="cn-9 fw-6 fs-16 lh-32 m-0">{CUSTOM_CHART_TITLE_DESCRIPTION_CONTENT.heading}</h2>
<InfoIconTippy
heading={CUSTOM_CHART_TITLE_DESCRIPTION_CONTENT.heading}
infoText={CUSTOM_CHART_TITLE_DESCRIPTION_CONTENT.infoText}
Expand All @@ -33,10 +37,13 @@ const DeploymentChartsListHeader = ({ handleOpenUploadChartModal }: DeploymentCh
}
documentationLinkText={CUSTOM_CHART_TITLE_DESCRIPTION_CONTENT.documentationLinkText}
documentationLink={DOCUMENTATION.CUSTOM_CHART}
iconClassName="icon-dim-16 fcn-6 ml-4"
iconClassName="icon-dim-20 fcn-6"
/>
</div>
<UploadButton handleOpenUploadChartModal={handleOpenUploadChartModal} />
<div className="flex dc__gap-8">
<SearchBar initialSearchText={searchKey} handleEnter={handleSearch} />
<UploadButton handleOpenUploadChartModal={handleOpenUploadChartModal} />
</div>
</div>
)

Expand Down
Loading

0 comments on commit 59db86e

Please sign in to comment.