Middleware override feature in asset location (#6368)

* Middleware override feature in asset location * Fix tooltip clipping * Fix Flaky Cypress test in Facility Module (#6384) * fix random facility page failure * fix random facility page failure * Revert "Prescriptions: Shrink discontinued prescriptions + Flip MAR timeline + Freeze primary columns in horizontal scroll (#6282)" (#6386) This reverts commit 5009a86. * Refactor Asset Model Import Formatting (#6388) * Refactor Asset Model Import Formatting * fixes to warranty_amc_end_of_validity * Fix asset import file for cypress * Refactor: replaced Dispatch to useQuery/Request of src/Components/Auth/log… (#6333) * Refactor: replaced useDispatch to useQuery of src/Components/Auth/login.tsx * fix:useQuery changed to Request * feat: replaced dispatch with request * fix: types and added pathparams * fix: request body error * Update Login.tsx * change:Tres to Tbody * fixes: response type change * Update package-lock.json * fix hover height (#6352) * Split routes of App Router (#6363) * Prescription: show prescribed on & by and discontinued date in detail card (#6365) * Fixed bug in location picker in update facility page (#6377) * add all cases for map rendering * implement location pointer on searched location * Added cam auto reset in asset config page (#6375) * 💊 Adds support for editing prescriptions + Adds `useSlug` hook (#6369) * Adds hook: `useSlug` * bug fix: NumericWithUnits field not showing intial value * Form: support for showing global errors * Adds support for editing prescriptions (fixes #6340) * Fix cypress * fix cypress * Improve design --------- Co-authored-by: Mohammed Nihal <[email protected]> Co-authored-by: Rithvik Nishad <[email protected]> Co-authored-by: Aaron Jevil Nazareth <[email protected]> Co-authored-by: Pranshu Aggarwal <[email protected]> Co-authored-by: Gampa Sri Harsh <[email protected]> Co-authored-by: Tasnimul H. Tauhid <[email protected]>
ohcnetwork · Oct 17, 2023 · dd16bfa · dd16bfa
1 parent 362003c
commit dd16bfa
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 20 deletions.
diff --git a/cypress/pageobject/Asset/AssetCreation.ts b/cypress/pageobject/Asset/AssetCreation.ts
@@ -150,7 +150,7 @@ export class AssetPage {
 
   configureVitalAsset(hostName: string, localIp: string) {
     cy.get("[data-testid=asset-configure-button]").click();
-    cy.get("#middlewareHostname").type(hostName);
+    cy.get("#middleware_hostname").type(hostName);
     cy.get("#localipAddress").type(localIp);
   }
 

diff --git a/src/CAREUI/misc/PaginatedList.tsx b/src/CAREUI/misc/PaginatedList.tsx
@@ -30,7 +30,7 @@ function useContextualized<TItem>() {
   return ctx as PaginatedListContext<TItem>;
 }
 
-interface Props<TItem> extends QueryOptions {
+interface Props<TItem> extends QueryOptions<PaginatedResponse<TItem>> {
   route: QueryRoute<PaginatedResponse<TItem>>;
   perPage?: number;
   children: (ctx: PaginatedListContext<TItem>) => JSX.Element | JSX.Element[];

diff --git a/src/Components/Assets/AssetType/HL7Monitor.tsx b/src/Components/Assets/AssetType/HL7Monitor.tsx
@@ -74,15 +74,16 @@ const HL7Monitor = (props: HL7MonitorProps) => {
         });
       } else {
         Notification.Error({
-          msg: "Something went wrong..!",
+          msg: "Something went wrong!",
         });
       }
     } else {
-      setIpAddress_error("Please Enter a Valid IP address !!");
+      setIpAddress_error("IP address is invalid");
     }
   };
 
-  const middleware = middlewareHostname || facilityMiddlewareHostname;
+  const fallbackMiddleware =
+    asset?.location_object?.middleware_address || facilityMiddlewareHostname;
 
   if (isLoading) return <Loading />;
   return (
@@ -93,11 +94,29 @@ const HL7Monitor = (props: HL7MonitorProps) => {
             <Card className="flex w-full flex-col">
               <form onSubmit={handleSubmit}>
                 <h2 className="mb-2 text-lg font-bold">Connection</h2>
-                <div className="flex flex-col">
+                <div className="flex flex-col gap-2">
                   <TextFormField
-                    name="middlewareHostname"
-                    label="Middleware Hostname"
-                    placeholder={facilityMiddlewareHostname}
+                    name="middleware_hostname"
+                    label={
+                      <div className="flex flex-row gap-1">
+                        <p>Middleware Hostname</p>
+                        {!middlewareHostname && (
+                          <div className="tooltip">
+                            <CareIcon
+                              icon="l-info-circle"
+                              className="tooltip text-indigo-500 hover:text-indigo-600"
+                            />
+                            <span className="tooltip-text w-56 whitespace-normal">
+                              Middleware hostname sourced from{" "}
+                              {asset?.location_object?.middleware_address
+                                ? "asset location"
+                                : "asset facility"}
+                            </span>
+                          </div>
+                        )}
+                      </div>
+                    }
+                    placeholder={fallbackMiddleware}
                     value={middlewareHostname}
                     onChange={(e) => setMiddlewareHostname(e.value)}
                     errorClassName="hidden"
@@ -127,12 +146,16 @@ const HL7Monitor = (props: HL7MonitorProps) => {
 
         {assetType === "HL7MONITOR" && (
           <HL7PatientVitalsMonitor
-            socketUrl={`wss://${middleware}/observations/${localipAddress}`}
+            socketUrl={`wss://${
+              middlewareHostname || fallbackMiddleware
+            }/observations/${localipAddress}`}
           />
         )}
         {assetType === "VENTILATOR" && (
           <VentilatorPatientVitalsMonitor
-            socketUrl={`wss://${middleware}/observations/${localipAddress}`}
+            socketUrl={`wss://${
+              middlewareHostname || fallbackMiddleware
+            }/observations/${localipAddress}`}
           />
         )}
       </div>

diff --git a/src/Components/Assets/AssetType/ONVIFCamera.tsx b/src/Components/Assets/AssetType/ONVIFCamera.tsx
@@ -17,6 +17,7 @@ import TextFormField from "../../Form/FormFields/TextFormField";
 import { Submit } from "../../Common/components/ButtonV2";
 import { SyntheticEvent } from "react";
 import useAuthUser from "../../../Common/hooks/useAuthUser";
+import CareIcon from "../../../CAREUI/icons/CareIcon";
 
 interface Props {
   assetId: string;
@@ -90,11 +91,11 @@ const ONVIFCamera = ({ assetId, facilityId, asset, onUpdated }: Props) => {
         Notification.Success({ msg: "Asset Configured Successfully" });
         onUpdated?.();
       } else {
-        Notification.Error({ msg: "Something went wrong..!" });
+        Notification.Error({ msg: "Something went wrong!" });
       }
       setLoadingSetConfiguration(false);
     } else {
-      setIpAddress_error("Please Enter a Valid Camera address !!");
+      setIpAddress_error("IP address is invalid");
     }
   };
 
@@ -139,6 +140,9 @@ const ONVIFCamera = ({ assetId, facilityId, asset, onUpdated }: Props) => {
     setLoadingAddPreset(false);
   };
 
+  const fallbackMiddleware =
+    asset?.location_object?.middleware_address || facilityMiddlewareHostname;
+
   if (isLoading) return <Loading />;
 
   return (
@@ -148,8 +152,26 @@ const ONVIFCamera = ({ assetId, facilityId, asset, onUpdated }: Props) => {
           <div className="grid grid-cols-1 gap-x-4 lg:grid-cols-2">
             <TextFormField
               name="middleware_hostname"
-              label="Hospital Middleware Hostname"
-              autoComplete="off"
+              label={
+                <div className="flex flex-row gap-1">
+                  <p>Middleware Hostname</p>
+                  {!middlewareHostname && (
+                    <div className="tooltip">
+                      <CareIcon
+                        icon="l-info-circle"
+                        className="tooltip text-indigo-500 hover:text-indigo-600"
+                      />
+                      <span className="tooltip-text w-56 whitespace-normal">
+                        Middleware hostname sourced from{" "}
+                        {asset?.location_object?.middleware_address
+                          ? "asset location"
+                          : "asset facility"}
+                      </span>
+                    </div>
+                  )}
+                </div>
+              }
+              placeholder={fallbackMiddleware}
               value={middlewareHostname}
               onChange={({ value }) => setMiddlewareHostname(value)}
             />

diff --git a/src/Components/Facility/AddLocationForm.tsx b/src/Components/Facility/AddLocationForm.tsx
@@ -25,12 +25,14 @@ export const AddLocationForm = (props: LocationFormProps) => {
   const dispatchAction: any = useDispatch();
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [name, setName] = useState("");
+  const [middlewareAddress, setMiddlewareAddress] = useState("");
   const [description, setDescription] = useState("");
   const [facilityName, setFacilityName] = useState("");
   const [locationName, setLocationName] = useState("");
   const [errors, setErrors] = useState<any>({
     name: "",
     description: "",
+    middlewareAddress: "",
   });
   const headerText = !locationId ? "Add Location" : "Update Location";
   const buttonText = !locationId ? "Add Location" : "Update Location";
@@ -51,6 +53,7 @@ export const AddLocationForm = (props: LocationFormProps) => {
         setName(res?.data?.name || "");
         setLocationName(res?.data?.name || "");
         setDescription(res?.data?.description || "");
+        setMiddlewareAddress(res?.data?.middleware_address || "");
       }
       setIsLoading(false);
     }
@@ -62,13 +65,24 @@ export const AddLocationForm = (props: LocationFormProps) => {
     const error = {
       name: "",
       description: "",
+      middlewareAddress: "",
     };
 
     if (name.trim().length === 0) {
       error.name = "Name is required";
       formValid = false;
     }
 
+    if (
+      middlewareAddress &&
+      middlewareAddress.match(
+        /^(?!https?:\/\/)[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)*\.[a-zA-Z]{2,}$/
+      ) === null
+    ) {
+      error.middlewareAddress = "Invalid Middleware Address";
+      formValid = false;
+    }
+
     setErrors(error);
     return formValid;
   };
@@ -83,6 +97,7 @@ export const AddLocationForm = (props: LocationFormProps) => {
     const data = {
       name,
       description,
+      middleware_address: middlewareAddress,
     };
 
     const res = await dispatchAction(
@@ -157,8 +172,18 @@ export const AddLocationForm = (props: LocationFormProps) => {
                   error={errors.description}
                 />
               </div>
+              <div>
+                <TextFormField
+                  name="Location Middleware Address"
+                  type="text"
+                  label="Location Middleware Address"
+                  value={middlewareAddress}
+                  onChange={(e) => setMiddlewareAddress(e.value)}
+                  error={errors.middlewareAddress}
+                />
+              </div>
             </div>
-            <div className="mt-4 cui-form-button-group">
+            <div className="cui-form-button-group mt-4">
               <Cancel
                 onClick={() =>
                   navigate(`/facility/${facilityId}/location`, {

diff --git a/src/Components/Facility/FacilityConfigure.tsx b/src/Components/Facility/FacilityConfigure.tsx
@@ -155,6 +155,7 @@ export const FacilityConfigure = (props: any) => {
               <TextFormField
                 name="middleware_address"
                 label="Facility Middleware Address"
+                required
                 value={state.form.middleware_address}
                 onChange={(e) => handleChange(e)}
                 error={state.errors?.middleware_address}

diff --git a/src/Components/Facility/LocationManagement.tsx b/src/Components/Facility/LocationManagement.tsx
@@ -65,12 +65,24 @@ export default function LocationManagement({ facilityId }: Props) {
   );
 }
 
-const Location = ({ name, description, id }: LocationModel) => (
+const Location = ({
+  name,
+  description,
+  middleware_address,
+  id,
+}: LocationModel) => (
   <div className="w-full items-center justify-between rounded border border-gray-300 bg-white p-6 shadow-sm transition-all duration-200 ease-in-out hover:border-primary-400 lg:flex">
     <div className="lg:w-3/4">
-      <div className="w-full items-baseline lg:flex lg:items-center">
-        <p className="break-words text-xl lg:mr-4 lg:w-1/4">{name}</p>
-        <p className="break-all text-sm lg:w-3/4">{description}</p>
+      <div className="w-full items-baseline gap-4 lg:flex lg:items-center">
+        <p className="break-words text-xl lg:mr-4 lg:w-3/4">
+          {name}
+          <p className="break-all text-sm text-gray-700">
+            {description || "-"}
+          </p>
+        </p>
+        <p className="break-all text-sm lg:mr-4 lg:w-3/4">
+          {middleware_address}
+        </p>
       </div>
     </div>
 

diff --git a/src/Components/Facility/models.tsx b/src/Components/Facility/models.tsx
@@ -186,6 +186,7 @@ export interface LocationModel {
   id?: string;
   name?: string;
   description?: string;
+  middleware_address?: string;
   facility?: {
     name: string;
   };