Skip to content

Commit

Permalink
ux improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@GnsP
GnsP committed Dec 8, 2023
1 parent f40ea5b commit 1032c4f
Show file tree
Hide file tree
Showing 15 changed files with 709 additions and 218 deletions.
2 changes: 1 addition & 1 deletion app/cdap/components/ResourceCenterEntity/PullPipelineWizard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export const PullPipelineWizard = ({ isOpen, error, dispatch }: IPullPipelineWiz
toggle={() => dispatch({ type: 'TOGGLE_MODAL' })}
>
<Provider store={SourceControlManagementSyncStore}>
<RemotePipelineListView redirectOnSubmit={true} />
<RemotePipelineListView redirectOnSubmit={true} singlePipelineMode={true} />
</Provider>
</StandardModal>
</>
Expand Down
91 changes: 71 additions & 20 deletions app/cdap/components/SourceControlManagement/LocalPipelineListView/PipelineTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,19 @@
* the License.
*/

import React from 'react';
import { Checkbox, Table, TableBody, TableCell, TableRow, TableHead } from '@material-ui/core';
import React, { useState } from 'react';
import {
Checkbox,
Table,
TableBody,
TableCell,
TableRow,
TableHead,
TableSortLabel,
} from '@material-ui/core';
import InfoIcon from '@material-ui/icons/Info';
import { setSelectedPipelines } from '../store/ActionCreator';
import { IRepositoryPipeline } from '../types';
import { IRepositoryPipeline, TSyncStatusFilter } from '../types';
import T from 'i18n-react';
import StatusButton from 'components/StatusButton';
import { SUPPORT } from 'components/StatusButton/constants';
Expand All @@ -30,33 +38,40 @@ import {
StyledFixedWidthCell,
StyledPopover,
} from '../styles';
import { compareSyncStatus, filterOnSyncStatus, stableSort } from '../helpers';
import LoadingSVG from 'components/shared/LoadingSVG';

const PREFIX = 'features.SourceControlManagement.table';

interface IRepositoryPipelineTableProps {
localPipelines: IRepositoryPipeline[];
selectedPipelines: string[];
showFailedOnly: boolean;
enableMultipleSelection?: boolean;
multiPushEnabled?: boolean;
disabled?: boolean;
syncStatusFilter?: TSyncStatusFilter;
}

export const LocalPipelineTable = ({
localPipelines,
selectedPipelines,
showFailedOnly,
enableMultipleSelection = false,
multiPushEnabled = false,
disabled = false,
syncStatusFilter = 'all',
}: IRepositoryPipelineTableProps) => {
const isSelected = (name: string) => selectedPipelines.indexOf(name) !== -1;
const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');

const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
if (disabled) {
return;
}

if (event.target.checked) {
const allSelected = localPipelines.map((pipeline) => pipeline.name);
const allSelected = filterOnSyncStatus(localPipelines, syncStatusFilter).map(
(pipeline) => pipeline.name
);
setSelectedPipelines(allSelected);
return;
}
Expand All @@ -68,7 +83,7 @@ export const LocalPipelineTable = ({
return;
}

if (enableMultipleSelection) {
if (multiPushEnabled) {
handleMultipleSelection(name);
return;
}
Expand Down Expand Up @@ -97,13 +112,22 @@ export const LocalPipelineTable = ({
setSelectedPipelines(newSelected);
};

const handleSort = () => {
const isAsc = sortOrder === 'asc';
setSortOrder(isAsc ? 'desc' : 'asc');
};

const syncStatusComparator = (a: IRepositoryPipeline, b: IRepositoryPipeline) => {
return sortOrder === 'desc' ? compareSyncStatus(a, b) : -compareSyncStatus(a, b);
};

return (
<TableBox>
<Table stickyHeader data-testid="local-pipelines-table">
<TableHead>
<TableRow>
<TableCell padding="checkbox">
{enableMultipleSelection && (
{multiPushEnabled && (
<Checkbox
color="primary"
indeterminate={
Expand All @@ -117,18 +141,30 @@ export const LocalPipelineTable = ({
</TableCell>
<TableCell></TableCell>
<StyledTableCell>{T.translate(`${PREFIX}.pipelineName`)}</StyledTableCell>
<StyledFixedWidthCell>
<div>
{T.translate(`${PREFIX}.gitStatus`)}
<StyledPopover target={() => <InfoIcon />} showOn="Hover">
{T.translate(`${PREFIX}.gitStatusHelperText`)}
</StyledPopover>
</div>
</StyledFixedWidthCell>
{multiPushEnabled && (
<StyledFixedWidthCell>
<TableSortLabel active={true} direction={sortOrder} onClick={handleSort}>
{T.translate(`${PREFIX}.gitSyncStatus`)}
</TableSortLabel>
</StyledFixedWidthCell>
)}
{!multiPushEnabled && (
<StyledFixedWidthCell>
<div>
{T.translate(`${PREFIX}.gitStatus`)}
<StyledPopover target={() => <InfoIcon />} showOn="Hover">
{T.translate(`${PREFIX}.gitStatusHelperText`)}
</StyledPopover>
</div>
</StyledFixedWidthCell>
)}
</TableRow>
</TableHead>
<TableBody>
{localPipelines.map((pipeline: IRepositoryPipeline) => {
{stableSort(
filterOnSyncStatus(localPipelines, syncStatusFilter),
syncStatusComparator
).map((pipeline: IRepositoryPipeline) => {
if (showFailedOnly && !pipeline.error) {
// only render pipelines that failed to push
return;
Expand Down Expand Up @@ -167,9 +203,24 @@ export const LocalPipelineTable = ({
)}
</StatusCell>
<StyledTableCell>{pipeline.name}</StyledTableCell>
<StyledFixedWidthCell>
{pipeline.fileHash ? T.translate(`${PREFIX}.connected`) : '--'}
</StyledFixedWidthCell>
{multiPushEnabled && (
<StyledFixedWidthCell>
{pipeline.syncStatus === undefined ||
pipeline.syncStatus === 'not_available' ? (
<LoadingSVG height="18px" />
) : pipeline.syncStatus === 'not_connected' ||
pipeline.syncStatus === 'out_of_sync' ? (
T.translate(`${PREFIX}.gitSyncStatusUnsynced`)
) : (
T.translate(`${PREFIX}.gitSyncStatusSynced`)
)}
</StyledFixedWidthCell>
)}
{!multiPushEnabled && (
<StyledFixedWidthCell>
{pipeline.fileHash ? T.translate(`${PREFIX}.connected`) : '--'}
</StyledFixedWidthCell>
)}
</StyledTableRow>
);
})}
Expand Down
90 changes: 17 additions & 73 deletions app/cdap/components/SourceControlManagement/LocalPipelineListView/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,23 +15,20 @@
*/

import PrimaryContainedButton from 'components/shared/Buttons/PrimaryContainedButton';
import React, { useEffect, useState } from 'react';
import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';
import { getCurrentNamespace } from 'services/NamespaceStore';
import Alert from '@material-ui/lab/Alert';
import AlertTitle from '@material-ui/lab/AlertTitle';
import {
countPushFailedPipelines,
fetchLatestOperation,
getNamespacePipelineList,
pushMultipleSelectedPipelines,
pushSelectedPipelines,
reset,
resetPushStatus,
setLoadingMessage,
setLocalPipelines,
setNameFilter,
stopOperation,
setSyncStatusFilter,
toggleCommitModal,
toggleShowFailedOnly,
} from '../store/ActionCreator';
Expand All @@ -42,30 +39,16 @@ import { CommitModal } from './CommitModal';
import cloneDeep from 'lodash/cloneDeep';
import PrimaryTextButton from 'components/shared/Buttons/PrimaryTextButton';
import { LocalPipelineTable } from './PipelineTable';
import { useOnUnmount } from 'services/react/customHooks/useOnUnmount';
import {
AlertErrorView,
FailStatusDiv,
PipelineListContainer,
StyledSelectionStatusDiv,
} from '../styles';
import { IListResponse, IOperationMetaResponse, IOperationRun } from '../types';
import { FailStatusDiv, PipelineListContainer, StyledSelectionStatusDiv } from '../styles';
import { IListResponse, IOperationMetaResponse } from '../types';
import { useFeatureFlagDefaultFalse } from 'services/react/customHooks/useFeatureFlag';
import {
getOperationRunMessage,
getOperationStartTime,
getOperationStatusType,
parseOperationResource,
} from '../helpers';
import Button from '@material-ui/core/Button';
import { OperationStatus } from '../OperationStatus';
import ExpandLess from '@material-ui/icons/ExpandLess';
import ExpandMore from '@material-ui/icons/ExpandMore';
import { parseOperationResource } from '../helpers';
import { OperationAlert } from '../OperationAlert';
import { SyncStatusFilters } from '../SyncStatusFilters';

const PREFIX = 'features.SourceControlManagement.push';

export const LocalPipelineListView = () => {
const [viewErrorExpanded, setViewErrorExpanded] = useState(false);
const {
ready,
localPipelines,
Expand All @@ -74,6 +57,7 @@ export const LocalPipelineListView = () => {
commitModalOpen,
loadingMessage,
showFailedOnly,
syncStatusFilter,
} = useSelector(({ push }) => push);

const { running: isAnOperationRunning, operation } = useSelector(
Expand All @@ -97,8 +81,6 @@ export const LocalPipelineListView = () => {
}
}, []);

useOnUnmount(() => reset());

const onPushSubmit = (commitMessage: string) => {
resetPushStatus();
const pushedPipelines = cloneDeep(localPipelines);
Expand Down Expand Up @@ -156,12 +138,19 @@ export const LocalPipelineListView = () => {
if (localPipelines.length > 0) {
return (
<>
{multiPushEnabled && (
<SyncStatusFilters
syncStatusFilter={syncStatusFilter}
setSyncStatusFilter={setSyncStatusFilter}
/>
)}
<LocalPipelineTable
localPipelines={localPipelines}
selectedPipelines={selectedPipelines}
showFailedOnly={showFailedOnly}
enableMultipleSelection={multiPushEnabled}
multiPushEnabled={multiPushEnabled}
disabled={isAnOperationRunning}
syncStatusFilter={syncStatusFilter}
/>
<PrimaryContainedButton
onClick={toggleCommitModal}
Expand All @@ -177,55 +166,10 @@ export const LocalPipelineListView = () => {
return <div>{T.translate(`${PREFIX}.emptyPipelineListMessage`, { query: nameFilter })}</div>;
};

const getOperationAction = () => {
if (!operation.done) {
return (
<Button
color="inherit"
size="small"
onClick={stopOperation(getCurrentNamespace(), operation)}
>
{T.translate(`${PREFIX}.stopOperation`)}
</Button>
);
}

if (operation.status === OperationStatus.FAILED) {
return (
<Button
color="inherit"
size="small"
onClick={() => setViewErrorExpanded((isExpanded) => !isExpanded)}
>
{viewErrorExpanded ? <ExpandLess /> : <ExpandMore />}
</Button>
);
}

return undefined;
};

return (
<PipelineListContainer>
{operation && multiPushEnabled && <OperationAlert operation={operation} />}
<SearchBox nameFilter={nameFilter} setNameFilter={setNameFilter} />
{operation && (
<Alert
variant="filled"
severity={getOperationStatusType(operation)}
action={getOperationAction()}
data-testid="latest_operation_banner"
>
<AlertTitle>{getOperationRunMessage(operation)}</AlertTitle>
{getOperationStartTime(operation)}
{operation.status === OperationStatus.FAILED && viewErrorExpanded && (
<AlertErrorView>
Operation ID: {operation.id}
<br />
Error: {operation.error.message}
</AlertErrorView>
)}
</Alert>
)}
{selectedPipelines.length > 0 && (
<StyledSelectionStatusDiv>
<div>
Expand Down
Loading

0 comments on commit 1032c4f

Please sign in to comment.