move buttons to client component

ui/app/mirrors/[mirrorId]/page.tsx

@@ -10,6 +10,7 @@ import { GetFlowHttpAddressFromEnv } from '@/rpc/http';
 import { CDCMirror } from './cdc';
 import NoMirror from './nomirror';
 import QrepGraph from './qrepGraph';
+import QRepStatusButtons from './qrepStatusButtons';
 import QRepStatusTable, { QRepPartitionStatus } from './qrepStatusTable';
 import SyncStatus from './syncStatus';
 
@@ -31,17 +32,6 @@ async function getMirrorStatus(mirrorId: string) {
   return json;
 }
 
-function setFlowState(flowJobName: string, requestedFlowState: FlowStatus) {
-  return fetch(`/api/mirrors/state_change`, {
-    method: 'POST',
-    body: JSON.stringify({
-      flowJobName,
-      requestedFlowState,
-    }),
-    cache: 'no-store',
-  });
-}
-
 export default async function ViewMirror({
   params: { mirrorId },
 }: EditMirrorProps) {
@@ -182,16 +172,7 @@ export default async function ViewMirror({
           }}
         >
           <Header variant='title2'>{mirrorId}</Header>
-          <input
-            type='button'
-            value='Pause'
-            onClick={() => setFlowState(mirrorId, FlowStatus.STATUS_PAUSED)}
-          />
-          <input
-            type='button'
-            value='Resume'
-            onClick={() => setFlowState(mirrorId, FlowStatus.STATUS_RUNNING)}
-          />
+          <QRepStatusButtons mirrorId={mirrorId} />
         </div>
         <div>Status: {mirrorStatus.currentFlowState}</div>
         <QrepGraph

ui/app/mirrors/[mirrorId]/qrepStatusButtons.tsx

@@ -0,0 +1,34 @@
+'use client';
+import { FlowStatus } from '@/grpc_generated/flow';
+
+async function setFlowState(
+  flowJobName: string,
+  requestedFlowState: FlowStatus
+) {
+  await fetch(`/api/mirrors/state_change`, {
+    method: 'POST',
+    body: JSON.stringify({
+      flowJobName,
+      requestedFlowState,
+    }),
+    cache: 'no-store',
+  });
+  window.location.reload();
+}
+
+export default function qrepStatusButtons(props: { mirrorId: string }) {
+  return (
+    <>
+      <input
+        type='button'
+        value='Pause'
+        onClick={() => setFlowState(props.mirrorId, FlowStatus.STATUS_PAUSED)}
+      />
+      <input
+        type='button'
+        value='Resume'
+        onClick={() => setFlowState(props.mirrorId, FlowStatus.STATUS_RUNNING)}
+      />
+    </>
+  );
+}