@checkstack/healthcheck-frontend 0.7.2 → 0.8.1

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @checkstack/healthcheck-frontend
 
+## 0.8.1
+
+### Patch Changes
+
+- 0b9fc58: Fix workspace:\* protocol resolution in published packages
+
+  Published packages now correctly have resolved dependency versions instead of `workspace:*` references. This is achieved by using `bun publish` which properly resolves workspace protocol references.
+
+- Updated dependencies [0b9fc58]
+  - @checkstack/auth-frontend@0.5.7
+  - @checkstack/catalog-common@1.2.5
+  - @checkstack/common@0.6.1
+  - @checkstack/dashboard-frontend@0.3.13
+  - @checkstack/frontend-api@0.3.4
+  - @checkstack/healthcheck-common@0.8.1
+  - @checkstack/signal-frontend@0.0.11
+  - @checkstack/ui@0.5.2
+
+## 0.8.0
+
+### Minor Changes
+
+- d6f7449: Add availability statistics display to HealthCheckSystemOverview
+
+  - New `getAvailabilityStats` RPC endpoint that calculates availability percentages for 31-day and 365-day periods
+  - Availability is calculated as `(healthyRuns / totalRuns) * 100`
+  - Data is sourced from both daily aggregates and recent raw runs to include the most up-to-date information
+  - Frontend displays availability stats with color-coded badges (green ≥99.9%, yellow ≥99%, red <99%)
+  - Shows total run counts for each period
+
+### Patch Changes
+
+- Updated dependencies [d6f7449]
+  - @checkstack/healthcheck-common@0.8.0
+  - @checkstack/dashboard-frontend@0.3.12
+
 ## 0.7.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/healthcheck-frontend",
-  "version": "0.7.2",
+  "version": "0.8.1",
   "type": "module",
   "main": "src/index.tsx",
   "scripts": {
@@ -9,14 +9,14 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/auth-frontend": "workspace:*",
-    "@checkstack/catalog-common": "workspace:*",
-    "@checkstack/common": "workspace:*",
-    "@checkstack/dashboard-frontend": "workspace:*",
-    "@checkstack/frontend-api": "workspace:*",
-    "@checkstack/healthcheck-common": "workspace:*",
-    "@checkstack/signal-frontend": "workspace:*",
-    "@checkstack/ui": "workspace:*",
+    "@checkstack/auth-frontend": "0.5.6",
+    "@checkstack/catalog-common": "1.2.4",
+    "@checkstack/common": "0.6.0",
+    "@checkstack/dashboard-frontend": "0.3.11",
+    "@checkstack/frontend-api": "0.3.3",
+    "@checkstack/healthcheck-common": "0.7.0",
+    "@checkstack/signal-frontend": "0.0.10",
+    "@checkstack/ui": "0.5.1",
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
     "date-fns": "^4.1.0",
@@ -29,8 +29,8 @@
     "zod": "^4.2.1"
   },
   "devDependencies": {
-    "@checkstack/scripts": "workspace:*",
-    "@checkstack/tsconfig": "workspace:*",
+    "@checkstack/scripts": "0.1.0",
+    "@checkstack/tsconfig": "0.0.2",
     "@types/prismjs": "^1.26.5",
     "@types/react": "^18.2.0",
     "typescript": "^5.0.0"

package/src/components/HealthCheckSystemOverview.tsx

@@ -70,6 +70,30 @@ interface ExpandedRowProps {
   systemId: string;
 }
 
+// Helper to format availability percentage with color
+const formatAvailability = (
+  value: number | null,
+  totalRuns: number,
+): { text: string; className: string } => {
+  if (value === null || totalRuns === 0) {
+    return { text: "N/A", className: "text-muted-foreground" };
+  }
+  const formatted = value.toFixed(2) + "%";
+  if (value >= 99.9) {
+    return {
+      text: formatted,
+      className: "text-green-600 dark:text-green-400",
+    };
+  }
+  if (value >= 99) {
+    return {
+      text: formatted,
+      className: "text-yellow-600 dark:text-yellow-400",
+    };
+  }
+  return { text: formatted, className: "text-red-600 dark:text-red-400" };
+};
+
 const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
   const healthCheckClient = usePluginClient(HealthCheckApi);
   const navigate = useNavigate();
@@ -191,6 +215,13 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
       : `Window mode (${item.stateThresholds.windowSize} runs): Degraded at ${item.stateThresholds.degraded.minFailureCount}+ failures, Unhealthy at ${item.stateThresholds.unhealthy.minFailureCount}+ failures`
     : "Using default thresholds";
 
+  // Fetch availability stats
+  const { data: availabilityData } =
+    healthCheckClient.getAvailabilityStats.useQuery({
+      systemId,
+      configurationId: item.configurationId,
+    });
+
   // Render charts - charts handle data transformation internally
   const renderCharts = () => {
     if (chartLoading) {
@@ -270,6 +301,59 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
         </div>
       </div>
 
+      {/* Availability Stats - Prominent Display */}
+      {availabilityData && (
+        <div className="grid grid-cols-2 gap-4">
+          <div className="flex flex-col gap-1 p-4 rounded-lg border bg-card">
+            <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+              31-Day Availability
+            </span>
+            <div className="flex items-baseline gap-2">
+              <span
+                className={`text-2xl font-bold ${formatAvailability(availabilityData.availability31Days, availabilityData.totalRuns31Days).className}`}
+              >
+                {
+                  formatAvailability(
+                    availabilityData.availability31Days,
+                    availabilityData.totalRuns31Days,
+                  ).text
+                }
+              </span>
+              {availabilityData.totalRuns31Days > 0 && (
+                <span className="text-sm text-muted-foreground">
+                  ({availabilityData.totalRuns31Days.toLocaleString()} runs)
+                </span>
+              )}
+            </div>
+          </div>
+          <div className="flex flex-col gap-1 p-4 rounded-lg border bg-card">
+            <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+              365-Day Availability
+            </span>
+            <div className="flex items-baseline gap-2">
+              <span
+                className={`text-2xl font-bold ${formatAvailability(availabilityData.availability365Days, availabilityData.totalRuns365Days).className}`}
+              >
+                {
+                  formatAvailability(
+                    availabilityData.availability365Days,
+                    availabilityData.totalRuns365Days,
+                  ).text
+                }
+              </span>
+              {availabilityData.totalRuns365Days > 0 && (
+                <span className="text-sm text-muted-foreground">
+                  ({availabilityData.totalRuns365Days.toLocaleString()} runs)
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Divider */}
+      <div className="h-px bg-border" />
+
       {/* Date Range Filter with Loading Spinner */}
       <div className="flex items-center gap-3 flex-wrap">
         <DateRangeFilter