Merge cockroachdb#93211 cockroachdb#93293 cockroachdb#93605

93211: ui: prevent polling /settings, /nodes_ui and /cluster endpoints on incorrect login r=Santamaura a=Santamaura

This change fixes an issue where if the user
incorrectly submits the wrong username/pwd
combo on the login page, polling kicks off
for the /settings, /nodes_ui and /cluster
endpoints which is not correct as they will
continuously return 401 errors. Adding an
early exit that checks for the login state
prevents this issue from occuring.

Found from working on cockroachdb#92694.

Epic: none

Release note (ui change): prevent polling /settings, /nodes_ui and /cluster endpoints on incorrect login.

93293: ui: fix ts/query returning no data for graphs by adjusting sample size r=Santamaura a=Santamaura

This change fixes a bug where selecting a relatively small timeframe in the past causes no data to render on graphs. This is because selecting a small time window that is earlier than the `timeseries.storage.resolution_10s.ttl` will make a ts/query request with a high resolution which would be no longer stored. The change calls an existing function which will adjust the resolution based on the start time and end time of the selection and the storage settings so that data will be returned but at a lower resolution.

Fixes: https://github.com/cockroachlabs/support/issues/1940

Release note (bug fix): fix ts/query returning no data for graphs by adjusting sample size

![Screen Shot 2022-12-08 at 6 27 37 PM](https://user-images.githubusercontent.com/17861665/206588333-8b502195-fde1-41e1-967d-280998307003.png)


93605: sql/opt/bench: fix invalid JSON in `INJECT STATISTICS` r=rytaft a=renatolabs

Fixes: cockroachdb#93565
Release note: None

Co-authored-by: Santamaura <[email protected]>
Co-authored-by: Renato Costa <[email protected]>

pkg/sql/opt/bench/bench_test.go

@@ -322,7 +322,7 @@ var schemas = []string{
 		      {"num_eq": 10, "num_range": 10, "distinct_range": 10, "upper_bound": "abcdefghijklmnopqrstuvwxyz___________________9600"},
 		      {"num_eq": 10, "num_range": 10, "distinct_range": 10, "upper_bound": "abcdefghijklmnopqrstuvwxyz___________________9700"},
 		      {"num_eq": 10, "num_range": 10, "distinct_range": 10, "upper_bound": "abcdefghijklmnopqrstuvwxyz___________________9800"},
-		      {"num_eq": 10, "num_range": 10, "distinct_range": 10, "upper_bound": "abcdefghijklmnopqrstuvwxyz___________________9900"},
+		      {"num_eq": 10, "num_range": 10, "distinct_range": 10, "upper_bound": "abcdefghijklmnopqrstuvwxyz___________________9900"}
 		    ]
 		  }
 		]'

pkg/ui/workspaces/db-console/src/redux/alerts.spec.ts

@@ -17,7 +17,7 @@ import { cockroach } from "src/js/protos";
 import { API_PREFIX } from "src/util/api";
 import fetchMock from "src/util/fetch-mock";
 
-import { AdminUIState, createAdminUIStore } from "./state";
+import { AdminUIState, AppDispatch, createAdminUIStore } from "./state";
 import {
   AlertLevel,
   alertDataSync,
@@ -49,6 +49,7 @@ import {
 } from "./apiReducers";
 import Long from "long";
 import MembershipStatus = cockroach.kv.kvserver.liveness.livenesspb.MembershipStatus;
+import { loginSuccess } from "./login";
 
 describe("alerts", function () {
   let store: Store<AdminUIState>;
@@ -536,7 +537,8 @@ describe("alerts", function () {
         method: "GET",
         response: () => 500,
       });
-
+      const loginDispatch = dispatch as AppDispatch;
+      loginDispatch(loginSuccess("test"));
       sync = alertDataSync(store);
     });
 

pkg/ui/workspaces/db-console/src/redux/alerts.ts

@@ -653,6 +653,17 @@ export function alertDataSync(store: Store<AdminUIState>) {
     // Always refresh health.
     dispatch(refreshHealth());
 
+    // We should not send out requests to the endpoints below if
+    // the user has not successfully logged in since the requests
+    // will always return with a 401 error.
+    if (
+      !state.login ||
+      !state.login.loggedInUser ||
+      state.login.loggedInUser == ``
+    ) {
+      return;
+    }
+
     // Load persistent settings which have not yet been loaded.
     const uiData = state.uiData;
     if (uiData !== lastUIData) {

pkg/ui/workspaces/db-console/src/redux/login.ts

@@ -183,7 +183,7 @@ interface LoginSuccessAction extends Action {
   loggedInUser: string;
 }
 
-function loginSuccess(loggedInUser: string): LoginSuccessAction {
+export function loginSuccess(loggedInUser: string): LoginSuccessAction {
   return {
     type: LOGIN_SUCCESS,
     loggedInUser,

pkg/ui/workspaces/db-console/src/views/shared/containers/metricDataProvider/index.tsx

@@ -37,7 +37,11 @@ import {
 } from "@cockroachlabs/cluster-ui";
 import { History } from "history";
 import { refreshSettings } from "src/redux/apiReducers";
-import { selectTimeScale } from "src/redux/timeScale";
+import { selectTimeScale, adjustTimeScale } from "src/redux/timeScale";
+import {
+  selectResolution10sStorageTTL,
+  selectResolution30mStorageTTL,
+} from "src/redux/clusterSettings";
 
 /**
  * queryFromProps is a helper method which generates a TimeSeries Query data
@@ -248,26 +252,40 @@ class MetricsDataProvider extends React.Component<
 
 // timeInfoSelector converts the current global time window into a set of Long
 // timestamps, which can be sent with requests to the server.
-const timeInfoSelector = createSelector(selectTimeScale, scale => {
-  if (!_.isObject(scale)) {
-    return null;
-  }
-  const [startMoment, endMoment] = toDateRange(scale);
-  const start = startMoment.valueOf();
-  const end = endMoment.valueOf();
-  const syncedScale = findClosestTimeScale(
-    defaultTimeScaleOptions,
-    util.MilliToSeconds(end - start),
-  );
+const timeInfoSelector = createSelector(
+  selectResolution10sStorageTTL,
+  selectResolution30mStorageTTL,
+  selectTimeScale,
+  (sTTL, mTTL, scale) => {
+    if (!_.isObject(scale)) {
+      return null;
+    }
+    const [startMoment, endMoment] = toDateRange(scale);
+    const start = startMoment.valueOf();
+    const end = endMoment.valueOf();
+    const syncedScale = findClosestTimeScale(
+      defaultTimeScaleOptions,
+      util.MilliToSeconds(end - start),
+    );
+    // Call adjustTimeScale to handle the case where the sample size
+    // (also known as resolution) is too small for a start and end time
+    // that is before the data's ttl.
+    const adjusted = adjustTimeScale(
+      { ...syncedScale, fixedWindowEnd: false },
+      { start: startMoment, end: endMoment },
+      sTTL,
+      mTTL,
+    );
 
-  return {
-    start: Long.fromNumber(util.MilliToNano(start)),
-    end: Long.fromNumber(util.MilliToNano(end)),
-    sampleDuration: Long.fromNumber(
-      util.MilliToNano(syncedScale.sampleSize.asMilliseconds()),
-    ),
-  };
-});
+    return {
+      start: Long.fromNumber(util.MilliToNano(start)),
+      end: Long.fromNumber(util.MilliToNano(end)),
+      sampleDuration: Long.fromNumber(
+        util.MilliToNano(adjusted.timeScale.sampleSize.asMilliseconds()),
+      ),
+    };
+  },
+);
 
 const current = () => {
   let now = moment();