ui: fix various bugs on db console schedules page

- Updated max result size of sql query to fetch schedules
  to ensure all schedules are rendered in
  db console
- Fixed a bug where changing the "show" and "status" values
  in the url query params resulted in a "something went wrong"
  page. Now, if an invalid value is set in the "show" or "status"
  query parameters, the corresponding dropdown will reset to the
  default value. ("Show: Latest 50" and "Status: All" respectively)

Fixes: CRDB-49163, CRDB-49164
Epic: None
Release note (bug fix): Fixes bugs in the db console page:
- Previously, the schedules page only showed a subset of the total
  schedules for a cluster due to a missing parameter in the server api
  call. Now the schedules table should correctly show all schedules in
  a cluster
- Fixed a bug where manually upadting the "show" or "status" query

Author: kyle-a-wong

pkg/ui/workspaces/cluster-ui/src/api/schedulesApi.ts

@@ -10,6 +10,7 @@ import { RequestError } from "../util";
 
 import {
   executeInternalSql,
+  MAX_RESULT_SIZE,
   SqlExecutionRequest,
   sqlResultsAreEmpty,
 } from "./sqlApi";
@@ -73,6 +74,7 @@ export function getSchedules(req: {
         arguments: args,
       },
     ],
+    max_result_size: MAX_RESULT_SIZE,
     execute: true,
   };
   return executeInternalSql<ScheduleColumns>(request).then(result => {

pkg/ui/workspaces/cluster-ui/src/api/sqlApi.ts

@@ -91,6 +91,7 @@ export function executeSql<RowType>(
 export const INTERNAL_SQL_API_APP = "$ internal-console";
 export const LONG_TIMEOUT = "300s";
 export const LARGE_RESULT_SIZE = 50000; // 50 kib
+export const MAX_RESULT_SIZE = 2_147_483_647; // Max result size is max int32, which is 2Gib
 export const FALLBACK_DB = "system";
 
 /**

pkg/ui/workspaces/cluster-ui/src/schedules/schedulesPage/schedulesPage.tsx

@@ -74,7 +74,11 @@ export const SchedulesPage: React.FC<SchedulesPageProps> = props => {
   // Filter Status.
   const paramStatus = searchParams.get("status") || undefined;
   useEffect(() => {
-    if (paramStatus === undefined) {
+    if (
+      paramStatus === undefined ||
+      statusOptions.find(option => option["value"] === paramStatus) ===
+        undefined
+    ) {
       return;
     }
     setStatus(paramStatus);
@@ -83,7 +87,10 @@ export const SchedulesPage: React.FC<SchedulesPageProps> = props => {
   // Filter Show.
   const paramShow = searchParams.get("show") || undefined;
   useEffect(() => {
-    if (paramShow === undefined) {
+    if (
+      paramShow === undefined ||
+      showOptions.find(option => option["value"] === paramShow) === undefined
+    ) {
       return;
     }
     setShow(paramShow);
@@ -140,13 +147,23 @@ export const SchedulesPage: React.FC<SchedulesPageProps> = props => {
           <PageConfigItem>
             <Dropdown items={statusOptions} onChange={onStatusSelected}>
               Status:{" "}
-              {statusOptions.find(option => option["value"] === status)["name"]}
+              {
+                (
+                  statusOptions.find(option => option["value"] === status) ??
+                  statusOptions[0]
+                ).name
+              }
             </Dropdown>
           </PageConfigItem>
           <PageConfigItem>
             <Dropdown items={showOptions} onChange={onShowSelected}>
               Show:{" "}
-              {showOptions.find(option => option["value"] === show)["name"]}
+              {
+                (
+                  showOptions.find(option => option["value"] === show) ??
+                  showOptions[0]
+                ).name
+              }
             </Dropdown>
           </PageConfigItem>
         </PageConfig>