feat: pollish importers to v1 parity goals (#209)

client/package.json

@@ -22,13 +22,13 @@
   "dependencies": {
     "@hey-api/client-axios": "^0.2.7",
     "@hookform/resolvers": "^2.9.11",
-    "@patternfly/patternfly": "^5.2.1",
-    "@patternfly/react-charts": "^7.2.1",
-    "@patternfly/react-code-editor": "^5.2.1",
-    "@patternfly/react-component-groups": "^5.0.0",
-    "@patternfly/react-core": "^5.2.1",
-    "@patternfly/react-table": "^5.2.1",
-    "@patternfly/react-tokens": "^5.2.1",
+    "@patternfly/patternfly": "^5.4.0",
+    "@patternfly/react-charts": "^7.4.0",
+    "@patternfly/react-code-editor": "^5.4.0",
+    "@patternfly/react-core": "^5.4.0",
+    "@patternfly/react-log-viewer": "^5.3.0",
+    "@patternfly/react-table": "^5.4.0",
+    "@patternfly/react-tokens": "^5.4.0",
     "@segment/analytics-next": "^1.64.0",
     "@tanstack/react-query": "^5.50.1",
     "@tanstack/react-query-devtools": "^5.50.1",

client/src/app/Constants.ts

@@ -31,3 +31,15 @@ export const uploadLimit = "500m";
 export const UI_UNIQUE_ID = "_ui_unique_id";
 
 export const FORM_DATA_FILE_KEY = "file";
+
+export const ANSICOLOR = {
+  reset: "\x1b[0m",
+  underline: "\x1b[4;1m",
+  endLine: "\n",
+  defaultForegroundColorAtStartup: "\x1b[39m",
+  green: "\x1b[32m",
+  cyan: "\x1b[36m",
+  yellow: "\x1b[33m",
+  lightBlue: "\x1b[94m",
+  red: "\x1b[31m",
+};

client/src/app/dayjs.ts

@@ -1,12 +1,16 @@
 import dayjs from "dayjs";
+import arraySupport from "dayjs/plugin/arraySupport";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+import duration from "dayjs/plugin/duration";
 import isSameOrBefore from "dayjs/plugin/isSameOrBefore";
-import utc from "dayjs/plugin/utc";
+import relativeTime from "dayjs/plugin/relativeTime";
 import timezone from "dayjs/plugin/timezone";
-import customParseFormat from "dayjs/plugin/customParseFormat";
-import arraySupport from "dayjs/plugin/arraySupport";
+import utc from "dayjs/plugin/utc";
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(customParseFormat);
 dayjs.extend(isSameOrBefore);
 dayjs.extend(arraySupport);
+dayjs.extend(relativeTime);
+dayjs.extend(duration);

client/src/app/pages/importer-list/components/importer-progress.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+import {
+  Progress,
+  ProgressMeasureLocation,
+  ProgressSize,
+} from "@patternfly/react-core";
+
+import { Progress as ProgressModel } from "@app/client";
+
+export interface ImporterProgressProps {
+  value: ProgressModel;
+}
+
+export const ImporterProgress: React.FC<ImporterProgressProps> = ({
+  value,
+}) => {
+  return (
+    <Progress
+      aria-label="Progress of Importer "
+      value={value.current}
+      min={0}
+      max={value.total}
+      measureLocation={ProgressMeasureLocation.inside}
+      size={ProgressSize.sm}
+    />
+  );
+};