diff --git a/src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobActionMenu.tsx b/src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobActionMenu.tsx index 80302731e..f57f1f226 100644 --- a/src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobActionMenu.tsx +++ b/src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobActionMenu.tsx @@ -19,16 +19,19 @@ const CopyJobActionMenu: React.FC = ({ job, handleClick { key: CopyJobActions.pause, text: ContainerCopyMessages.MonitorJobs.Actions.pause, + iconProps: { iconName: "Pause" }, onClick: () => handleClick(job, CopyJobActions.pause), }, { key: CopyJobActions.cancel, text: ContainerCopyMessages.MonitorJobs.Actions.cancel, + iconProps: { iconName: "Cancel" }, onClick: () => handleClick(job, CopyJobActions.cancel), }, { key: CopyJobActions.resume, text: ContainerCopyMessages.MonitorJobs.Actions.resume, + iconProps: { iconName: "Play" }, onClick: () => handleClick(job, CopyJobActions.resume), }, ]; @@ -49,6 +52,7 @@ const CopyJobActionMenu: React.FC = ({ job, handleClick filteredItems.push({ key: CopyJobActions.complete, text: ContainerCopyMessages.MonitorJobs.Actions.complete, + iconProps: { iconName: "CheckMark" }, onClick: () => handleClick(job, CopyJobActions.complete), }); } @@ -65,8 +69,9 @@ const CopyJobActionMenu: React.FC = ({ job, handleClick return ( diff --git a/src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobColumns.tsx b/src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobColumns.tsx index 0ab1c76d4..067084542 100644 --- a/src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobColumns.tsx +++ b/src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobColumns.tsx @@ -11,68 +11,69 @@ export const getColumns = ( sortedColumnKey: string | undefined, isSortedDescending: boolean, ): IColumn[] => [ - { - key: "LastUpdatedTime", - name: ContainerCopyMessages.MonitorJobs.Columns.lastUpdatedTime, - fieldName: "LastUpdatedTime", - minWidth: 100, - maxWidth: 150, - isResizable: true, - isSorted: sortedColumnKey === "timestamp", - isSortedDescending: isSortedDescending, - onColumnClick: () => handleSort("timestamp"), - }, - { - key: "Name", - name: ContainerCopyMessages.MonitorJobs.Columns.name, - fieldName: "Name", - minWidth: 90, - maxWidth: 130, - isResizable: true, - isSorted: sortedColumnKey === "Name", - isSortedDescending: isSortedDescending, - onColumnClick: () => handleSort("Name"), - }, - { - key: "Mode", - name: ContainerCopyMessages.MonitorJobs.Columns.mode, - fieldName: "Mode", - minWidth: 70, - maxWidth: 90, - isResizable: true, - isSorted: sortedColumnKey === "Mode", - isSortedDescending: isSortedDescending, - onColumnClick: () => handleSort("Mode"), - }, - { - key: "CompletionPercentage", - name: ContainerCopyMessages.MonitorJobs.Columns.completionPercentage, - fieldName: "CompletionPercentage", - minWidth: 120, - maxWidth: 130, - isResizable: true, - isSorted: sortedColumnKey === "CompletionPercentage", - isSortedDescending: isSortedDescending, - onRender: (job: CopyJobType) => `${job.CompletionPercentage}%`, - onColumnClick: () => handleSort("CompletionPercentage"), - }, - { - key: "CopyJobStatus", - name: ContainerCopyMessages.MonitorJobs.Columns.status, - fieldName: "Status", - minWidth: 80, - maxWidth: 100, - isResizable: true, - isSorted: sortedColumnKey === "Status", - isSortedDescending: isSortedDescending, - onRender: (job: CopyJobType) => , - onColumnClick: () => handleSort("Status"), - }, - { - key: "Actions", - name: ContainerCopyMessages.MonitorJobs.Columns.actions, - minWidth: 200, - isResizable: true, - onRender: (job: CopyJobType) => , - }, -]; + { + key: "LastUpdatedTime", + name: ContainerCopyMessages.MonitorJobs.Columns.lastUpdatedTime, + fieldName: "LastUpdatedTime", + minWidth: 140, + maxWidth: 300, + isResizable: true, + isSorted: sortedColumnKey === "timestamp", + isSortedDescending: isSortedDescending, + onColumnClick: () => handleSort("timestamp"), + }, + { + key: "Name", + name: ContainerCopyMessages.MonitorJobs.Columns.name, + fieldName: "Name", + minWidth: 140, + maxWidth: 300, + isResizable: true, + isSorted: sortedColumnKey === "Name", + isSortedDescending: isSortedDescending, + onColumnClick: () => handleSort("Name"), + }, + { + key: "Mode", + name: ContainerCopyMessages.MonitorJobs.Columns.mode, + fieldName: "Mode", + minWidth: 90, + maxWidth: 200, + isResizable: true, + isSorted: sortedColumnKey === "Mode", + isSortedDescending: isSortedDescending, + onColumnClick: () => handleSort("Mode"), + }, + { + key: "CompletionPercentage", + name: ContainerCopyMessages.MonitorJobs.Columns.completionPercentage, + fieldName: "CompletionPercentage", + minWidth: 110, + maxWidth: 200, + isResizable: true, + isSorted: sortedColumnKey === "CompletionPercentage", + isSortedDescending: isSortedDescending, + onRender: (job: CopyJobType) => `${job.CompletionPercentage}%`, + onColumnClick: () => handleSort("CompletionPercentage"), + }, + { + key: "CopyJobStatus", + name: ContainerCopyMessages.MonitorJobs.Columns.status, + fieldName: "Status", + minWidth: 130, + maxWidth: 200, + isResizable: true, + isSorted: sortedColumnKey === "Status", + isSortedDescending: isSortedDescending, + onRender: (job: CopyJobType) => , + onColumnClick: () => handleSort("Status"), + }, + { + key: "Actions", + name: "", + minWidth: 80, + maxWidth: 200, + isResizable: true, + onRender: (job: CopyJobType) => , + }, + ]; diff --git a/src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobStatusWithIcon.tsx b/src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobStatusWithIcon.tsx index fadcc7186..b0c5b5e50 100644 --- a/src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobStatusWithIcon.tsx +++ b/src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobStatusWithIcon.tsx @@ -1,38 +1,39 @@ -import { FontIcon, mergeStyles, mergeStyleSets, Stack, Text } from "@fluentui/react"; +import { FontIcon, getTheme, mergeStyles, mergeStyleSets, Stack, Text } from "@fluentui/react"; import React from "react"; import ContainerCopyMessages from "../../ContainerCopyMessages"; import { CopyJobStatusType } from "../../Enums"; -// Styles +const theme = getTheme(); + const iconClass = mergeStyles({ - fontSize: "1em", - marginRight: "0.3em", -}); -const classNames = mergeStyleSets({ - [CopyJobStatusType.Pending]: [{ color: "#fe7f2d" }, iconClass], - [CopyJobStatusType.InProgress]: [{ color: "#ee9b00" }, iconClass], - [CopyJobStatusType.Running]: [{ color: "#ee9b00" }, iconClass], - [CopyJobStatusType.Partitioning]: [{ color: "#ee9b00" }, iconClass], - [CopyJobStatusType.Paused]: [{ color: "#bb3e03" }, iconClass], - [CopyJobStatusType.Skipped]: [{ color: "#00bbf9" }, iconClass], - [CopyJobStatusType.Cancelled]: [{ color: "#00bbf9" }, iconClass], - [CopyJobStatusType.Failed]: [{ color: "#d90429" }, iconClass], - [CopyJobStatusType.Faulted]: [{ color: "#d90429" }, iconClass], - [CopyJobStatusType.Completed]: [{ color: "#386641" }, iconClass], - unknown: [{ color: "#000814" }, iconClass], + fontSize: "16px", + marginRight: "8px", +}); + +const classNames = mergeStyleSets({ + [CopyJobStatusType.Pending]: [{ color: theme.semanticColors.bodySubtext }, iconClass], + [CopyJobStatusType.InProgress]: [{ color: theme.palette.themePrimary }, iconClass], + [CopyJobStatusType.Running]: [{ color: theme.palette.themePrimary }, iconClass], + [CopyJobStatusType.Partitioning]: [{ color: theme.palette.themePrimary }, iconClass], + [CopyJobStatusType.Paused]: [{ color: theme.palette.themePrimary }, iconClass], + [CopyJobStatusType.Skipped]: [{ color: theme.semanticColors.bodySubtext }, iconClass], + [CopyJobStatusType.Cancelled]: [{ color: theme.semanticColors.bodySubtext }, iconClass], + [CopyJobStatusType.Failed]: [{ color: theme.semanticColors.errorIcon }, iconClass], + [CopyJobStatusType.Faulted]: [{ color: theme.semanticColors.errorIcon }, iconClass], + [CopyJobStatusType.Completed]: [{ color: theme.semanticColors.successIcon }, iconClass], + unknown: [{ color: theme.semanticColors.bodySubtext }, iconClass], }); -// Icon Mapping const iconMap: Record = { - [CopyJobStatusType.Pending]: "MSNVideosSolid", - [CopyJobStatusType.InProgress]: "SyncStatusSolid", - [CopyJobStatusType.Running]: "SyncStatusSolid", - [CopyJobStatusType.Partitioning]: "SyncStatusSolid", - [CopyJobStatusType.Paused]: "CirclePauseSolid", - [CopyJobStatusType.Skipped]: "Blocked2Solid", - [CopyJobStatusType.Cancelled]: "Blocked2Solid", - [CopyJobStatusType.Failed]: "AlertSolid", - [CopyJobStatusType.Faulted]: "AlertSolid", + [CopyJobStatusType.Pending]: "StatusCircleRing", + [CopyJobStatusType.InProgress]: "ProgressRingDots", + [CopyJobStatusType.Running]: "ProgressRingDots", + [CopyJobStatusType.Partitioning]: "ProgressRingDots", + [CopyJobStatusType.Paused]: "CirclePause", + [CopyJobStatusType.Skipped]: "StatusCircleBlock2", + [CopyJobStatusType.Cancelled]: "StatusErrorFull", + [CopyJobStatusType.Failed]: "StatusErrorFull", + [CopyJobStatusType.Faulted]: "StatusErrorFull", [CopyJobStatusType.Completed]: "CompletedSolid", }; diff --git a/src/Explorer/ContainerCopy/containerCopyStyles.less b/src/Explorer/ContainerCopy/containerCopyStyles.less index fa24ef8b7..e81e71461 100644 --- a/src/Explorer/ContainerCopy/containerCopyStyles.less +++ b/src/Explorer/ContainerCopy/containerCopyStyles.less @@ -1,81 +1,128 @@ @import "../../../less/Common/Constants.less"; #containerCopyWrapper { - .centerContent { - justify-content: center; - align-items: center; + .centerContent { + justify-content: center; + align-items: center; + } + .notFoundContainer { + .noCopyJobsMessage { + font-weight: 600; + margin: 0 auto; + color: @FocusColor; } - .notFoundContainer { - .noCopyJobsMessage { - font-weight: 600; - margin: 0 auto; - color: @FocusColor; - } - button.createCopyJobButton { - color: @LinkColor; - } + button.createCopyJobButton { + color: @LinkColor; } + } } .createCopyJobScreensContainer { - height: 100%; - padding: 1em 1.5em; - .bold { - font-weight: 600; + height: 100%; + padding: 1em 1.5em; + .bold { + font-weight: 600; + } + label { + padding: 0; + } + .flex-row { + display: flex; + flex-direction: row; + label.field-label { + font-weight: 600; } - label { - padding: 0; + .flex-fixed-width { + flex: 0 0 auto; + width: 150px; } - .flex-row { - display: flex; - flex-direction: row; - label.field-label { - font-weight: 600; - } - .flex-fixed-width { - flex: 0 0 auto; - width: 150px; - } - .flex-grow-col { - flex: 1 1 auto; - } + .flex-grow-col { + flex: 1 1 auto; } - .databaseContainerSection { - label.subHeading { - font: inherit; - padding: unset; - font-weight: 600; - } + } + .databaseContainerSection { + label.subHeading { + font: inherit; + padding: unset; + font-weight: 600; } + } - .accordionHeader { - button { - display: flex; - align-items: center; - .accordionHeaderText { - margin-left: 5px; - font-weight: 600; - } - .statusIcon { - margin-left: auto; - } - } + .accordionHeader { + button { + display: flex; + align-items: center; + .accordionHeaderText { + margin-left: 5px; + font-weight: 600; + } + .statusIcon { + margin-left: auto; + } } - .popover-container { - button[disabled] { - cursor: not-allowed; - opacity: 0.8; - } - } - .foreground { - z-index: 10; - background-color: white; - padding: 20px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); - transform: translate(0%, -9%); - position: absolute; + } + .popover-container { + button[disabled] { + cursor: not-allowed; + opacity: 0.8; } + } + .foreground { + z-index: 10; + background-color: white; + padding: 20px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + transform: translate(0%, -9%); + position: absolute; + } } .monitorCopyJobs { - padding: 0 2.5rem; -} \ No newline at end of file + padding: 0; + width: 100%; + max-width: 100%; + margin: 0 auto; + + .ms-DetailsList { + width: 100%; + + .ms-DetailsHeader { + .ms-DetailsHeader-cell { + padding: @DefaultSpace 20px; + font-weight: 600; + font-size: @DefaultFontSize; + color: @BaseHigh; + background-color: @BaseLow; + border-bottom: @ButtonBorderWidth solid @BaseMedium; + + &:hover { + background-color: @BaseMediumLow; + } + } + } + + .ms-DetailsRow { + border-bottom: @ButtonBorderWidth solid @BaseMedium; + + &:hover { + background-color: @BaseMediumLow; + } + + .ms-DetailsRow-cell { + padding: @MediumSpace 20px; + font-size: @DefaultFontSize; + color: @BaseHigh; + min-height: 48px; + display: flex; + align-items: center; + } + } + } + + button[role="button"] { + &.ms-Button--icon { + i.ms-Icon { + font-size: @LargeSpace; + } + } + } +}