Introduce (i) Button Popover Component in HL7Monitor and VentilatorPatientVitalsMonitor

src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx

@@ -1,14 +1,13 @@
 import { useEffect } from "react";
 import useHL7VitalsMonitor from "./useHL7VitalsMonitor";
-import { Link } from "raviger";
-import { GENDER_TYPES } from "../../Common/constants";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import WaveformLabels from "./WaveformLabels";
 import { classNames } from "../../Utils/utils";
 import { IVitalsComponentProps, VitalsValueBase } from "./types";
 import { triggerGoal } from "../../Integrations/Plausible";
 import useAuthUser from "../../Common/hooks/useAuthUser";
 import dayjs from "dayjs";
+import VitalsMonitorHeader from "./VitalsMonitorHeader";
 
 const minutesAgo = (timestamp: string) => {
   return `${dayjs().diff(dayjs(timestamp), "minute")}m ago`;
@@ -18,7 +17,7 @@ export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
   const { connect, waveformCanvas, data, isOnline } = useHL7VitalsMonitor(
     props.config
   );
-  const { patient, bed, asset } = props.patientAssetBed ?? {};
+  const { bed, asset } = props.patientAssetBed ?? {};
   const authUser = useAuthUser();
 
   useEffect(() => {
@@ -41,57 +40,7 @@ export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
 
   return (
     <div className="flex flex-col gap-1 rounded bg-[#020617] p-2">
-      {props.patientAssetBed && (
-        <div className="flex items-center justify-between px-2 tracking-wide">
-          <div className="flex flex-col gap-2 md:flex-row">
-            {patient ? (
-              <Link
-                href={`/facility/${patient.last_consultation?.facility}/patient/${patient.id}/consultation/${patient.last_consultation?.id}`}
-                className="font-bold uppercase text-white"
-              >
-                {patient?.name}
-              </Link>
-            ) : (
-              <span className="flex items-center gap-1 text-gray-500">
-                <CareIcon className="care-l-ban" />
-                No Patient
-              </span>
-            )}
-            {patient && (
-              <span className="text-xs font-bold text-gray-400 md:text-sm">
-                {patient.age}y;{" "}
-                {GENDER_TYPES.find((g) => g.id === patient.gender)?.icon}
-              </span>
-            )}
-          </div>
-          <div className="flex flex-col items-center gap-2 text-xs md:flex-row md:text-sm">
-            {asset && (
-              <Link
-                className="flex items-center gap-1 text-gray-500"
-                href={`/facility/${patient?.facility_object?.id}/assets/${asset?.id}`}
-              >
-                <CareIcon className="care-l-monitor-heart-rate text-sm md:text-base" />
-                <span>{asset.name}</span>
-              </Link>
-            )}
-            {bed && (
-              <Link
-                className="flex flex-col items-center gap-2 text-gray-500 md:flex-row"
-                href={`/facility/${patient?.facility_object?.id}/location/${bed?.location_object?.id}/beds`}
-              >
-                <span className="flex items-center gap-1">
-                  <CareIcon className="care-l-bed text-sm md:text-base" />
-                  <span>{bed.name}</span>
-                </span>
-                <span className="flex items-center gap-1">
-                  <CareIcon className="care-l-location-point text-sm md:text-base" />
-                  <span>{bed.location_object?.name}</span>
-                </span>
-              </Link>
-            )}
-          </div>
-        </div>
-      )}
+      <VitalsMonitorHeader patientAssetBed={props.patientAssetBed} />
       <div className="relative flex flex-col gap-2 md:flex-row md:justify-between">
         <VitalsNonWaveformContent>
           {/* Pulse Rate */}

src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx

@@ -1,83 +1,25 @@
 import { useEffect } from "react";
-import { Link } from "raviger";
-import { GENDER_TYPES } from "../../Common/constants";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import useVentilatorVitalsMonitor from "./useVentilatorVitalsMonitor";
 import { IVitalsComponentProps, VitalsValueBase } from "./types";
 import { classNames } from "../../Utils/utils";
 import WaveformLabels from "./WaveformLabels";
 import { VitalsNonWaveformContent } from "./HL7PatientVitalsMonitor";
+import VitalsMonitorHeader from "./VitalsMonitorHeader";
 
 export default function VentilatorPatientVitalsMonitor(
   props: IVitalsComponentProps
 ) {
   const { connect, waveformCanvas, data, isOnline } =
     useVentilatorVitalsMonitor(props.config);
-  const { patient, bed, asset } = props.patientAssetBed ?? {};
 
   useEffect(() => {
     connect(props.socketUrl);
   }, [props.socketUrl]);
 
   return (
     <div className="flex flex-col gap-1 rounded bg-[#020617] p-2">
-      {props.patientAssetBed && (
-        <div className="flex items-center justify-between px-2 tracking-wide">
-          <div className="flex items-center gap-2">
-            {patient ? (
-              <Link
-                href={`/facility/${patient.last_consultation?.facility}/patient/${patient.id}/consultation/${patient.last_consultation?.id}`}
-                className="font-bold uppercase text-white"
-              >
-                {patient?.name}
-              </Link>
-            ) : (
-              <span className="flex items-center gap-1 text-gray-500">
-                <CareIcon className="care-l-ban" />
-                No Patient
-              </span>
-            )}
-            {patient && (
-              <span className="text-sm font-bold text-gray-400">
-                {patient.age}y;{" "}
-                {GENDER_TYPES.find((g) => g.id === patient.gender)?.icon}
-              </span>
-            )}
-          </div>
-          <div className="flex gap-3">
-            {asset && (
-              <div className="flex items-center gap-2 text-sm">
-                <Link
-                  className="flex gap-2 text-gray-500"
-                  href={`/facility/${patient?.facility_object?.id}/assets/${asset?.id}`}
-                >
-                  <span className="flex items-center gap-1">
-                    <CareIcon className="care-l-lungs text-base" />
-                    {asset.name}
-                  </span>
-                </Link>
-              </div>
-            )}
-            {bed && (
-              <div className="flex items-center gap-2 text-sm">
-                <Link
-                  className="flex gap-2 text-gray-500"
-                  href={`/facility/${patient?.facility_object?.id}/location/${bed?.location_object?.id}/beds`}
-                >
-                  <span className="flex items-center gap-1">
-                    <CareIcon className="care-l-bed text-base" />
-                    {bed.name}
-                  </span>
-                  <span className="flex items-center gap-1">
-                    <CareIcon className="care-l-location-point text-base" />
-                    {bed.location_object?.name}
-                  </span>
-                </Link>
-              </div>
-            )}
-          </div>
-        </div>
-      )}
+      <VitalsMonitorHeader patientAssetBed={props.patientAssetBed} />
       <div className="relative flex flex-col gap-2 divide-x-0 divide-y divide-blue-600 md:flex-row md:justify-between md:divide-x md:divide-y-0">
         <div>
           <div

src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx

@@ -0,0 +1,79 @@
+import CareIcon from "../../CAREUI/icons/CareIcon";
+import { AssetData, assetClassProps } from "../Assets/AssetTypes";
+import ButtonV2 from "../Common/components/ButtonV2";
+import { navigate } from "raviger";
+import { useTranslation } from "react-i18next";
+import { Popover, Transition } from "@headlessui/react";
+import { Fragment } from "react";
+
+interface VitalsMonitorAssetPopoverProps {
+  asset?: AssetData;
+}
+
+const VitalsMonitorAssetPopover = ({
+  asset,
+}: VitalsMonitorAssetPopoverProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="max-w-full">
+      <Popover className="relative">
+        <Popover.Button>
+          <CareIcon className="care-l-info-circle cursor-pointer text-sm text-gray-500 hover:text-white md:text-base" />
+        </Popover.Button>
+        <Transition
+          as={Fragment}
+          enter="transition ease-out duration-200"
+          enterFrom="opacity-0 translate-y-1"
+          enterTo="opacity-100 translate-y-0"
+          leave="transition ease-in duration-150"
+          leaveFrom="opacity-100 translate-y-0"
+          leaveTo="opacity-0 translate-y-1"
+        >
+          <Popover.Panel className="absolute z-50 mt-2 w-80 translate-x-[-300px] rounded-md bg-white md:w-96 md:-translate-x-full">
+            <div className="flex flex-col gap-3 p-5">
+              <div className="flex items-center gap-2 text-lg font-bold">
+                <CareIcon
+                  className={`care-l-${
+                    (
+                      (asset?.asset_class &&
+                        assetClassProps[asset.asset_class]) ||
+                      assetClassProps.NONE
+                    ).icon
+                  } text-2xl`}
+                />
+                <p>{asset?.name}</p>
+              </div>
+              <div className="flex flex-col gap-2">
+                <p className="text-sm md:text-base">Middleware Hostname:</p>
+                <p className="break-words text-gray-600">
+                  {asset?.resolved_middleware?.hostname}
+                </p>
+              </div>
+              <div className="flex flex-col gap-2">
+                <p className="text-sm md:text-base">Local IP Address:</p>
+                <p className="break-words text-gray-600">
+                  {asset?.meta?.local_ip_address}
+                </p>
+              </div>
+              <ButtonV2
+                onClick={() =>
+                  navigate(
+                    `/facility/${asset?.location_object.facility?.id}/assets/${asset?.id}/configure`
+                  )
+                }
+                id="configure-asset"
+                data-testid="asset-configure-button"
+              >
+                <CareIcon className="care-l-setting h-4" />
+                {t("configure")}
+              </ButtonV2>
+            </div>
+          </Popover.Panel>
+        </Transition>
+      </Popover>
+    </div>
+  );
+};
+
+export default VitalsMonitorAssetPopover;

src/Components/VitalsMonitor/VitalsMonitorHeader.tsx

@@ -0,0 +1,58 @@
+import { PatientAssetBed } from "../Assets/AssetTypes";
+import { Link } from "raviger";
+import CareIcon from "../../CAREUI/icons/CareIcon";
+import { GENDER_TYPES } from "../../Common/constants";
+import VitalsMonitorAssetPopover from "./VitalsMonitorAssetPopover";
+
+interface VitalsMonitorHeaderProps {
+  patientAssetBed?: PatientAssetBed;
+}
+
+const VitalsMonitorHeader = ({ patientAssetBed }: VitalsMonitorHeaderProps) => {
+  const { patient, bed, asset } = patientAssetBed ?? {};
+  return (
+    <div className="flex items-center justify-between tracking-wide">
+      <div className="flex flex-col gap-2 md:flex-row md:items-center">
+        {patient ? (
+          <Link
+            href={`/facility/${patient.last_consultation?.facility}/patient/${patient.id}/consultation/${patient.last_consultation?.id}`}
+            className="font-bold uppercase text-white"
+          >
+            {patient?.name}
+          </Link>
+        ) : (
+          <span className="flex items-center gap-1 text-gray-500">
+            <CareIcon className="care-l-ban" />
+            No Patient
+          </span>
+        )}
+        {patient && (
+          <span className="text-xs font-bold text-gray-400 md:text-sm">
+            {patient.age}y;{" "}
+            {GENDER_TYPES.find((g) => g.id === patient.gender)?.icon}
+          </span>
+        )}
+      </div>
+      <div className="flex flex-col items-end gap-2 text-xs md:flex-row md:items-center md:text-sm">
+        {bed && (
+          <Link
+            className="flex flex-col items-end gap-2 text-gray-500 md:flex-row md:items-center"
+            href={`/facility/${patient?.facility_object?.id}/location/${bed?.location_object?.id}/beds`}
+          >
+            <span className="flex items-center gap-1 hover:text-white">
+              <CareIcon className="care-l-bed text-sm md:text-base" />
+              <span>{bed.name}</span>
+            </span>
+            <span className="flex items-center gap-1 hover:text-white">
+              <CareIcon className="care-l-location-point text-sm md:text-base" />
+              <span>{bed.location_object?.name}</span>
+            </span>
+          </Link>
+        )}
+        <VitalsMonitorAssetPopover asset={asset} />
+      </div>
+    </div>
+  );
+};
+
+export default VitalsMonitorHeader;