Skip to content

Commit

Permalink
Merge branch 'develop' into feat/onboard-argo-apps
Browse files Browse the repository at this point in the history
  • Loading branch information
@shivani170
shivani170 committed Feb 20, 2025
2 parents 25eac33 + 59db86e commit 98b70b8
Show file tree
Hide file tree
Showing 93 changed files with 958 additions and 721 deletions.
3 changes: 1 addition & 2 deletions .env
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ SENTRY_PERFORMANCE_ENABLED=false
SENTRY_DSN=
SENTRY_RELEASE_VERSION=
SENTRY_TRACES_SAMPLE_RATE=0.2
HOTJAR_ENABLED=false
GA_ENABLED=false
GA_TRACKING_ID=
GTM_ENABLED=false
Expand All @@ -22,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 Expand Up @@ -67,3 +65,4 @@ FEATURE_CLUSTER_MAP_ENABLE=true
FEATURE_DEFAULT_LANDING_RB_ENABLE=false
FEATURE_ACTION_AUDIOS_ENABLE=true
FEATURE_EXPERIMENTAL_THEMING_ENABLE=false
FEATURE_DEFAULT_AUTHENTICATED_VIEW_ENABLE=false
2 changes: 1 addition & 1 deletion Dockerfile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ COPY . .

RUN echo `git rev-parse --short=9 HEAD` > health.html

RUN echo "SENTRY_RELEASE_VERSION=dashboard@$(git rev-parse --short HEAD)" >> .env
RUN echo "SENTRY_RELEASE_VERSION=dashboard@$(git rev-parse --short HEAD)\n" >> .env

RUN yarn build

Expand Down
2 changes: 0 additions & 2 deletions config.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,10 @@
| 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 |
| HIDE_GITOPS_OR_HELM_OPTION | "false" | Enable GitOps and Helm option |
| HOTJAR_ENABLED | "false" | Hotjar integration status |
| LOGIN_DT_LOGO | "" | Devtron logo for login page |
| LOGIN_PAGE_IMAGE | "" | Login page image url |
| LOGIN_PAGE_IMAGE_BG | "" | Login page image background color code |
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.7",
"@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
4 changes: 0 additions & 4 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ import {
reloadLocation,
} from './components/common'
import { UPDATE_AVAILABLE_TOAST_PROGRESS_BG, URLS } from './config'
import Hotjar from './components/Hotjar/Hotjar'
import { validateToken } from './services/service'

const NavigationRoutes = lazy(() => import('./components/common/navigation/NavigationRoutes'))
Expand Down Expand Up @@ -351,9 +350,6 @@ export default function App() {
<div id="visible-modal" />
<div id="visible-modal-2" />
<div id="animated-dialog-backdrop" />
{import.meta.env.VITE_NODE_ENV === 'production' &&
window._env_ &&
window._env_.HOTJAR_ENABLED && <Hotjar />}
</BreadcrumbStore>
</ErrorBoundary>
)}
Expand Down
12 changes: 9 additions & 3 deletions ...es/Applications/DevtronApps/Details/AppConfigurations/Navigation/EnvConfigurationsNav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import {
BASE_CONFIGURATION_ENV_ID,
Button,
ButtonComponentType,
ButtonStyleType,
ButtonVariantType,
CollapsibleList,
CollapsibleListConfig,
Expand All @@ -45,10 +44,10 @@ import { URLS } from '@Config/routes'
import { ResourceConfigState } from '@Pages/Applications/DevtronApps/service.types'

import { DEPLOYMENT_CONFIGURATION_RESOURCE_TYPE_ROUTE } from '@Config/constants'
import ReactGA from 'react-ga4'
import { BASE_CONFIGURATIONS } from '../AppConfig.constants'
import { EnvConfigRouteParams, EnvConfigurationsNavProps, EnvConfigObjectKey, EnvConfigType } from '../AppConfig.types'
import { getEnvConfiguration, getNavigationPath } from './Navigation.helper'

// LOADING SHIMMER
const ShimmerText = ({ width }: { width: string }) => (
<div className={`p-8 h-32 w-${width}`}>
Expand Down Expand Up @@ -415,6 +414,13 @@ export const EnvConfigurationsNav = ({
</div>
)

const onClickCompareWith = () => {
ReactGA.event({
category: 'DEVTRON_APP_COMPARE_WITH',
action: 'DEVTRON_APP_COMPARE_WITH',
})
}

const renderCompareWithBtn = () => {
const { name: compareTo } = resourceData

Expand All @@ -438,11 +444,11 @@ export const EnvConfigurationsNav = ({
component={ButtonComponentType.link}
variant={ButtonVariantType.secondary}
size={ComponentSizeType.medium}
style={ButtonStyleType.neutral}
startIcon={<ICArrowsLeftRight />}
disabled={!isResourceTypeValid}
linkProps={{ to: compareWithHref }}
text="Compare with..."
onClick={onClickCompareWith}
/>
</div>
)
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
Loading

0 comments on commit 98b70b8

Please sign in to comment.