fixed ui for jobList

2025-12-25 20:01:45 +00:00 · 2025-10-29 19:51:22 +05:30
parent 844b6e6b65
commit bfa68a9b00
4 changed files with 211 additions and 157 deletions
--- a/src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobActionMenu.tsx
+++ b/src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobActionMenu.tsx
@@ -19,16 +19,19 @@ const CopyJobActionMenu: React.FC<CopyJobActionMenuProps> = ({ 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<CopyJobActionMenuProps> = ({ 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<CopyJobActionMenuProps> = ({ job, handleClick
  return (
    <IconButton
      role="button"
-      iconProps={{ iconName: "more" }}
+      iconProps={{ iconName: "More", styles: { root: { fontSize: "20px", fontWeight: "bold" } } }}
      menuProps={{ items: getMenuItems() }}
+      menuIconProps={{ iconName: "" }}
      ariaLabel={ContainerCopyMessages.MonitorJobs.Columns.actions}
      title={ContainerCopyMessages.MonitorJobs.Columns.actions}
    />
--- 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) => <CopyJobStatusWithIcon status={job.Status} />,
-    onColumnClick: () => handleSort("Status"),
-  },
-  {
-    key: "Actions",
-    name: ContainerCopyMessages.MonitorJobs.Columns.actions,
-    minWidth: 200,
-    isResizable: true,
-    onRender: (job: CopyJobType) => <CopyJobActionMenu job={job} handleClick={handleActionClick} />,
-  },
-];
+    {
+      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) => <CopyJobStatusWithIcon status={job.Status} />,
+      onColumnClick: () => handleSort("Status"),
+    },
+    {
+      key: "Actions",
+      name: "",
+      minWidth: 80,
+      maxWidth: 200,
+      isResizable: true,
+      onRender: (job: CopyJobType) => <CopyJobActionMenu job={job} handleClick={handleActionClick} />,
+    },
+  ];
--- 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, string> = {
-  [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",
 };

--- 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;
-}
+  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;
+      }
+    }
+  }
+}