Missing resources messages in past conversion view

Azure · Dec 6, 2023 · b45c69b · b45c69b
1 parent ccbfd90
commit b45c69b
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 45 deletions.
diff --git a/src/common/store/conversion.store.js b/src/common/store/conversion.store.js
@@ -1,8 +1,7 @@
-import { create } from 'zustand';
-
-import { startConversion, startDataset, startTileset, uploadConversion } from 'common/api/conversion';
 import { fetchFromLocation } from 'common/api';
+import { startConversion, startDataset, startTileset, uploadConversion } from 'common/api/conversion';
 import { HTTP_STATUS_CODE } from 'common/constants';
+import { create } from 'zustand';
 import { LRO_STATUS } from './response.store';
 import { useUserStore } from './user.store';
 
@@ -11,6 +10,7 @@ const RESOURCE_LOCATION = 'Resource-Location';
 const fetchTimeout = 10000;
 
 export const conversionStatuses = {
+  deleted: -1,
   empty: 0,
   inProgress: 1,
   finishedSuccessfully: 2,

diff --git a/src/pages/conversion/conversion-content.js b/src/pages/conversion/conversion-content.js
@@ -1,10 +1,10 @@
+import { MessageBar } from '@fluentui/react';
+import { conversionStatuses, conversionSteps } from 'common/store/conversion.store';
 import { useTranslation } from 'react-i18next';
-
-import { conversionSteps, conversionStatuses } from 'common/store/conversion.store';
-import { boldHeader, contentContainer, logContainer, metaInfoContainer } from './style';
-import { Log } from './log';
-import { DownloadLogs } from './download-logs';
 import CopyIcon from './copy-icon';
+import { DownloadLogs } from './download-logs';
+import { Log } from './log';
+import { boldHeader, contentContainer, logContainer, metaInfoContainer } from './style';
 
 const ConversionContent = ({
   conversionStepStatus,
@@ -22,6 +22,11 @@ const ConversionContent = ({
   return (
     <div className={contentContainer}>
       <div className={metaInfoContainer}>
+        {conversionStepStatus === conversionStatuses.deleted && (
+          <div style={{ marginBottom: '1rem' }}>
+            <MessageBar>{t('resource.deleted')}</MessageBar>
+          </div>
+        )}
         <span className={boldHeader}>ConversionId</span>: {conversionId === null ? '' : conversionId}
         <CopyIcon textToCopy={conversionId} />
       </div>

diff --git a/src/pages/conversion/dataset-content.js b/src/pages/conversion/dataset-content.js
@@ -1,10 +1,10 @@
+import { MessageBar } from '@fluentui/react';
+import { conversionStatuses, conversionSteps } from 'common/store/conversion.store';
 import { useTranslation } from 'react-i18next';
-
-import { conversionSteps, conversionStatuses } from 'common/store/conversion.store';
-import { boldHeader, contentContainer, logContainer, metaInfoContainer } from './style';
-import { Log } from './log';
-import { DownloadLogs } from './download-logs';
 import CopyIcon from './copy-icon';
+import { DownloadLogs } from './download-logs';
+import { Log } from './log';
+import { boldHeader, contentContainer, logContainer, metaInfoContainer } from './style';
 
 const DatasetContent = ({ datasetStepStatus, datasetOperationLog, datasetId, selectedStep }) => {
   const { t } = useTranslation();
@@ -16,6 +16,11 @@ const DatasetContent = ({ datasetStepStatus, datasetOperationLog, datasetId, sel
   return (
     <div className={contentContainer}>
       <div className={metaInfoContainer}>
+        {datasetStepStatus === conversionStatuses.deleted && (
+          <div style={{ marginBottom: '1rem' }}>
+            <MessageBar>{t('resource.deleted')}</MessageBar>
+          </div>
+        )}
         <span className={boldHeader}>DatasetId</span>: {datasetId === null ? '' : datasetId}
         <CopyIcon textToCopy={datasetId} />
       </div>

diff --git a/src/pages/conversion/icon.js b/src/pages/conversion/icon.js
@@ -1,22 +1,24 @@
 import { Icon } from '@fluentui/react/lib/Icon';
+import { conversionStatuses } from 'common/store/conversion.store';
 import { useTranslation } from 'react-i18next';
-
 import { defaultIcon, failedIcon, inProgressIcon, successIcon } from './style';
-import { conversionStatuses } from 'common/store/conversion.store';
 
 const StepIcon = ({ status }) => {
   const { t } = useTranslation();
 
+  if (status === conversionStatuses.deleted) {
+    return <Icon iconName="Unknown" aria-label={t('package.conversion')} className={defaultIcon} />;
+  }
   if (status === conversionStatuses.finishedSuccessfully) {
-    return <Icon iconName="SkypeCircleCheck" ariaLabel={t('package.conversion')} className={successIcon} />;
+    return <Icon iconName="SkypeCircleCheck" aria-label={t('package.conversion')} className={successIcon} />;
   }
   if (status === conversionStatuses.inProgress) {
-    return <Icon iconName="SyncStatusSolid" ariaLabel={t('package.conversion')} className={inProgressIcon} />;
+    return <Icon iconName="SyncStatusSolid" aria-label={t('package.conversion')} className={inProgressIcon} />;
   }
   if (status === conversionStatuses.failed) {
-    return <Icon iconName="StatusErrorFull" ariaLabel={t('package.conversion')} className={failedIcon} />;
+    return <Icon iconName="StatusErrorFull" aria-label={t('package.conversion')} className={failedIcon} />;
   }
-  return <Icon iconName="StatusCircleRing" ariaLabel={t('package.conversion')} className={defaultIcon} />;
+  return <Icon iconName="StatusCircleRing" aria-label={t('package.conversion')} className={defaultIcon} />;
 };
 
 export default StepIcon;
diff --git a/src/pages/conversion/past-conversion.js b/src/pages/conversion/past-conversion.js
@@ -1,21 +1,20 @@
-import { shallow } from 'zustand/shallow';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
 import { cx } from '@emotion/css';
 import { Icon } from '@fluentui/react/lib/Icon';
-
 import { PATHS } from 'common';
-import { container, content, enabledStep, step as stepStyle, stepsContainer, stepTitle } from './style';
-import UploadContent from './upload-content';
+import { conversionSteps } from 'common/store';
+import { useConversionPastStore } from 'common/store/conversion-past.store';
+import { conversionStatuses } from 'common/store/conversion.store';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { shallow } from 'zustand/shallow';
 import ConversionContent from './conversion-content';
 import DatasetContent from './dataset-content';
-import TilesetContent from './tileset-content';
 import MapContent from './map-content';
 import StepButton from './step-button';
-import { conversionSteps } from 'common/store';
-import { useConversionPastStore } from 'common/store/conversion-past.store';
-
-import { conversionStatuses } from 'common/store/conversion.store';
+import { container, content, enabledStep, step as stepStyle, stepTitle, stepsContainer } from './style';
+import TilesetContent from './tileset-content';
+import UploadContent from './upload-content';
 
 const conversionStoreSelector = s => [
   s.uploadStepStatus,
@@ -77,6 +76,18 @@ const Conversion = () => {
     selectedStep,
   ] = useConversionPastStore(conversionStoreSelector, shallow);
 
+  const [uploadStatus = 0, conversionStatus = 0, datasetStatus = 0, tilesetStatus = 0] = useMemo(() => {
+    const statuses = [uploadStepStatus, conversionStepStatus, datasetStepStatus, tilesetStepStatus];
+
+    const updatedStatuses = statuses.map((currStatus, index) => {
+      const isResourceDeleted = !currStatus && statuses.slice(index + 1, 4).some(v => v > conversionStatuses.empty);
+      if (isResourceDeleted) return -1;
+      return currStatus;
+    });
+
+    return updatedStatuses;
+  }, [uploadStepStatus, conversionStepStatus, datasetStepStatus, tilesetStepStatus]);
+
   return (
     <div className={container}>
       <div className={stepsContainer}>
@@ -90,7 +101,7 @@ const Conversion = () => {
         <StepButton
           endTime={uploadEndTime}
           label={t('select.upload.step')}
-          status={uploadStepStatus}
+          status={uploadStatus}
           startTime={uploadStartTime}
           step={conversionSteps.upload}
           title={t('package.upload')}
@@ -100,7 +111,7 @@ const Conversion = () => {
         <StepButton
           endTime={conversionEndTime}
           label={t('select.conversion.step')}
-          status={conversionStepStatus}
+          status={conversionStatus}
           startTime={conversionStartTime}
           step={conversionSteps.conversion}
           title={t('package.conversion')}
@@ -110,7 +121,7 @@ const Conversion = () => {
         <StepButton
           endTime={datasetEndTime}
           label={t('select.dataset.step')}
-          status={datasetStepStatus}
+          status={datasetStatus}
           startTime={datasetStartTime}
           step={conversionSteps.dataset}
           title={t('dataset.creation')}
@@ -120,7 +131,7 @@ const Conversion = () => {
         <StepButton
           endTime={tilesetEndTime}
           label={t('select.tileset.step')}
-          status={tilesetStepStatus}
+          status={tilesetStatus}
           startTime={tilesetStartTime}
           step={conversionSteps.tileset}
           title={t('tileset.creation')}
@@ -139,26 +150,26 @@ const Conversion = () => {
       </div>
       <div className={content}>
         <UploadContent
-          uploadStepStatus={uploadStepStatus}
+          uploadStepStatus={uploadStatus}
           uploadOperationLog={uploadOperationLog}
           uploadUdId={uploadUdId}
           selectedStep={selectedStep}
         />
         <ConversionContent
-          conversionStepStatus={conversionStepStatus}
+          conversionStepStatus={conversionStatus}
           conversionOperationLog={conversionOperationLog}
           selectedStep={selectedStep}
           conversionId={conversionId}
           diagnosticPackageLocation={diagnosticPackageLocation}
         />
         <DatasetContent
-          datasetStepStatus={datasetStepStatus}
+          datasetStepStatus={datasetStatus}
           datasetOperationLog={datasetOperationLog}
           datasetId={datasetId}
           selectedStep={selectedStep}
         />
         <TilesetContent
-          tilesetStepStatus={tilesetStepStatus}
+          tilesetStepStatus={tilesetStatus}
           tilesetOperationLog={tilesetOperationLog}
           selectedStep={selectedStep}
           mapConfigurationId={mapConfigurationId}

diff --git a/src/pages/conversion/tileset-content.js b/src/pages/conversion/tileset-content.js
@@ -1,10 +1,10 @@
+import { MessageBar } from '@fluentui/react';
+import { conversionStatuses, conversionSteps } from 'common/store/conversion.store';
 import { useTranslation } from 'react-i18next';
-
-import { conversionSteps, conversionStatuses } from 'common/store/conversion.store';
-import { boldHeader, contentContainer, logContainer, metaInfoContainer } from './style';
-import { Log } from './log';
-import { DownloadLogs } from './download-logs';
 import CopyIcon from './copy-icon';
+import { DownloadLogs } from './download-logs';
+import { Log } from './log';
+import { boldHeader, contentContainer, logContainer, metaInfoContainer } from './style';
 
 const TilesetContent = ({ tilesetStepStatus, tilesetOperationLog, selectedStep, mapConfigurationId, tilesetId }) => {
   const { t } = useTranslation();
@@ -17,6 +17,11 @@ const TilesetContent = ({ tilesetStepStatus, tilesetOperationLog, selectedStep,
     <div className={contentContainer}>
       <div className={metaInfoContainer}>
         <div>
+          {tilesetStepStatus === conversionStatuses.deleted && (
+            <div style={{ marginBottom: '1rem' }}>
+              <MessageBar>{t('resource.deleted')}</MessageBar>
+            </div>
+          )}
           <span className={boldHeader}>MapConfigurationId</span>:{' '}
           {mapConfigurationId === null ? '' : mapConfigurationId}
           <CopyIcon textToCopy={mapConfigurationId} />

diff --git a/src/pages/conversion/upload-content.js b/src/pages/conversion/upload-content.js
@@ -1,6 +1,6 @@
-import { useTranslation } from 'react-i18next';
-
+import { MessageBar } from '@fluentui/react';
 import { conversionStatuses, conversionSteps } from 'common/store/conversion.store';
+import { useTranslation } from 'react-i18next';
 import CopyIcon from './copy-icon';
 import { DownloadLogs } from './download-logs';
 import { Log } from './log';
@@ -16,6 +16,11 @@ const UploadContent = ({ uploadStepStatus, uploadOperationLog, uploadUdId, selec
   return (
     <div className={contentContainer}>
       <div className={metaInfoContainer}>
+        {uploadStepStatus === conversionStatuses.deleted && (
+          <div style={{ marginBottom: '1rem' }}>
+            <MessageBar>{t('resource.deleted')}</MessageBar>
+          </div>
+        )}
         <span className={boldHeader}>Udid</span>: {uploadUdId === null ? '' : uploadUdId}
         <CopyIcon textToCopy={uploadUdId} />
       </div>