random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-12-30 14:22:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

fixed ui for jobList

Browse Source
This commit is contained in:
nishthaAhujaa
2025-10-29 19:51:22 +05:30
parent 844b6e6b65
commit bfa68a9b00
4 changed files with 211 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobActionMenu.tsx
View File

@@ -19,16 +19,19 @@ const CopyJobActionMenu: React.FC<CopyJobActionMenuProps> = ({ job, handleClick
{ {
key: CopyJobActions.pause, key: CopyJobActions.pause,
text: ContainerCopyMessages.MonitorJobs.Actions.pause, text: ContainerCopyMessages.MonitorJobs.Actions.pause,
iconProps: { iconName: "Pause" },
onClick: () => handleClick(job, CopyJobActions.pause), onClick: () => handleClick(job, CopyJobActions.pause),
}, },
{ {
key: CopyJobActions.cancel, key: CopyJobActions.cancel,
text: ContainerCopyMessages.MonitorJobs.Actions.cancel, text: ContainerCopyMessages.MonitorJobs.Actions.cancel,
iconProps: { iconName: "Cancel" },
onClick: () => handleClick(job, CopyJobActions.cancel), onClick: () => handleClick(job, CopyJobActions.cancel),
}, },
{ {
key: CopyJobActions.resume, key: CopyJobActions.resume,
text: ContainerCopyMessages.MonitorJobs.Actions.resume, text: ContainerCopyMessages.MonitorJobs.Actions.resume,
iconProps: { iconName: "Play" },
onClick: () => handleClick(job, CopyJobActions.resume), onClick: () => handleClick(job, CopyJobActions.resume),
}, },
]; ];
@@ -49,6 +52,7 @@ const CopyJobActionMenu: React.FC<CopyJobActionMenuProps> = ({ job, handleClick
filteredItems.push({ filteredItems.push({
key: CopyJobActions.complete, key: CopyJobActions.complete,
text: ContainerCopyMessages.MonitorJobs.Actions.complete, text: ContainerCopyMessages.MonitorJobs.Actions.complete,
iconProps: { iconName: "CheckMark" },
onClick: () => handleClick(job, CopyJobActions.complete), onClick: () => handleClick(job, CopyJobActions.complete),
}); });
} }
@@ -65,8 +69,9 @@ const CopyJobActionMenu: React.FC<CopyJobActionMenuProps> = ({ job, handleClick
return ( return (
<IconButton <IconButton
role="button" role="button"
iconProps={{ iconName: "more" }} iconProps={{ iconName: "More", styles: { root: { fontSize: "20px", fontWeight: "bold" } } }}
menuProps={{ items: getMenuItems() }} menuProps={{ items: getMenuItems() }}
menuIconProps={{ iconName: "" }}
ariaLabel={ContainerCopyMessages.MonitorJobs.Columns.actions} ariaLabel={ContainerCopyMessages.MonitorJobs.Columns.actions}
title={ContainerCopyMessages.MonitorJobs.Columns.actions} title={ContainerCopyMessages.MonitorJobs.Columns.actions}
/> />

131
src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobColumns.tsx
View File

@@ -11,68 +11,69 @@ export const getColumns = (
sortedColumnKey: string | undefined, sortedColumnKey: string | undefined,
isSortedDescending: boolean, isSortedDescending: boolean,
): IColumn[] => [ ): IColumn[] => [
{ {
key: "LastUpdatedTime", key: "LastUpdatedTime",
name: ContainerCopyMessages.MonitorJobs.Columns.lastUpdatedTime, name: ContainerCopyMessages.MonitorJobs.Columns.lastUpdatedTime,
fieldName: "LastUpdatedTime", fieldName: "LastUpdatedTime",
minWidth: 100, minWidth: 140,
maxWidth: 150, maxWidth: 300,
isResizable: true, isResizable: true,
isSorted: sortedColumnKey === "timestamp", isSorted: sortedColumnKey === "timestamp",
isSortedDescending: isSortedDescending, isSortedDescending: isSortedDescending,
onColumnClick: () => handleSort("timestamp"), onColumnClick: () => handleSort("timestamp"),
}, },
{ {
key: "Name", key: "Name",
name: ContainerCopyMessages.MonitorJobs.Columns.name, name: ContainerCopyMessages.MonitorJobs.Columns.name,
fieldName: "Name", fieldName: "Name",
minWidth: 90, minWidth: 140,
maxWidth: 130, maxWidth: 300,
isResizable: true, isResizable: true,
isSorted: sortedColumnKey === "Name", isSorted: sortedColumnKey === "Name",
isSortedDescending: isSortedDescending, isSortedDescending: isSortedDescending,
onColumnClick: () => handleSort("Name"), onColumnClick: () => handleSort("Name"),
}, },
{ {
key: "Mode", key: "Mode",
name: ContainerCopyMessages.MonitorJobs.Columns.mode, name: ContainerCopyMessages.MonitorJobs.Columns.mode,
fieldName: "Mode", fieldName: "Mode",
minWidth: 70, minWidth: 90,
maxWidth: 90, maxWidth: 200,
isResizable: true, isResizable: true,
isSorted: sortedColumnKey === "Mode", isSorted: sortedColumnKey === "Mode",
isSortedDescending: isSortedDescending, isSortedDescending: isSortedDescending,
onColumnClick: () => handleSort("Mode"), onColumnClick: () => handleSort("Mode"),
}, },
{ {
key: "CompletionPercentage", key: "CompletionPercentage",
name: ContainerCopyMessages.MonitorJobs.Columns.completionPercentage, name: ContainerCopyMessages.MonitorJobs.Columns.completionPercentage,
fieldName: "CompletionPercentage", fieldName: "CompletionPercentage",
minWidth: 120, minWidth: 110,
maxWidth: 130, maxWidth: 200,
isResizable: true, isResizable: true,
isSorted: sortedColumnKey === "CompletionPercentage", isSorted: sortedColumnKey === "CompletionPercentage",
isSortedDescending: isSortedDescending, isSortedDescending: isSortedDescending,
onRender: (job: CopyJobType) => `${job.CompletionPercentage}%`, onRender: (job: CopyJobType) => `${job.CompletionPercentage}%`,
onColumnClick: () => handleSort("CompletionPercentage"), onColumnClick: () => handleSort("CompletionPercentage"),
}, },
{ {
key: "CopyJobStatus", key: "CopyJobStatus",
name: ContainerCopyMessages.MonitorJobs.Columns.status, name: ContainerCopyMessages.MonitorJobs.Columns.status,
fieldName: "Status", fieldName: "Status",
minWidth: 80, minWidth: 130,
maxWidth: 100, maxWidth: 200,
isResizable: true, isResizable: true,
isSorted: sortedColumnKey === "Status", isSorted: sortedColumnKey === "Status",
isSortedDescending: isSortedDescending, isSortedDescending: isSortedDescending,
onRender: (job: CopyJobType) => <CopyJobStatusWithIcon status={job.Status} />, onRender: (job: CopyJobType) => <CopyJobStatusWithIcon status={job.Status} />,
onColumnClick: () => handleSort("Status"), onColumnClick: () => handleSort("Status"),
}, },
{ {
key: "Actions", key: "Actions",
name: ContainerCopyMessages.MonitorJobs.Columns.actions, name: "",
minWidth: 200, minWidth: 80,
isResizable: true, maxWidth: 200,
onRender: (job: CopyJobType) => <CopyJobActionMenu job={job} handleClick={handleActionClick} />, isResizable: true,
}, onRender: (job: CopyJobType) => <CopyJobActionMenu job={job} handleClick={handleActionClick} />,
]; },
];

55
src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobStatusWithIcon.tsx
View File

@@ -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 React from "react";
import ContainerCopyMessages from "../../ContainerCopyMessages"; import ContainerCopyMessages from "../../ContainerCopyMessages";
import { CopyJobStatusType } from "../../Enums"; import { CopyJobStatusType } from "../../Enums";
// Styles const theme = getTheme();
const iconClass = mergeStyles({ const iconClass = mergeStyles({
fontSize: "1em", fontSize: "16px",
marginRight: "0.3em", marginRight: "8px",
}); });
const classNames = mergeStyleSets({
[CopyJobStatusType.Pending]: [{ color: "#fe7f2d" }, iconClass], const classNames = mergeStyleSets({
[CopyJobStatusType.InProgress]: [{ color: "#ee9b00" }, iconClass], [CopyJobStatusType.Pending]: [{ color: theme.semanticColors.bodySubtext }, iconClass],
[CopyJobStatusType.Running]: [{ color: "#ee9b00" }, iconClass], [CopyJobStatusType.InProgress]: [{ color: theme.palette.themePrimary }, iconClass],
[CopyJobStatusType.Partitioning]: [{ color: "#ee9b00" }, iconClass], [CopyJobStatusType.Running]: [{ color: theme.palette.themePrimary }, iconClass],
[CopyJobStatusType.Paused]: [{ color: "#bb3e03" }, iconClass], [CopyJobStatusType.Partitioning]: [{ color: theme.palette.themePrimary }, iconClass],
[CopyJobStatusType.Skipped]: [{ color: "#00bbf9" }, iconClass], [CopyJobStatusType.Paused]: [{ color: theme.palette.themePrimary }, iconClass],
[CopyJobStatusType.Cancelled]: [{ color: "#00bbf9" }, iconClass], [CopyJobStatusType.Skipped]: [{ color: theme.semanticColors.bodySubtext }, iconClass],
[CopyJobStatusType.Failed]: [{ color: "#d90429" }, iconClass], [CopyJobStatusType.Cancelled]: [{ color: theme.semanticColors.bodySubtext }, iconClass],
[CopyJobStatusType.Faulted]: [{ color: "#d90429" }, iconClass], [CopyJobStatusType.Failed]: [{ color: theme.semanticColors.errorIcon }, iconClass],
[CopyJobStatusType.Completed]: [{ color: "#386641" }, iconClass], [CopyJobStatusType.Faulted]: [{ color: theme.semanticColors.errorIcon }, iconClass],
unknown: [{ color: "#000814" }, iconClass], [CopyJobStatusType.Completed]: [{ color: theme.semanticColors.successIcon }, iconClass],
unknown: [{ color: theme.semanticColors.bodySubtext }, iconClass],
}); });
// Icon Mapping
const iconMap: Record<CopyJobStatusType, string> = { const iconMap: Record<CopyJobStatusType, string> = {
[CopyJobStatusType.Pending]: "MSNVideosSolid", [CopyJobStatusType.Pending]: "StatusCircleRing",
[CopyJobStatusType.InProgress]: "SyncStatusSolid", [CopyJobStatusType.InProgress]: "ProgressRingDots",
[CopyJobStatusType.Running]: "SyncStatusSolid", [CopyJobStatusType.Running]: "ProgressRingDots",
[CopyJobStatusType.Partitioning]: "SyncStatusSolid", [CopyJobStatusType.Partitioning]: "ProgressRingDots",
[CopyJobStatusType.Paused]: "CirclePauseSolid", [CopyJobStatusType.Paused]: "CirclePause",
[CopyJobStatusType.Skipped]: "Blocked2Solid", [CopyJobStatusType.Skipped]: "StatusCircleBlock2",
[CopyJobStatusType.Cancelled]: "Blocked2Solid", [CopyJobStatusType.Cancelled]: "StatusErrorFull",
[CopyJobStatusType.Failed]: "AlertSolid", [CopyJobStatusType.Failed]: "StatusErrorFull",
[CopyJobStatusType.Faulted]: "AlertSolid", [CopyJobStatusType.Faulted]: "StatusErrorFull",
[CopyJobStatusType.Completed]: "CompletedSolid", [CopyJobStatusType.Completed]: "CompletedSolid",
}; };

175
src/Explorer/ContainerCopy/containerCopyStyles.less
View File

@@ -1,81 +1,128 @@
@import "../../../less/Common/Constants.less"; @import "../../../less/Common/Constants.less";
#containerCopyWrapper { #containerCopyWrapper {
.centerContent { .centerContent {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
}
.notFoundContainer {
.noCopyJobsMessage {
font-weight: 600;
margin: 0 auto;
color: @FocusColor;
} }
.notFoundContainer { button.createCopyJobButton {
.noCopyJobsMessage { color: @LinkColor;
font-weight: 600;
margin: 0 auto;
color: @FocusColor;
}
button.createCopyJobButton {
color: @LinkColor;
}
} }
}
} }
.createCopyJobScreensContainer { .createCopyJobScreensContainer {
height: 100%; height: 100%;
padding: 1em 1.5em; padding: 1em 1.5em;
.bold { .bold {
font-weight: 600; font-weight: 600;
}
label {
padding: 0;
}
.flex-row {
display: flex;
flex-direction: row;
label.field-label {
font-weight: 600;
} }
label { .flex-fixed-width {
padding: 0; flex: 0 0 auto;
width: 150px;
} }
.flex-row { .flex-grow-col {
display: flex; flex: 1 1 auto;
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;
}
} }
.databaseContainerSection { }
label.subHeading { .databaseContainerSection {
font: inherit; label.subHeading {
padding: unset; font: inherit;
font-weight: 600; padding: unset;
} font-weight: 600;
} }
}
.accordionHeader { .accordionHeader {
button { button {
display: flex; display: flex;
align-items: center; align-items: center;
.accordionHeaderText { .accordionHeaderText {
margin-left: 5px; margin-left: 5px;
font-weight: 600; font-weight: 600;
} }
.statusIcon { .statusIcon {
margin-left: auto; margin-left: auto;
} }
}
} }
.popover-container { }
button[disabled] { .popover-container {
cursor: not-allowed; button[disabled] {
opacity: 0.8; 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;
} }
}
.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 { .monitorCopyJobs {
padding: 0 2.5rem; 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;
}
}
}
}