Skip to content

Commit

Permalink
Merge branch 'develop' into feat/replace-select-v4
Browse files Browse the repository at this point in the history
  • Loading branch information
@shivani170
shivani170 committed Oct 3, 2024
2 parents c6b77cc + 279de8e commit 6d5ecfa
Show file tree
Hide file tree
Showing 23 changed files with 291 additions and 365 deletions.
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": "0.3.21-beta-2",
"@devtron-labs/devtron-fe-common-lib": "0.3.22-beta-4",
"@esbuild-plugins/node-globals-polyfill": "0.2.3",
"@rjsf/core": "^5.13.3",
"@rjsf/utils": "^5.13.3",
Expand Down
4 changes: 4 additions & 0 deletions src/assets/icons/ic-camera.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
29 changes: 14 additions & 15 deletions src/components/app/details/appDetails/AppDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ import {
} from '@devtron-labs/devtron-fe-common-lib'
import { Link, useParams, useHistory, useRouteMatch, generatePath, Route, useLocation } from 'react-router-dom'
import Tippy from '@tippyjs/react'
import Select, { components } from 'react-select'
import Select from 'react-select'
import { fetchAppDetailsInTime, fetchResourceTreeInTime } from '../../service'
import {
URLS,
Expand Down Expand Up @@ -296,6 +296,7 @@ export const Details: React.FC<DetailsType> = ({
const appDetailsAbortRef = useRef(null)
const shouldFetchTimelineRef = useRef(false)


const [deploymentStatusDetailsBreakdownData, setDeploymentStatusDetailsBreakdownData] =
useState<DeploymentStatusDetailsBreakdownDataType>({
...(isVirtualEnvRef.current && processVirtualEnvironmentDeploymentData
Expand Down Expand Up @@ -356,6 +357,7 @@ export const Details: React.FC<DetailsType> = ({
],
)

// This is called only when timeline modal is open
const getDeploymentDetailStepsData = useCallback(
(showTimeline?: boolean): void => {
const shouldFetchTimeline = showTimeline ?? shouldFetchTimelineRef.current
Expand Down Expand Up @@ -425,7 +427,10 @@ export const Details: React.FC<DetailsType> = ({
}
IndexStore.publishAppDetails(appDetailsRef.current, AppType.DEVTRON_APP)
setAppDetails(appDetailsRef.current)
_getDeploymentStatusDetail(appDetailsRef.current.deploymentAppType)

const isIsolatedEnv = isVirtualEnvRef.current && !!appDetailsRef.current.resourceTree

_getDeploymentStatusDetail(appDetailsRef.current.deploymentAppType, isIsolatedEnv, isIsolatedEnv ? appDetailsRef.current?.resourceTree?.wfrId : null)

if (fetchExternalLinks && response.result?.clusterId) {
getExternalLinksAndTools(response.result.clusterId)
Expand Down Expand Up @@ -470,13 +475,15 @@ export const Details: React.FC<DetailsType> = ({
})
}

function _getDeploymentStatusDetail(deploymentAppType: DeploymentAppTypes) {
function _getDeploymentStatusDetail(deploymentAppType: DeploymentAppTypes, isIsolatedEnv: boolean, triggerIdToFetch?: number) {
const shouldFetchTimeline = shouldFetchTimelineRef.current

getDeploymentStatusDetail(params.appId, params.envId, shouldFetchTimeline)
// triggerIdToFetch represents the wfrId to fetch for any specific deployment
getDeploymentStatusDetail(params.appId, params.envId, shouldFetchTimeline, triggerIdToFetch?.toString())
.then((deploymentStatusDetailRes) => {
if (deploymentStatusDetailRes.result) {
if (deploymentAppType === DeploymentAppTypes.HELM) {
// Timelines are not applicable for helm deployments and air gapped envs
if (deploymentAppType === DeploymentAppTypes.HELM || isIsolatedEnv) {
setDeploymentStatusDetailsBreakdownData({
...deploymentStatusDetailsBreakdownData,
deploymentStatus:
Expand Down Expand Up @@ -617,7 +624,7 @@ export const Details: React.FC<DetailsType> = ({
const environmentName = environmentsMap[+envId]

const renderAppDetails = (): JSX.Element => {
if (isVirtualEnvRef.current && VirtualAppDetailsEmptyState) {
if (!appDetails.resourceTree && isVirtualEnvRef.current && VirtualAppDetailsEmptyState) {
return <VirtualAppDetailsEmptyState environmentName={environmentName} />
}
return (
Expand All @@ -627,6 +634,7 @@ export const Details: React.FC<DetailsType> = ({
monitoringTools={externalLinksAndTools.monitoringTools}
isDevtronApp
isDeploymentBlocked={isDeploymentBlocked}
isVirtualEnvironment={isVirtualEnvRef.current}
/>
)
}
Expand Down Expand Up @@ -942,17 +950,8 @@ export const EnvSelector = ({
value={envId ? { value: +envId, label: environmentName } : null}
onChange={(selected, meta) => selectEnvironment((selected as any).value)}
closeMenuOnSelect
// components={{
// IndicatorSeparator: null,
// Option,
// GroupHeading: (props) => <GroupHeading {...props} hideClusterName />,
// DropdownIndicator: components.DropdownIndicator,
// ValueContainer: (props) => <CustomValueContainer {...props} valClassName="env-select" />,
// }}
// styles={envSelectorStyle}
isSearchable
classNamePrefix="app-environment-select"
// formatOptionLabel={formatOptionLabel}
/>
</div>
</>
Expand Down
91 changes: 70 additions & 21 deletions src/components/app/details/appDetails/SourceInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,21 @@
* limitations under the License.
*/

// @ts-nocheck - @TODO: Remove this by fixing the type issues
import React, { useEffect, useMemo, useState } from 'react'
import { useParams } from 'react-router-dom'
import { useEffect, useMemo, useState } from 'react'
import { Link, useParams } from 'react-router-dom'
import Tippy from '@tippyjs/react'
import moment from 'moment'
import {
ConditionalWrap,
DATE_TIME_FORMATS,
DeploymentAppTypes,
getIsManualApprovalConfigured,
handleUTCTime,
ReleaseMode,
showError,
Tooltip,
} from '@devtron-labs/devtron-fe-common-lib'
import { ReactComponent as ICCamera } from '@Icons/ic-camera.svg'
import { URLS } from '../../../../config'
import { EnvSelector } from './AppDetails'
import { DeploymentAppTypeNameMapping } from '../../../../config/constantMessaging'
Expand All @@ -43,6 +47,7 @@ import { ReactComponent as RotateIcon } from '../../../../assets/icons/ic-arrows
import { ReactComponent as LinkIcon } from '../../../../assets/icons/ic-link.svg'
import { ReactComponent as Trash } from '../../../../assets/icons/ic-delete-dots.svg'
import { ReactComponent as ScaleDown } from '../../../../assets/icons/ic-scale-down.svg'
import HelmAppConfigApplyStatusCard from '@Components/v2/appDetails/sourceInfo/environmentStatus/HelmAppConfigApplyStatusCard'

const AppDetailsDownloadCard = importComponentFromFELibrary('AppDetailsDownloadCard')
const DeploymentWindowStatusCard = importComponentFromFELibrary('DeploymentWindowStatusCard')
Expand Down Expand Up @@ -79,6 +84,7 @@ export const SourceInfo = ({
// helmMigratedAppNotTriggered means the app is migrated from a helm release and has not been deployed yet i.e. CD Pipeline has not been triggered
const helmMigratedAppNotTriggered =
appDetails?.releaseMode === ReleaseMode.MIGRATE_HELM && !appDetails?.isPipelineTriggered
const isIsolatedEnv = isVirtualEnvironment && !!appDetails?.resourceTree

if (
['progressing', 'degraded'].includes(status?.toLowerCase()) &&
Expand Down Expand Up @@ -139,6 +145,10 @@ export const SourceInfo = ({
const renderDevtronAppsEnvironmentSelector = (environment) => {
// If moving to a component then move getIsApprovalConfigured with it as well with memoization.
const isApprovalConfigured = getIsApprovalConfigured()
const relativeSnapshotTime = appDetails?.resourceTree?.lastSnapshotTime ? handleUTCTime(
appDetails.resourceTree.lastSnapshotTime,
true,
) : ''

return (
<div className="flex left w-100">
Expand All @@ -147,26 +157,50 @@ export const SourceInfo = ({
disabled={loadingDetails || loadingResourceTree || (params.envId && !showCommitInfo)}
/>
{appDetails?.deploymentAppType && (
<Tippy
className="default-tt"
arrow={false}
<Tooltip
placement="top"
alwaysShowTippyOnHover={!appDetails.isVirtualEnvironment}
content={`Deployed using ${
isArgoCdApp ? DeploymentAppTypeNameMapping.GitOps : DeploymentAppTypeNameMapping.Helm
}`}
>
<div className="flex">
<DeploymentTypeIcon deploymentAppType={appDetails?.deploymentAppType} />
<div className={`flex ${!appDetails.isVirtualEnvironment ? 'ml-16' : ''}`}>
{/* TODO: verify what appType needs to be passed */}
<DeploymentTypeIcon deploymentAppType={appDetails?.deploymentAppType} appType={null} />
</div>
</Tippy>
</Tooltip>
)}
{isdeploymentAppDeleting && (
<div data-testid="deleteing-argocd-pipeline">
<div data-testid="deleteing-argocd-pipeline" className="flex left">
<Trash className="icon-dim-16 mr-8 ml-12" />
<span className="cr-5 fw-6">Deleting deployment pipeline </span>
<span className="dc__loading-dots cr-5" />
</div>
)}
{/* Last snapshot time */}
{isIsolatedEnv && relativeSnapshotTime && (
<Tooltip
content={
<div className="fw-4 lh-18 flexbox-col dc__ga-2">
<h6 className="fs-12 fw-6 cn-0 m-0">Last snapshot received</h6>
<p className="m-0 fs-12 cn-50">
{moment(appDetails.resourceTree.lastSnapshotTime).format(
DATE_TIME_FORMATS.TWELVE_HOURS_FORMAT,
)}
</p>
</div>
}
alwaysShowTippyOnHover
>
<div className="flex left">
<div className="dc__divider h-20 mr-8 ml-8" />
<div className="flex left dc__gap-6 px-8 py-4">
<ICCamera className="scn-9 dc__no-shrink icon-dim-16" />
<p className="m-0 fs-13 fw-4 lh-20 cn-9 dc__truncate">{relativeSnapshotTime}</p>
</div>
</div>
</Tooltip>
)}
{!loadingResourceTree && environment && (
<>
{!isdeploymentAppDeleting && (
Expand Down Expand Up @@ -204,7 +238,7 @@ export const SourceInfo = ({
<button
data-testid="app-details-rotate-pods-modal-button"
className="cta cta-with-img small cancel fs-12 fw-6 mr-6"
onClick={setRotateModal}
onClick={() => setRotateModal(true)}
disabled={isApprovalConfigured}
>
<RotateIcon className="icon-dim-16 mr-6 icon-color-n7 scn-4" />
Expand Down Expand Up @@ -258,16 +292,17 @@ export const SourceInfo = ({
: !isdeploymentAppDeleting &&
environment && (
<div className="flex left w-100">
{!isVirtualEnvironment && (
<AppStatusCard
appDetails={appDetails}
status={status}
cardLoading={cardLoading}
setDetailed={setDetailed}
message={message}
/>
{status && (
<AppStatusCard
// TODO: Fix and remove
// @ts-ignore
appDetails={appDetails}
status={status}
cardLoading={cardLoading}
setDetailed={setDetailed}
message={message}
/>
)}
{isVirtualEnvironment && renderGeneratedManifestDownloadCard()}
{!helmMigratedAppNotTriggered && (
<>
{!loadingResourceTree && (
Expand All @@ -278,10 +313,24 @@ export const SourceInfo = ({
setDetailed={setDetailed}
/>
)}
{isIsolatedEnv && (
<HelmAppConfigApplyStatusCard
cardLoading={cardLoading}
releaseStatus={appDetails.resourceTree.releaseStatus}
/>
)}
</>
)}
{isVirtualEnvironment && !isIsolatedEnv && renderGeneratedManifestDownloadCard()}
{!helmMigratedAppNotTriggered && (
<>
<DeploymentStatusCard
deploymentStatusDetailsBreakdownData={deploymentStatusDetailsBreakdownData}
cardLoading={cardLoading}
hideDetails={appDetails?.deploymentAppType === DeploymentAppTypes.HELM}
hideDetails={
appDetails?.deploymentAppType === DeploymentAppTypes.HELM ||
isIsolatedEnv
}
isVirtualEnvironment={isVirtualEnvironment}
refetchDeploymentStatus={refetchDeploymentStatus}
/>
Expand Down
5 changes: 0 additions & 5 deletions src/components/app/details/appDetails/appDetails.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1927,11 +1927,6 @@ table.resource-tree {
margin-left: 8px !important;
}

.app-details-manifest-download-card {
overflow: hidden;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
}

.app-details-info-card {
align-items: flex-start;
flex-direction: column;
Expand Down
2 changes: 1 addition & 1 deletion src/components/app/details/appDetails/appDetails.type.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,7 +239,7 @@ export interface SecurityVulnerabilityCardType {
}

export interface DeployedCommitCardType {
showCommitInfoDrawer: () => void
showCommitInfoDrawer: (e) => void
cardLoading?: boolean
envId: number | string
ciArtifactId: number
Expand Down
10 changes: 10 additions & 0 deletions src/components/app/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import {
RuntimeParamsListItemType,
RuntimeParamsTriggerPayloadType,
ReleaseMode,
HelmReleaseStatus,
} from '@devtron-labs/devtron-fe-common-lib'
import { RouteComponentProps } from 'react-router'
import { AppEnvironment } from '../../services/service.types'
Expand Down Expand Up @@ -90,9 +91,14 @@ export interface CDModalProps {
parentEnvironmentName: string
ciPipelineId?: number
isRedirectedFromAppDetails?: boolean
deploymentUserActionState?: ACTION_STATE
}

export interface AppDetails extends CDModalProps {
appStoreChartId: number
appStoreChartName: string
appStoreAppVersion: string
appStoreAppName: string
appId: number
deploymentAppType?: DeploymentAppTypes
externalCi?: boolean
Expand Down Expand Up @@ -187,6 +193,10 @@ interface ResourceTree {
status: string
podMetadata: PodMetadatum[]
conditions?: any
releaseStatus?: HelmReleaseStatus
// lastSnapshotTime and wfrId are only available for isolated
lastSnapshotTime?: string
wfrId?: number
}

interface Node {
Expand Down
Loading

0 comments on commit 6d5ecfa

Please sign in to comment.