Patternfly-Upgrade

Author: PintoGideon

.env

@@ -1,9 +1,10 @@
+
 BROWSER="chrome"
 
 # Set CHRIS_UI_URL to the url of the running CUBE API
-VITE_CHRIS_UI_URL="https://cube.chrisproject.org/api/v1/"
-VITE_CHRIS_UI_USERS_URL="https://cube.chrisproject.org/api/v1/users/"
-VITE_CHRIS_UI_AUTH_URL="https://cube.chrisproject.org/api/v1/auth-token/"
+VITE_CHRIS_UI_URL="http://localhost:8000/api/v1/"
+VITE_CHRIS_UI_USERS_URL="http://localhost:8000/api/v1/users/"
+VITE_CHRIS_UI_AUTH_URL="http://localhost:8000/api/v1/auth-token/"
 VITE_ALPHA_FEATURES='production'
 
 # Set PFDCM_URL to the root url of the running pfdcm instance

.npmrc

@@ -1 +1 @@
-legacy-peer-deps=true
+legacy-peer-deps=true

Dockerfile

@@ -0,0 +1,51 @@
+# ChRIS_ui production mode server
+#
+# Build with
+#
+#   docker build -t <name> .
+#
+# For example if building a local version, you could do:
+#
+#   docker build -t local/chris_ui .
+#
+# In the case of a proxy (located at say 10.41.13.4:3128), do:
+#
+#    export PROXY="http://10.41.13.4:3128"
+#    docker build --build-arg http_proxy=${PROXY} -t local/chris_ui .
+#
+# To run the server up, do:
+#
+#   docker run --name chris_ui -p 3000:3000 -d local/chris_ui
+#
+# To run an interactive shell inside this container, do:
+#
+#   docker exec -it chris_ui sh
+#
+# Tips:
+# - for access logging, remove "--quiet" from CMD
+# - docker-entrypoint.sh must start as root
+
+
+FROM node:20.7 as builder
+
+WORKDIR /app
+COPY . .
+
+RUN npm run -s print-version
+RUN npm install
+RUN npm run build 
+
+
+FROM node:20.7-alpine
+
+RUN yarn global add sirv-cli
+
+WORKDIR /app
+
+COPY --from=builder /app/build /app
+COPY ./docker-entrypoint.sh /docker-entrypoint.sh
+
+ENTRYPOINT ["/docker-entrypoint.sh"]
+ENV HOST=0.0.0.0 PORT=3000
+CMD ["sirv", "--quiet", "--etag", "--single"]
+EXPOSE 3000

Dockerfile_dev

@@ -0,0 +1,44 @@
+#
+# Docker file for ChRIS ui development server
+#
+# Build with
+#
+#   docker build -t <name>:<tag> -f <dockerfile> .
+#
+# For example if building a local version, you could do:
+#
+#   docker build -t local/chris_ui:dev -f Dockerfile_dev .
+#
+# In the case of a proxy (located at say 10.41.13.4:3128), do:
+#
+#    export PROXY="http://10.41.13.4:3128"
+#    docker build --build-arg http_proxy=${PROXY} --build-arg UID=$UID -t local/chris_ui:dev -f Dockerfile_dev .
+#
+# To run the server up during development, do:
+#
+#   docker run --rm -it -v $(pwd):/home/localuser -p 3000:3000 -u $(id -u):$(id -g) --name chris_ui local/chris_ui:dev
+#
+# To run an interactive shell inside this container, do:
+#
+#   docker exec -it chris_ui sh
+#
+
+
+
+FROM node:20.7 as builder
+MAINTAINER fnndsc "[email protected]"
+
+# Pass a UID on build command line (see above) to set internal UID
+ARG UID=1001
+ENV UID=$UID  HOME="/home/localuser" VERSION="0.1"
+
+RUN adduser --uid $UID --disabled-password localuser  \
+  && npm install chrome -g
+
+# Start as user localuser
+USER localuser
+
+WORKDIR $HOME
+EXPOSE 3000
+
+CMD npm install && npm run dev

docker-entrypoint.sh

@@ -0,0 +1,55 @@
+#!/bin/sh -e
+# Motivation: `npm run build` is very slow, the fastest
+#             way to get the UI up is `docker pull ... `
+#             However, the backend url is built-in
+#             to be http://localhost:8000/api/v1/
+# Purpose:    Overwrite the URL of backend using a user-specified value.
+#             `sed` is used to patch the `build/` directory.
+
+target_cube='http://localhost:8000/api/v1/'
+target_pfdcm='http://localhost:4005/'
+given_cube="${REACT_APP_CHRIS_UI_URL-nil}"
+given_pfdcm="${REACT_APP_PFDCM_URL-nil}"
+
+if [ "$(id -u)" != "0" ]; then
+  if [ "$given_cube" != 'nil' ]; then
+    echo "ERROR: custom value REACT_APP_CHRIS_UI_URL=$given_cube"
+    echo "is set, but container user is not root."
+    exit 1
+  fi
+  if [ "$given_pfdcm" != 'nil' ]; then
+    echo "ERROR: custom value REACT_APP_PFDCM_URL=$given_pfdcm"
+    echo "is set, but container user is not root."
+    exit 1
+  fi
+fi
+
+# When running on Podman with default settings, the host IP address is added to /etc/hosts
+# by Podman by the name "host.containers.local" which we'll use as the IP address.
+if [ "${DISABLE_PODMAN_HOST_IP-no}" = 'no' ] \
+  && [ "$given_cube" = 'nil' ] \
+  && [ "$given_pfdcm" = 'nil' ]; then
+  
+  PODMAN_HOST_IP="$(grep -m 1 -F host.containers.internal /etc/hosts | awk '{print $1}')"
+  if [ -n "$PODMAN_HOST_IP" ]; then
+    echo "Detected Podman host IP: $PODMAN_HOST_IP"
+    given_cube="http://$PODMAN_HOST_IP:8000/api/v1/"
+    given_pfdcm="http://$PODMAN_HOST_IP:4005/"
+  fi 
+fi
+
+function replace () {
+  local target="$1"
+  local api_url="$2"
+
+  if [ "$api_url"  != 'nil' ]; then
+    for build_file in $(find -type f); do
+      sed -i -e "s#$target#$api_url#g" $build_file
+    done
+  fi
+}
+
+replace  "$target_cube"  "$given_cube"
+replace  "$target_pfdcm" "$given_pfdcm"
+
+exec "$@"

print_version.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+# purpose: print out a version string: YYYYMMDD.X+commit(-dirty?)
+#          YYYYMMDD = current date
+#                 X = number of merge commits since the tag version-0
+#            commit = HEAD commit short sha
+#            -drity = suffix indicating there are uncommitted changes
+
+printf "%s.%s+%s%s" \
+  "$(date '+%Y%m%d')" \
+  "$(git rev-list --use-bitmap-index --count --merges version-0..HEAD)" \
+  "$(git rev-parse --short HEAD)" \
+  "$(git diff --quiet src/ || echo '-dirty')"

src/App.tsx

@@ -9,6 +9,7 @@ import { CookiesProvider } from "react-cookie";
 import { RootState } from "./store/root/applicationState";
 import "@patternfly/react-core/dist/styles/base.css";
 import "./app.css";
+import "./components/Feeds/Feeds.css"
 import { ThemeContext } from "./components/DarkTheme/useTheme";
 
 interface AllProps {

src/api/filesystem.ts

@@ -0,0 +1,69 @@
+import ChrisAPIClient from "./chrisapiclient";
+import { fetchResource } from "./common";
+
+export const ls = async (path?: string) => {
+	let folders = [];
+	let files = [];
+	if (!path) return { folders, files };
+
+	try {
+		const client = ChrisAPIClient.getClient();
+		const uploads = await client.getFileBrowserPaths({
+			path,
+		});
+
+
+		folders =
+			uploads.data && uploads.data[0].subfolders
+				? JSON.parse(uploads.data[0].subfolders)
+				: [];
+		const pathList = await client.getFileBrowserPath(path);
+
+		let files = [];
+		if (pathList) {
+			const pagination = {
+				limit: 100,
+				offset: 0,
+			};
+			const fn = pathList.getFiles;
+			const boundFn = fn.bind(pathList);
+			const data = await fetchResource(pagination, boundFn);
+			files = data.resource;
+		}
+		return { folders, files };
+	} catch (error) {
+		return { folders, files };
+	}
+};
+
+export const mkdir = (path: string) => {
+	console.log("Directory");
+};
+
+export const find = async (space: string, search: string) => {
+	const client = ChrisAPIClient.getClient();
+	if (space === "feeds") {
+		const payload = {
+			limit: 10,
+			offset: 0,
+			files_fname_icontains: search,
+		};
+		const fn = client.getFeeds;
+		const boundFn = fn.bind(client);
+		return await fetchResource(payload, boundFn);
+	}
+
+	if (space === "pacs") {
+		const payload = {
+			limit: 10,
+			offset: 0,
+			fname_icontains_topdir_unique: search,
+		};
+		const fn = client.getPACSFiles;
+		const boundFn = fn.bind(client);
+		return await fetchResource(payload, boundFn);
+	}
+};
+
+
+

src/app.css

@@ -57,3 +57,29 @@
 .pf-v5-c-breadcrumb__item {
   font-size: inherit;
 }
+
+
+
+.series-actions {
+  margin: -1em -1em 1em -1em;
+  height: 8em;
+  overflow: hidden;
+  position: relative;
+}
+
+.action-button-container {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  padding: 1em;
+  text-align: center;
+}
+
+.action-button-container[class~="hover"] {
+  opacity: 0;
+  transition: opacity 0.25s ease;
+  &:hover {
+    opacity: 1;
+  }
+}

src/components/CreateFeed/ChooseConfig.tsx

@@ -62,12 +62,12 @@ const ChooseConfig = ({ handleFileUpload, user }: chooseConfigProps) => {
         setShowDragAndDrop(true);
       }
     },
-    []
+    [],
   );
 
   const handleKeyDown = useCallback(
     (e: any) => {
-      if (e.target.closest("INPUT.required-params__textInput")) return;
+      if (e.target.closest("INPUT")) return;
       switch (e.code) {
         case "KeyG":
           handleClick(e, "fs_plugin");
@@ -102,7 +102,7 @@ const ChooseConfig = ({ handleFileUpload, user }: chooseConfigProps) => {
       params?.required.length,
       requiredInput,
       selectedConfig,
-    ]
+    ],
   );
 
   const onCloseClick = () => {
@@ -149,7 +149,7 @@ const ChooseConfig = ({ handleFileUpload, user }: chooseConfigProps) => {
         type: Types.SelectedConfig,
         payload: {
           selectedConfig: state.selectedConfig.filter(
-            (value: string) => value !== "swift_storage"
+            (value: string) => value !== "swift_storage",
           ),
         },
       });
@@ -162,7 +162,7 @@ const ChooseConfig = ({ handleFileUpload, user }: chooseConfigProps) => {
         type: Types.SelectedConfig,
         payload: {
           selectedConfig: state.selectedConfig.filter(
-            (value: any) => value !== "fs_plugin"
+            (value: any) => value !== "fs_plugin",
           ),
         },
       });
@@ -206,7 +206,7 @@ const ChooseConfig = ({ handleFileUpload, user }: chooseConfigProps) => {
       type: Types.SelectedConfig,
       payload: {
         selectedConfig: state.selectedConfig.filter(
-          (value: any) => value !== "swift_storage"
+          (value: any) => value !== "swift_storage",
         ),
       },
     });