feat: Uptime component (#2240)

catalog/ui/src/app/Catalog/CatalogItemDetails.tsx

@@ -66,6 +66,7 @@ import useHelpLink from '@app/utils/useHelpLink';
 import useSWRImmutable from 'swr/immutable';
 
 import './catalog-item-details.css';
+import UptimeDisplay from '@app/components/UptimeDisplay';
 
 enum CatalogItemAccess {
   Allow,
@@ -379,7 +380,9 @@ const CatalogItemDetails: React.FC<{ catalogItem: CatalogItem; onClose: () => vo
               <DescriptionListGroup className="catalog-item-details__uptime">
                 <DescriptionListTerm>Uptime</DescriptionListTerm>
                 <DescriptionListDescription>
-                  {`${catalogItemIncident ? calculateUptimePercentage(catalogItemIncident.downtime_hours) : 100}%`}
+                  <UptimeDisplay
+                    uptime={catalogItemIncident ? calculateUptimePercentage(catalogItemIncident.downtime_hours) : 100}
+                  />
                 </DescriptionListDescription>
               </DescriptionListGroup>
 

catalog/ui/src/app/components/UptimeDisplay.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+interface UptimeDisplayProps {
+  uptime: number;
+}
+
+const UptimeDisplay: React.FC<UptimeDisplayProps> = ({ uptime }) => {
+  // Function to get color based on uptime percentage
+  const getColor = (): string => {
+    if (uptime >= 99) return '#4caf50'; // Green for high uptime
+    if (uptime >= 95) return '#ff9800'; // Orange for moderate uptime
+    return '#f44336'; // Red for low uptime
+  };
+
+  return (
+    <div style={styles.container}>
+      <div
+        style={{
+          ...styles.progressBar,
+          backgroundColor: getColor(),
+          width: `${uptime}%`,
+        }}
+      />
+      <p>{Math.round(uptime)}%</p>
+    </div>
+  );
+};
+
+// Styles object with type annotation
+const styles: { [key: string]: React.CSSProperties } = {
+  container: {
+    width: '100%',
+    maxWidth: '400px',
+    margin: '2px auto',
+    textAlign: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    gap: '6px',
+    paddingRight: '8px'
+  },
+  progressBar: {
+    height: '20px',
+    borderRadius: '5px',
+    transition: 'width 0.5s ease',
+  },
+};
+
+export default UptimeDisplay;

catalog/ui/src/app/util.ts

@@ -449,5 +449,5 @@ export function calculateUptimePercentage(downtimeHours: number) {
   const uptimeHours = Math.max(0, totalTimeHours - downtimeHours);
   const uptimePercentage = (uptimeHours / totalTimeHours) * 100;
 
-  return uptimePercentage.toFixed(2);
+  return uptimePercentage;
 }