@checkstack/healthcheck-frontend 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @checkstack/healthcheck-frontend
 
+## 0.6.0
+
+### Minor Changes
+
+- 11d2679: Add ability to pause health check configurations globally. When paused, health checks continue to be scheduled but execution is skipped for all systems using that configuration. Users with manage access can pause/resume from the Health Checks config page.
+
+### Patch Changes
+
+- 223081d: Add icon support to PageLayout and improve mobile responsiveness
+
+  **PageLayout Icons:**
+
+  - Added required `icon` prop to `PageLayout` and `PageHeader` components that accepts a Lucide icon component reference
+  - Icons are rendered with consistent `h-6 w-6 text-primary` styling
+  - Updated all page components to include appropriate icons in their headers
+
+  **Mobile Layout Improvements:**
+
+  - Standardized responsive padding in main app shell (`p-3` on mobile, `p-6` on desktop)
+  - Added `CardHeaderRow` component for mobile-safe card headers with proper wrapping
+  - Improved `DateRangeFilter` responsive behavior with vertical stacking on mobile
+  - Migrated pages to use `PageLayout` for consistent responsive behavior
+
+- Updated dependencies [11d2679]
+- Updated dependencies [223081d]
+  - @checkstack/healthcheck-common@0.6.0
+  - @checkstack/ui@0.5.0
+  - @checkstack/auth-frontend@0.5.5
+  - @checkstack/dashboard-frontend@0.3.10
+
 ## 0.5.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/healthcheck-frontend",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "type": "module",
   "main": "src/index.tsx",
   "scripts": {

package/src/components/CollectorList.tsx

@@ -7,6 +7,7 @@ import {
   Card,
   CardContent,
   CardHeader,
+  CardHeaderRow,
   CardTitle,
   Label,
   Select,
@@ -157,62 +158,68 @@ export const CollectorList: React.FC<CollectorListProps> = ({
 
   return (
     <Card>
-      <CardHeader className="flex flex-row items-center justify-between">
-        <CardTitle className="text-base">Check Items</CardTitle>
-        {addableCollectors.length > 0 && (
-          <Select value="" onValueChange={handleAdd}>
-            <SelectTrigger className="w-[200px]">
-              <Plus className="h-4 w-4 mr-2" />
-              <SelectValue placeholder="Add collector..." />
-            </SelectTrigger>
-            <SelectContent>
-              {/* Built-in collectors first */}
-              {builtInCollectors.length > 0 && (
-                <>
-                  <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
-                    Built-in
-                  </div>
-                  {builtInCollectors
-                    .filter((c) => addableCollectors.some((a) => a.id === c.id))
-                    .map((collector) => (
-                      <SelectItem key={collector.id} value={collector.id}>
-                        <div className="flex items-center gap-2">
-                          <span>{collector.displayName}</span>
-                          {collector.allowMultiple && (
-                            <Badge variant="outline" className="text-xs">
-                              Multiple
-                            </Badge>
-                          )}
-                        </div>
-                      </SelectItem>
-                    ))}
-                </>
-              )}
-              {/* External collectors */}
-              {externalCollectors.length > 0 && (
-                <>
-                  <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
-                    External
-                  </div>
-                  {externalCollectors
-                    .filter((c) => addableCollectors.some((a) => a.id === c.id))
-                    .map((collector) => (
-                      <SelectItem key={collector.id} value={collector.id}>
-                        <div className="flex items-center gap-2">
-                          <span>{collector.displayName}</span>
-                          {collector.allowMultiple && (
-                            <Badge variant="outline" className="text-xs">
-                              Multiple
-                            </Badge>
-                          )}
-                        </div>
-                      </SelectItem>
-                    ))}
-                </>
-              )}
-            </SelectContent>
-          </Select>
-        )}
+      <CardHeader>
+        <CardHeaderRow>
+          <CardTitle className="text-base">Check Items</CardTitle>
+          {addableCollectors.length > 0 && (
+            <Select value="" onValueChange={handleAdd}>
+              <SelectTrigger className="w-[200px]">
+                <Plus className="h-4 w-4 mr-2" />
+                <SelectValue placeholder="Add collector..." />
+              </SelectTrigger>
+              <SelectContent>
+                {/* Built-in collectors first */}
+                {builtInCollectors.length > 0 && (
+                  <>
+                    <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
+                      Built-in
+                    </div>
+                    {builtInCollectors
+                      .filter((c) =>
+                        addableCollectors.some((a) => a.id === c.id),
+                      )
+                      .map((collector) => (
+                        <SelectItem key={collector.id} value={collector.id}>
+                          <div className="flex items-center gap-2">
+                            <span>{collector.displayName}</span>
+                            {collector.allowMultiple && (
+                              <Badge variant="outline" className="text-xs">
+                                Multiple
+                              </Badge>
+                            )}
+                          </div>
+                        </SelectItem>
+                      ))}
+                  </>
+                )}
+                {/* External collectors */}
+                {externalCollectors.length > 0 && (
+                  <>
+                    <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
+                      External
+                    </div>
+                    {externalCollectors
+                      .filter((c) =>
+                        addableCollectors.some((a) => a.id === c.id),
+                      )
+                      .map((collector) => (
+                        <SelectItem key={collector.id} value={collector.id}>
+                          <div className="flex items-center gap-2">
+                            <span>{collector.displayName}</span>
+                            {collector.allowMultiple && (
+                              <Badge variant="outline" className="text-xs">
+                                Multiple
+                              </Badge>
+                            )}
+                          </div>
+                        </SelectItem>
+                      ))}
+                  </>
+                )}
+              </SelectContent>
+            </Select>
+          )}
+        </CardHeaderRow>
       </CardHeader>
       <CardContent>
         {configuredCollectors.length === 0 ? (

package/src/components/HealthCheckList.tsx

@@ -11,14 +11,18 @@ import {
   TableHeader,
   TableRow,
   Button,
+  Badge,
 } from "@checkstack/ui";
-import { Trash2, Edit } from "lucide-react";
+import { Trash2, Edit, Pause, Play } from "lucide-react";
 
 interface HealthCheckListProps {
   configurations: HealthCheckConfiguration[];
   strategies: HealthCheckStrategyDto[];
   onEdit: (config: HealthCheckConfiguration) => void;
   onDelete: (id: string) => void;
+  onPause?: (id: string) => void;
+  onResume?: (id: string) => void;
+  canManage?: boolean;
 }
 
 export const HealthCheckList: React.FC<HealthCheckListProps> = ({
@@ -26,6 +30,9 @@ export const HealthCheckList: React.FC<HealthCheckListProps> = ({
   strategies,
   onEdit,
   onDelete,
+  onPause,
+  onResume,
+  canManage = true,
 }) => {
   const getStrategyName = (id: string) => {
     return strategies.find((s) => s.id === id)?.displayName || id;
@@ -39,24 +46,57 @@ export const HealthCheckList: React.FC<HealthCheckListProps> = ({
             <TableHead>Name</TableHead>
             <TableHead>Strategy</TableHead>
             <TableHead>Interval (s)</TableHead>
+            <TableHead>Status</TableHead>
             <TableHead className="text-right">Actions</TableHead>
           </TableRow>
         </TableHeader>
         <TableBody>
           {configurations.length === 0 ? (
             <TableRow>
-              <TableCell colSpan={4} className="h-24 text-center">
+              <TableCell colSpan={5} className="h-24 text-center">
                 No health checks configured.
               </TableCell>
             </TableRow>
           ) : (
             configurations.map((config) => (
-              <TableRow key={config.id}>
+              <TableRow
+                key={config.id}
+                className={config.paused ? "opacity-60" : ""}
+              >
                 <TableCell className="font-medium">{config.name}</TableCell>
                 <TableCell>{getStrategyName(config.strategyId)}</TableCell>
                 <TableCell>{config.intervalSeconds}</TableCell>
+                <TableCell>
+                  {config.paused ? (
+                    <Badge variant="secondary">Paused</Badge>
+                  ) : (
+                    <Badge variant="default">Active</Badge>
+                  )}
+                </TableCell>
                 <TableCell className="text-right">
                   <div className="flex justify-end gap-2">
+                    {canManage &&
+                      onPause &&
+                      onResume &&
+                      (config.paused ? (
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => onResume(config.id)}
+                          title="Resume health check"
+                        >
+                          <Play className="h-4 w-4" />
+                        </Button>
+                      ) : (
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => onPause(config.id)}
+                          title="Pause health check"
+                        >
+                          <Pause className="h-4 w-4" />
+                        </Button>
+                      ))}
                     <Button
                       variant="ghost"
                       size="icon"
@@ -64,14 +104,16 @@ export const HealthCheckList: React.FC<HealthCheckListProps> = ({
                     >
                       <Edit className="h-4 w-4" />
                     </Button>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="text-destructive hover:text-destructive"
-                      onClick={() => onDelete(config.id)}
-                    >
-                      <Trash2 className="h-4 w-4" />
-                    </Button>
+                    {canManage && (
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="text-destructive hover:text-destructive"
+                        onClick={() => onDelete(config.id)}
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    )}
                   </div>
                 </TableCell>
               </TableRow>

package/src/components/HealthCheckSystemOverview.tsx

@@ -180,10 +180,7 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
       </div>
 
       {/* Date Range Filter */}
-      <div className="flex items-center gap-2">
-        <span className="text-sm text-muted-foreground">Time Range:</span>
-        <DateRangeFilter value={dateRange} onChange={setDateRange} />
-      </div>
+      <DateRangeFilter value={dateRange} onChange={setDateRange} />
 
       {/* Charts Section */}
       {renderCharts()}
@@ -301,28 +298,31 @@ export function HealthCheckSystemOverview(props: SlotProps) {
         return (
           <div key={item.configurationId} className="rounded-md border bg-card">
             <button
-              className="w-full flex items-center justify-between p-4 text-left hover:bg-muted/50 transition-colors"
+              className="w-full p-4 text-left hover:bg-muted/50 transition-colors"
               onClick={() =>
                 setExpandedRow(isExpanded ? undefined : item.configurationId)
               }
             >
+              {/* Header row: chevron, name, badge */}
               <div className="flex items-center gap-3">
                 {isExpanded ? (
-                  <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                  <ChevronDown className="h-4 w-4 text-muted-foreground shrink-0" />
                 ) : (
-                  <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                  <ChevronRight className="h-4 w-4 text-muted-foreground shrink-0" />
                 )}
-                <div>
-                  <div className="font-medium">{item.name}</div>
-                  <div className="text-sm text-muted-foreground">
-                    Last run:{" "}
-                    {item.lastRunAt
-                      ? formatDistanceToNow(item.lastRunAt, { addSuffix: true })
-                      : "never"}
-                  </div>
+                <div className="flex-1 min-w-0 flex items-center justify-between gap-2">
+                  <span className="font-medium truncate">{item.name}</span>
+                  <HealthBadge status={item.state} />
                 </div>
               </div>
-              <div className="flex items-center gap-4">
+              {/* Details row: last run + sparkline */}
+              <div className="ml-7 mt-1 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
+                <span className="text-sm text-muted-foreground">
+                  Last run:{" "}
+                  {item.lastRunAt
+                    ? formatDistanceToNow(item.lastRunAt, { addSuffix: true })
+                    : "never"}
+                </span>
                 {item.recentStatusHistory.length > 0 && (
                   <HealthCheckSparkline
                     runs={item.recentStatusHistory.map((status) => ({
@@ -330,7 +330,6 @@ export function HealthCheckSystemOverview(props: SlotProps) {
                     }))}
                   />
                 )}
-                <HealthBadge status={item.state} />
               </div>
             </button>
             {isExpanded && <ExpandedDetails item={item} systemId={systemId} />}

package/src/pages/HealthCheckConfigPage.tsx

@@ -21,7 +21,7 @@ import {
   PageLayout,
   useToast,
 } from "@checkstack/ui";
-import { Plus, History } from "lucide-react";
+import { Plus, History, Activity } from "lucide-react";
 import { Link } from "react-router-dom";
 import { resolveRoute } from "@checkstack/common";
 
@@ -31,10 +31,10 @@ const HealthCheckConfigPageContent = () => {
   const toast = useToast();
   const [searchParams, setSearchParams] = useSearchParams();
   const { allowed: canRead, loading: accessLoading } = accessApi.useAccess(
-    healthCheckAccess.configuration.read
+    healthCheckAccess.configuration.read,
   );
   const { allowed: canManage } = accessApi.useAccess(
-    healthCheckAccess.configuration.manage
+    healthCheckAccess.configuration.manage,
   );
 
   const [isEditorOpen, setIsEditorOpen] = useState(false);
@@ -52,7 +52,7 @@ const HealthCheckConfigPageContent = () => {
 
   // Fetch strategies with useQuery
   const { data: strategies = [] } = healthCheckClient.getStrategies.useQuery(
-    {}
+    {},
   );
 
   const configurations = configurationsData?.configurations ?? [];
@@ -100,6 +100,24 @@ const HealthCheckConfigPageContent = () => {
     },
   });
 
+  const pauseMutation = healthCheckClient.pauseConfiguration.useMutation({
+    onSuccess: () => {
+      void refetchConfigurations();
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : "Failed to pause");
+    },
+  });
+
+  const resumeMutation = healthCheckClient.resumeConfiguration.useMutation({
+    onSuccess: () => {
+      void refetchConfigurations();
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : "Failed to resume");
+    },
+  });
+
   const handleCreate = () => {
     setEditingConfig(undefined);
     setIsEditorOpen(true);
@@ -137,6 +155,7 @@ const HealthCheckConfigPageContent = () => {
     <PageLayout
       title="Health Checks"
       subtitle="Manage health check configurations"
+      icon={Activity}
       loading={accessLoading}
       allowed={canRead}
       actions={
@@ -159,6 +178,9 @@ const HealthCheckConfigPageContent = () => {
         strategies={strategies}
         onEdit={handleEdit}
         onDelete={handleDelete}
+        onPause={(id) => pauseMutation.mutate(id)}
+        onResume={(id) => resumeMutation.mutate(id)}
+        canManage={canManage}
       />
 
       <HealthCheckEditor
@@ -184,5 +206,5 @@ const HealthCheckConfigPageContent = () => {
 };
 
 export const HealthCheckConfigPage = wrapInSuspense(
-  HealthCheckConfigPageContent
+  HealthCheckConfigPageContent,
 );

package/src/pages/HealthCheckHistoryDetailPage.tsx

@@ -25,6 +25,7 @@ import {
   type DateRange,
 } from "@checkstack/ui";
 import { useParams } from "react-router-dom";
+import { History } from "lucide-react";
 import {
   HealthCheckRunsTable,
   type HealthCheckRunDetailed,
@@ -39,7 +40,7 @@ const HealthCheckHistoryDetailPageContent = () => {
   const healthCheckClient = usePluginClient(HealthCheckApi);
   const accessApi = useApi(accessApiRef);
   const { allowed: canManage, loading: accessLoading } = accessApi.useAccess(
-    healthCheckAccess.configuration.manage
+    healthCheckAccess.configuration.manage,
   );
 
   const [dateRange, setDateRange] = useState<DateRange>(getDefaultDateRange);
@@ -67,8 +68,9 @@ const HealthCheckHistoryDetailPageContent = () => {
       title="Health Check Run History"
       subtitle={`System: ${systemId} • Configuration: ${configurationId?.slice(
         0,
-        8
+        8,
       )}...`}
+      icon={History}
       loading={accessLoading}
       allowed={canManage}
       actions={
@@ -100,5 +102,5 @@ const HealthCheckHistoryDetailPageContent = () => {
 };
 
 export const HealthCheckHistoryDetailPage = wrapInSuspense(
-  HealthCheckHistoryDetailPageContent
+  HealthCheckHistoryDetailPageContent,
 );

package/src/pages/HealthCheckHistoryPage.tsx

@@ -21,12 +21,13 @@ import {
   healthCheckAccess,
   HealthCheckApi,
 } from "@checkstack/healthcheck-common";
+import { History } from "lucide-react";
 
 const HealthCheckHistoryPageContent = () => {
   const healthCheckClient = usePluginClient(HealthCheckApi);
   const accessApi = useApi(accessApiRef);
   const { allowed: canManage, loading: accessLoading } = accessApi.useAccess(
-    healthCheckAccess.configuration.manage
+    healthCheckAccess.configuration.manage,
   );
 
   // Pagination state
@@ -47,6 +48,7 @@ const HealthCheckHistoryPageContent = () => {
     <PageLayout
       title="Health Check History"
       subtitle="Detailed run history with full result data"
+      icon={History}
       loading={accessLoading}
       allowed={canManage}
     >
@@ -68,5 +70,5 @@ const HealthCheckHistoryPageContent = () => {
 };
 
 export const HealthCheckHistoryPage = wrapInSuspense(
-  HealthCheckHistoryPageContent
+  HealthCheckHistoryPageContent,
 );