Merge pull request #276 from valkey-io/bring-start-monitoring-button-back

Author: nassery318

apps/frontend/src/components/monitoring/Monitoring.tsx

@@ -185,6 +185,7 @@ export const Monitoring = () => {
               <HotKeys
                 data={hotKeysData}
                 errorMessage={hotKeysErrorMessage as string | null}
+                monitorRunning={monitorRunning}
                 onKeyClick={handleKeyClick}
                 onStartMonitoring={() => setConfigOpen(true)}
                 selectedKey={selectedKey}

apps/frontend/src/components/monitoring/hot-keys.tsx

@@ -11,18 +11,17 @@ import { SortableTableHeader, StaticTableHeader, type SortOrder } from "../ui/so
 import { Typography } from "../ui/typography"
 import { copyToClipboard } from "@/lib/utils"
 
-const START_MONITORING_STRING = "Start Monitoring"
-
 interface HotKeysProps {
   data: [string, number, number | null, number][] | null
   errorMessage: string | null
   status?: string
+  monitorRunning?: boolean
   onKeyClick?: (keyName: string) => void
   onStartMonitoring?: () => void
   selectedKey?: string | null
 }
 
-export function HotKeys({ data, errorMessage, status, onKeyClick, onStartMonitoring, selectedKey }: HotKeysProps) {
+export function HotKeys({ data, errorMessage, status, monitorRunning, onKeyClick, onStartMonitoring, selectedKey }: HotKeysProps) {
   const [sortOrder, setSortOrder] = useState<SortOrder>("desc")
 
   const toggleSortOrder = () => {
@@ -135,28 +134,25 @@ export function HotKeys({ data, errorMessage, status, onKeyClick, onStartMonitor
   ) : (
     <EmptyState
       action={
-        errorMessage && (
+        (errorMessage || !monitorRunning) && (
           <div className="mt-2 p-3 bg-red-50 dark:bg-red-900/20 rounded-md">
             <div className="flex items-start gap-2">
               <AlertCircle className="w-4 h-4 text-red-500 mt-0.5 shrink-0" />
               <Typography variant="bodySm">
-                {(() => {
-                  const parts = errorMessage.split(START_MONITORING_STRING)
-                  if (parts.length < 2 || !onStartMonitoring) return errorMessage
-                  return (
-                    <>
-                      {parts[0]}
-                      <button
-                        className="text-primary underline hover:opacity-80"
-                        onClick={onStartMonitoring}
-                        type="button"
-                      >
-                        {START_MONITORING_STRING}
-                      </button>
-                      {parts.slice(1).join(START_MONITORING_STRING)}
-                    </>
-                  )
-                })()}
+                {!monitorRunning && onStartMonitoring ? (
+                  <>
+                    Monitor is not running.{" "}
+                    <button
+                      className="text-primary underline hover:opacity-80"
+                      onClick={onStartMonitoring}
+                      type="button"
+                    >
+                      Start Monitoring
+                    </button>
+                  </>
+                ) : (
+                  errorMessage
+                )}
               </Typography>
             </div>
           </div>

apps/metrics/src/handlers/monitor-handler.js

@@ -7,7 +7,7 @@ import * as Streamer from "../effects/ndjson-streamer.js"
 
 export const readMonitorMetadata = () => getCollectorMeta(MONITOR)
 
-const toResponse = ({ isRunning, willCompleteAt }) => ({
+const toResponse = ({ isRunning, willCompleteAt, startedAt }) => ({
   monitorRunning: isRunning,
   checkAt: willCompleteAt,
   startedAt: startedAt ?? null,