From a7ed7a090c90de380cf98f5f2894efcfa08b174d Mon Sep 17 00:00:00 2001 From: calvin Date: Sat, 16 Sep 2023 17:55:51 -0600 Subject: [PATCH] feat: [code-860]: add the sse export progress --- .../SpaceSettings/ExportForm/ExportForm.tsx | 2 +- web/src/pages/SpaceSettings/SpaceSettings.tsx | 86 +++++++++++++------ 2 files changed, 60 insertions(+), 28 deletions(-) diff --git a/web/src/pages/SpaceSettings/ExportForm/ExportForm.tsx b/web/src/pages/SpaceSettings/ExportForm/ExportForm.tsx index 5a6b48220..fd0eb8377 100644 --- a/web/src/pages/SpaceSettings/ExportForm/ExportForm.tsx +++ b/web/src/pages/SpaceSettings/ExportForm/ExportForm.tsx @@ -20,10 +20,10 @@ import { } from '@harnessio/uicore' import { Icon } from '@harnessio/icons' import type { TypesRepository } from 'services/code' -import Upgrade from '../../../icons/Upgrade.svg' import { useStrings } from 'framework/strings' import type { ExportFormDataExtended } from 'utils/GitUtils' +import Upgrade from '../../../icons/Upgrade.svg' import css from '../SpaceSettings.module.scss' interface ExportFormProps { diff --git a/web/src/pages/SpaceSettings/SpaceSettings.tsx b/web/src/pages/SpaceSettings/SpaceSettings.tsx index ca46daf59..249f23043 100644 --- a/web/src/pages/SpaceSettings/SpaceSettings.tsx +++ b/web/src/pages/SpaceSettings/SpaceSettings.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import React, { useEffect, useState } from 'react' import { Button, Text, @@ -13,25 +13,26 @@ import { useToaster, Heading } from '@harnessio/uicore' -import { useMutate } from 'restful-react' +import { noop } from 'lodash-es' +import { useMutate, useGet } from 'restful-react' import { Intent, Color, FontVariation } from '@harnessio/design-system' -import { useGetSpace } from 'services/code' -import { useGetRepositoryMetadata } from 'hooks/useGetRepositoryMetadata' -import { ACCESS_MODES, permissionProps, voidFn } from 'utils/Utils' -import { Dialog } from '@blueprintjs/core' -import { ProgressBar, Intent as IntentCore } from '@blueprintjs/core' import { useHistory } from 'react-router-dom' +import { Dialog } from '@blueprintjs/core' +import { useGetRepositoryMetadata } from 'hooks/useGetRepositoryMetadata' +import { ProgressBar, Intent as IntentCore } from '@blueprintjs/core' +import { TypesJobProgress, useGetSpace } from 'services/code' import { useAppContext } from 'AppContext' import { useStrings } from 'framework/strings' -import useDeleteSpaceModal from './DeleteSpaceModal/DeleteSpaceModal' -import Harness from '../../icons/Harness.svg' -import Upgrade from '../../icons/Upgrade.svg' import { getErrorMessage } from 'utils/Utils' +import { ACCESS_MODES, permissionProps, voidFn } from 'utils/Utils' import type { ExportFormDataExtended } from 'utils/GitUtils' import { useModalHook } from 'hooks/useModalHook' +import useSpaceSSE from 'hooks/useSpaceSSE' +import Harness from '../../icons/Harness.svg' +import Upgrade from '../../icons/Upgrade.svg' +import useDeleteSpaceModal from './DeleteSpaceModal/DeleteSpaceModal' import ExportForm from './ExportForm/ExportForm' import css from './SpaceSettings.module.scss' -import useSpaceSSE from 'hooks/useSpaceSSE' export default function SpaceSettings() { const { space } = useGetRepositoryMetadata() @@ -56,18 +57,59 @@ export default function SpaceSettings() { verb: 'POST', path: `/api/v1/spaces/${space}/move` }) + const { data: exportProgressSpace, refetch: refetchExport } = useGet({ + path: `/api/v1/spaces/${space}/export-progress` + }) + const countFinishedRepos = () => { + return exportProgressSpace?.repos.filter((repo: TypesJobProgress) => repo.state === 'finished').length + } + + const checkReposState = () => { + return exportProgressSpace?.repos.every( + (repo: TypesJobProgress) => repo.state === 'finished' || repo.state === 'failed' || repo.state === 'canceled' + ) + } + + const checkExportIsRunning = () => { + return exportProgressSpace?.repos.every( + (repo: TypesJobProgress) => repo.state === 'running' || repo.state === 'scheduled' + ) + } + + useEffect(() => { + if (exportProgressSpace?.repos && checkExportIsRunning()) { + setUpgrading(true) + setRepoCount(exportProgressSpace?.repos.length) + } else if (exportProgressSpace?.repos && checkReposState()) { + setRepoCount(countFinishedRepos) + setExportDone(true) + } + }, [exportProgressSpace, checkExportIsRunning, checkReposState, countFinishedRepos]) + + useSpaceSSE({ + space, + events: ['repository_export_completed'], + onEvent: () => { + refetchExport() + + if (exportProgressSpace && checkReposState()) { + setRepoCount(countFinishedRepos) + setExportDone(true) + } + } + }) + const ExportModal = () => { - const { getString } = useStrings() const [step, setStep] = useState(0) const { mutate: exportSpace } = useMutate({ verb: 'POST', path: `/api/v1/spaces/${space}/export` }) + const handleExportSubmit = (formData: ExportFormDataExtended) => { try { setRepoCount(formData.repoCount) - setUpgrading(true) const exportPayload = { accountId: formData.accountId || '', orgIdentifier: formData.organization, @@ -77,6 +119,7 @@ export default function SpaceSettings() { exportSpace(exportPayload) .then(_ => { hideModal() + setUpgrading(true) }) .catch(_error => { showError(getErrorMessage(_error), 0, getString('failedToImportSpace')) @@ -86,17 +129,6 @@ export default function SpaceSettings() { } } - useSpaceSSE({ - space, - events: ['space_export_completed'], - onEvent: eventData => { - if (eventData.id === data?.id && data?.uid === eventData.uid) { - setExportDone(true) - } else if (eventData.status === 200) { - setExportDone(true) - } - } - }) return ( ) } - const [openModal, hideModal] = useModalHook(ExportModal, [() => {}, space]) + const [openModal, hideModal] = useModalHook(ExportModal, [noop, space]) const permEditResult = hooks?.usePermissionTranslate?.( { resource: { @@ -174,7 +206,7 @@ export default function SpaceSettings() { {upgrading ? ( {exportDone ? (