From 72344d15c320094b264aebeab7dd073042e8d365 Mon Sep 17 00:00:00 2001
From: Ashesh3 <3626859+Ashesh3@users.noreply.github.com>
Date: Mon, 19 Feb 2024 10:58:27 +0530
Subject: [PATCH 1/3] Location Uptime tracking

---
 src/Components/Assets/AssetManage.tsx          |  4 ++++
 src/Components/Common/Uptime.tsx               |  8 +++++---
 src/Components/Facility/LocationManagement.tsx | 10 ++++++++++
 src/Redux/api.tsx                              |  2 +-
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/Components/Assets/AssetManage.tsx b/src/Components/Assets/AssetManage.tsx
index 77bb88da3a8..debfbf29d03 100644
--- a/src/Components/Assets/AssetManage.tsx
+++ b/src/Components/Assets/AssetManage.tsx
@@ -502,6 +502,10 @@ const AssetManage = (props: AssetManageProps) => {
           <Uptime
             route={routes.listAssetAvailability}
             params={{ external_id: asset.id }}
+            header={
+              <div className="text-xl font-semibold">Availability History</div>
+            }
+            parentClassNames="mt-8 flex w-full flex-col bg-white p-4 shadow-sm sm:rounded-lg"
           />
         )}
       <div className="mb-4 mt-8 text-xl font-semibold">Service History</div>
diff --git a/src/Components/Common/Uptime.tsx b/src/Components/Common/Uptime.tsx
index e7272e2e1f4..0bd63a3ce9d 100644
--- a/src/Components/Common/Uptime.tsx
+++ b/src/Components/Common/Uptime.tsx
@@ -169,6 +169,8 @@ export default function Uptime(
   props: Readonly<{
     route: QueryRoute<PaginatedResponse<AvailabilityRecord>>;
     params?: Record<string, string | number>;
+    header?: React.ReactNode;
+    parentClassNames?: string;
   }>
 ) {
   const [summary, setSummary] = useState<{
@@ -361,10 +363,10 @@ export default function Uptime(
     );
   } else if (summary) {
     return (
-      <div className="mt-8 flex w-full flex-col bg-white p-4 shadow-sm sm:rounded-lg">
-        <div className="mx-2 w-full">
+      <div className={props.parentClassNames}>
+        <div className="w-full">
           <div className="grid grid-cols-1">
-            <div className="text-xl font-semibold">Availability History</div>
+            {props.header}
             <div>
               <div className="mt-2 overflow-x-clip px-5">
                 <div className="mb-1 mt-2 flex justify-center text-xs text-gray-700 opacity-70">
diff --git a/src/Components/Facility/LocationManagement.tsx b/src/Components/Facility/LocationManagement.tsx
index 93a08794c82..baf11d09ec8 100644
--- a/src/Components/Facility/LocationManagement.tsx
+++ b/src/Components/Facility/LocationManagement.tsx
@@ -7,6 +7,7 @@ import routes from "../../Redux/api";
 import PaginatedList from "../../CAREUI/misc/PaginatedList";
 import { LocationModel } from "./models";
 import RecordMeta from "../../CAREUI/display/RecordMeta";
+import Uptime from "../Common/Uptime";
 
 const Loading = lazy(() => import("../Common/Loading"));
 
@@ -122,6 +123,15 @@ const Location = ({
       >
         {middleware_address || "-"}
       </p>
+      <Uptime
+        route={routes.listFacilityAssetLocationAvailability}
+        params={{ external_id: id, facility_external_id: "-" }}
+        header={
+          <p className="mt-3 text-sm font-semibold text-gray-700">
+            Middleware Uptime
+          </p>
+        }
+      />
     </div>
 
     <ButtonV2
diff --git a/src/Redux/api.tsx b/src/Redux/api.tsx
index 8b2a3ae08c2..9be226cae95 100644
--- a/src/Redux/api.tsx
+++ b/src/Redux/api.tsx
@@ -377,7 +377,7 @@ const routes = {
     path: "/api/v1/facility/{facility_external_id}/asset_location/{external_id}/",
     method: "PATCH",
   },
-  getFacilityAssetLocationAvailability: {
+  listFacilityAssetLocationAvailability: {
     path: "/api/v1/facility/{facility_external_id}/asset_location/{external_id}/availability/",
     method: "GET",
     TRes: Type<PaginatedResponse<AvailabilityRecord>>(),

From 3f493091e34080ccc06b71360dbab62187cbef92 Mon Sep 17 00:00:00 2001
From: Ashesh3 <3626859+Ashesh3@users.noreply.github.com>
Date: Mon, 19 Feb 2024 11:04:36 +0530
Subject: [PATCH 2/3] Add facilityId prop to Location component

---
 src/Components/Facility/LocationManagement.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/Components/Facility/LocationManagement.tsx b/src/Components/Facility/LocationManagement.tsx
index baf11d09ec8..927c2ea00f2 100644
--- a/src/Components/Facility/LocationManagement.tsx
+++ b/src/Components/Facility/LocationManagement.tsx
@@ -56,7 +56,7 @@ export default function LocationManagement({ facilityId }: Props) {
               <Loading />
             </PaginatedList.WhenLoading>
             <PaginatedList.Items<LocationModel> className="my-8 grid gap-3 @4xl:grid-cols-2 @6xl:grid-cols-3 @[100rem]:grid-cols-4 lg:mx-8">
-              {(item) => <Location {...item} />}
+              {(item) => <Location {...item} facilityId={facilityId} />}
             </PaginatedList.Items>
           </div>
 
@@ -77,7 +77,8 @@ const Location = ({
   created_date,
   modified_date,
   id,
-}: LocationModel) => (
+  facilityId,
+}: LocationModel & { facilityId: string }) => (
   <div className="flex h-full w-full flex-col rounded border border-gray-300 bg-white p-6 shadow-sm transition-all duration-200 ease-in-out hover:border-primary-400">
     <div className="flex-1">
       <div className="flex w-full items-center justify-between gap-2">
@@ -125,7 +126,7 @@ const Location = ({
       </p>
       <Uptime
         route={routes.listFacilityAssetLocationAvailability}
-        params={{ external_id: id, facility_external_id: "-" }}
+        params={{ external_id: id, facility_external_id: facilityId }}
         header={
           <p className="mt-3 text-sm font-semibold text-gray-700">
             Middleware Uptime

From 572a86fb7a1f69ec312ca393235eb419149d2f5b Mon Sep 17 00:00:00 2001
From: Ashesh3 <3626859+Ashesh3@users.noreply.github.com>
Date: Tue, 27 Feb 2024 02:06:42 +0530
Subject: [PATCH 3/3] Fix card alignment

---
 src/Components/Common/Uptime.tsx              | 21 ++++++++++---------
 .../Facility/LocationManagement.tsx           |  1 +
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/Components/Common/Uptime.tsx b/src/Components/Common/Uptime.tsx
index 0bd63a3ce9d..4b12a13bd17 100644
--- a/src/Components/Common/Uptime.tsx
+++ b/src/Components/Common/Uptime.tsx
@@ -171,6 +171,7 @@ export default function Uptime(
     params?: Record<string, string | number>;
     header?: React.ReactNode;
     parentClassNames?: string;
+    centerInfoPanel?: boolean;
   }>
 ) {
   const [summary, setSummary] = useState<{
@@ -193,6 +194,8 @@ export default function Uptime(
     setNumDays(Math.min(newNumDays, 100));
   };
 
+  const centerInfoPanel = props.centerInfoPanel ?? false;
+
   const setUptimeRecord = (records: AvailabilityRecord[]): void => {
     const recordsByDayBefore: { [key: number]: AvailabilityRecord[] } = {};
 
@@ -409,15 +412,13 @@ export default function Uptime(
                             }`}
                           ></div>
                         </span>
-                        {hoveredDay === index && (
-                          <>
-                            <UptimeInfoPopover
-                              records={summary[index]}
-                              day={index}
-                              date={formatDateBeforeDays[index]}
-                              numDays={numDays}
-                            />
-                          </>
+                        {hoveredDay === index && !centerInfoPanel && (
+                          <UptimeInfoPopover
+                            records={summary[index]}
+                            day={index}
+                            date={formatDateBeforeDays[index]}
+                            numDays={numDays}
+                          />
                         )}
                       </>
                     );
@@ -434,7 +435,7 @@ export default function Uptime(
               </div>
             </div>
             {hoveredDay !== -1 && (
-              <div className="relative sm:hidden">
+              <div className={`relative ${!centerInfoPanel && "sm:hidden"}`}>
                 <UptimeInfo
                   records={summary[hoveredDay]}
                   date={formatDateBeforeDays[hoveredDay]}
diff --git a/src/Components/Facility/LocationManagement.tsx b/src/Components/Facility/LocationManagement.tsx
index d2b157ee1cf..c6578958ac5 100644
--- a/src/Components/Facility/LocationManagement.tsx
+++ b/src/Components/Facility/LocationManagement.tsx
@@ -256,6 +256,7 @@ const Location = ({
             Middleware Uptime
           </p>
         }
+        centerInfoPanel
       />
     </div>