ui: introduce foundations to support configurable timezone display

This commit adds the foundational dependencies and components needed
to display timestamps in DB console in a user's preferred timezone.

Introduced:
- A dependency on `moment-timezone` in DB console and Cluster UI.
- A cluster setting: `ui.display_timezone`.
- A timezone context with a default value of "UTC". This
  enables backwards-compatability for cluster-ui components.
  No changes in cloud are needed, and cluster-ui components will continue
  to display timestamps in UTC.
- A context provider at the top of DB console's component tree.

Epic: https://cockroachlabs.atlassian.net/browse/CRDB-24406
Release note: None

pkg/ui/BUILD.bazel

@@ -12,6 +12,7 @@ go_library(
         "//pkg/base",
         "//pkg/build",
         "//pkg/server/serverpb",
+        "//pkg/settings",
         "//pkg/util/httputil",
         "//pkg/util/log",
     ],

pkg/ui/ui.go

@@ -28,10 +28,27 @@ import (
 	"github.com/cockroachdb/cockroach/pkg/base"
 	"github.com/cockroachdb/cockroach/pkg/build"
 	"github.com/cockroachdb/cockroach/pkg/server/serverpb"
+	"github.com/cockroachdb/cockroach/pkg/settings"
 	"github.com/cockroachdb/cockroach/pkg/util/httputil"
 	"github.com/cockroachdb/cockroach/pkg/util/log"
 )
 
+const (
+	utc int64 = iota
+	americaNewYork
+)
+
+var _ = settings.RegisterEnumSetting(
+	settings.SystemOnly,
+	"ui.display_timezone",
+	"the timezone used to format timestamps in the ui",
+	"UTC",
+	map[int64]string{
+		utc:            "Etc/UTC",
+		americaNewYork: "America/New_York",
+	},
+)
+
 // Assets is used for embedded JS assets required for UI.
 // In case the binary is built without UI, it provides single index.html file with
 // the same content as indexHTML as a fallback.

pkg/ui/workspaces/cluster-ui/BUILD.bazel

@@ -98,7 +98,10 @@ DEPENDENCIES = [
     "@npm_cluster_ui//less",
     "@npm_cluster_ui//less-loader",
     "@npm_cluster_ui//long",
+    "@npm_cluster_ui//moment",
+    "@npm_cluster_ui//moment-timezone",
     "@npm_cluster_ui//moment-locales-webpack-plugin",
+    "@npm_cluster_ui//moment-timezone-data-webpack-plugin",
     "@npm_cluster_ui//npm-run-all",
     "@npm_cluster_ui//prettier",
     "@npm_cluster_ui//protobufjs",
@@ -162,6 +165,7 @@ ts_project(
         "@npm_cluster_ui//classnames",
         "@npm_cluster_ui//connected-react-router",
         "@npm_cluster_ui//moment",
+        "@npm_cluster_ui//moment-timezone",
         "@npm_cluster_ui//protobufjs",
         "@npm_cluster_ui//redux",
         "@npm_cluster_ui//redux-saga",
@@ -278,6 +282,7 @@ tsc_test(
         "@npm_cluster_ui//classnames",
         "@npm_cluster_ui//connected-react-router",
         "@npm_cluster_ui//moment",
+        "@npm_cluster_ui//moment-timezone",
         "@npm_cluster_ui//protobufjs",
         "@npm_cluster_ui//redux",
         "@npm_cluster_ui//redux-saga",

pkg/ui/workspaces/cluster-ui/package.json

@@ -119,7 +119,10 @@
     "less": "^3.12.2",
     "less-loader": "^6.2.0",
     "long": "^4.0.0",
+    "moment": "^2.29.4",
     "moment-locales-webpack-plugin": "^1.2.0",
+    "moment-timezone": "^0.5.42",
+    "moment-timezone-data-webpack-plugin": "^1.5.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.6.2",
     "protobufjs": "6.8.6",

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

@@ -8,7 +8,7 @@
 // by the Apache License, Version 2.0, included in the file
 // licenses/APL.txt.
 
-import moment from "moment";
+import moment from "moment-timezone";
 import {
   executeInternalSql,
   LONG_TIMEOUT,

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

@@ -18,7 +18,7 @@ import {
   formatApiResult,
 } from "./sqlApi";
 import { ContentionDetails } from "src/insights";
-import moment from "moment";
+import moment from "moment-timezone";
 
 export type ContentionFilters = {
   waitingTxnID?: string;

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

@@ -23,7 +23,7 @@ import {
 } from "./sqlApi";
 import { IndexUsageStatistic, recommendDropUnusedIndex } from "../insights";
 import { Format, Identifier, QualifiedIdentifier } from "./safesql";
-import moment from "moment";
+import moment from "moment-timezone";
 import { fromHexString, withTimeout } from "./util";
 import { cockroach } from "@cockroachlabs/crdb-protobuf-client";
 

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

@@ -16,7 +16,7 @@ import {
   sqlResultsAreEmpty,
 } from "./sqlApi";
 import { withTimeout } from "./util";
-import moment from "moment";
+import moment from "moment-timezone";
 
 export type DatabasesColumns = {
   database_name: string;

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

@@ -18,7 +18,7 @@ import {
   formatApiResult,
 } from "./sqlApi";
 import { withTimeout } from "./util";
-import moment from "moment";
+import moment from "moment-timezone";
 
 // defaultEventsNumLimit is the default number of events to be returned.
 export const defaultEventsNumLimit = 1000;

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

@@ -19,7 +19,7 @@ import {
   sqlResultsAreEmpty,
   StatementRawFormat,
 } from "src/api";
-import moment from "moment";
+import moment from "moment-timezone";
 import { TimeScale, toRoundedDateRange } from "../timeScaleDropdown";
 import { AggregateStatistics } from "../statementsTable";
 import { INTERNAL_APP_NAME_PREFIX } from "../recentExecutions/recentStatementUtils";

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

@@ -9,7 +9,7 @@
 // licenses/APL.txt.
 
 import Long from "long";
-import moment from "moment";
+import moment from "moment-timezone";
 import {
   executeInternalSql,
   SqlExecutionRequest,

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

@@ -8,7 +8,7 @@
 // by the Apache License, Version 2.0, included in the file
 // licenses/APL.txt.
 
-import moment from "moment";
+import moment from "moment-timezone";
 import {
   executeInternalSql,
   SqlExecutionRequest,

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

@@ -18,7 +18,7 @@ import {
   stringToTimestamp,
 } from "src/util";
 import Long from "long";
-import moment from "moment";
+import moment from "moment-timezone";
 
 import { AggregateStatistics } from "../statementsTable";
 const STATEMENTS_PATH = "/_status/combinedstmts";

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

@@ -25,7 +25,7 @@ import {
   StatementStatus,
   StmtInsightEvent,
 } from "src/insights";
-import moment from "moment";
+import moment from "moment-timezone";
 import { INTERNAL_APP_NAME_PREFIX } from "src/recentExecutions/recentStatementUtils";
 import { FixFingerprintHexValue } from "../util";
 import { getContentionDetailsApi } from "./contentionApi";

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

@@ -21,7 +21,7 @@ import {
   SqlTxnResult,
   txnResultIsEmpty,
 } from "./sqlApi";
-import moment from "moment";
+import moment from "moment-timezone";
 import { fromHexString, withTimeout } from "./util";
 import { Format, Identifier, Join, SQL } from "./safesql";
 import { cockroach } from "@cockroachlabs/crdb-protobuf-client";

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

@@ -31,7 +31,7 @@ import {
   TxnInsightDetails,
   TxnInsightEvent,
 } from "src/insights";
-import moment from "moment";
+import moment from "moment-timezone";
 import { FixFingerprintHexValue } from "../util";
 import {
   formatStmtInsights,

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

@@ -8,7 +8,7 @@
 // by the Apache License, Version 2.0, included in the file
 // licenses/APL.txt.
 
-import moment from "moment";
+import moment from "moment-timezone";
 
 export const PROMISE_TIMEOUT = moment.duration(30, "s"); // seconds
 

pkg/ui/workspaces/cluster-ui/src/contexts/index.ts

@@ -9,3 +9,4 @@
 // licenses/APL.txt.
 
 export * from "./cockroachCloudContext";
+export * from "./timezoneContext";

pkg/ui/workspaces/cluster-ui/src/contexts/timezoneContext.tsx

@@ -0,0 +1,33 @@
+// Copyright 2023 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+
+import React from "react";
+import { createContext, useContext } from "react";
+
+export const CoordinatedUniversalTime = "Etc/UTC";
+export const TimezoneContext = createContext<string>(CoordinatedUniversalTime);
+
+interface WithTimezoneProps {
+  timezone: string;
+}
+
+// WithTimezone wraps a class component to provide the
+// context's timezone value as a component prop.
+export function WithTimezone<T>(
+  Component: React.ComponentType<T & WithTimezoneProps>,
+) {
+  return (props: T) => {
+    // This lambda is a React function component.
+    // It is safe to call a hook here.
+    // eslint-disable-next-line
+    const timezone = useContext(TimezoneContext);
+    return <Component timezone={timezone} {...props} />;
+  };
+}

pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.stories.tsx

@@ -26,7 +26,7 @@ import {
 } from "./databaseDetailsPage";
 
 import * as H from "history";
-import moment from "moment";
+import moment from "moment-timezone";
 import { defaultFilters } from "src/queryFilter";
 const history = H.createHashHistory();
 

pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.tsx

@@ -37,7 +37,7 @@ import { mvccGarbage, syncHistory, unique } from "../util";
 import styles from "./databaseDetailsPage.module.scss";
 import sortableTableStyles from "src/sortedtable/sortedtable.module.scss";
 import { baseHeadingClasses } from "src/transactionsPage/transactionsPageClasses";
-import { Moment } from "moment";
+import { Moment } from "moment-timezone";
 import { Caution } from "@cockroachlabs/icons";
 import { Anchor } from "../anchor";
 import LoadingError from "../sqlActivity/errorComponent";

pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.stories.tsx

@@ -19,7 +19,7 @@ import {
   randomTablePrivilege,
 } from "src/storybook/fixtures";
 import { DatabaseTablePage, DatabaseTablePageProps } from "./databaseTablePage";
-import moment from "moment";
+import moment from "moment-timezone";
 import * as H from "history";
 const history = H.createHashHistory();
 

pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx

@@ -49,7 +49,7 @@ import {
 import styles from "./databaseTablePage.module.scss";
 import { commonStyles } from "src/common";
 import { baseHeadingClasses } from "src/transactionsPage/transactionsPageClasses";
-import moment, { Moment } from "moment";
+import moment, { Moment } from "moment-timezone";
 import { Search as IndexIcon } from "@cockroachlabs/icons";
 import booleanSettingStyles from "../settings/booleanSetting.module.scss";
 import { CircleFilled } from "../icon";

pkg/ui/workspaces/cluster-ui/src/dateRangeMenu/dateRangeMenu.tsx

@@ -14,7 +14,7 @@ import "antd/lib/time-picker/style";
 import "antd/lib/icon/style";
 import "antd/lib/date-picker/style";
 import "antd/lib/alert/style";
-import moment, { Moment } from "moment";
+import moment, { Moment } from "moment-timezone";
 import classNames from "classnames/bind";
 import { Time as TimeIcon, ErrorCircleFilled } from "@cockroachlabs/icons";
 import { Button } from "src/button";

pkg/ui/workspaces/cluster-ui/src/delayed/delayed.tsx

@@ -8,7 +8,7 @@
 // by the Apache License, Version 2.0, included in the file
 // licenses/APL.txt.
 
-import moment from "moment";
+import moment from "moment-timezone";
 import React, { useState, useEffect } from "react";
 
 type Props = {

pkg/ui/workspaces/cluster-ui/src/graphs/utils/domain.ts

@@ -9,7 +9,7 @@
 // licenses/APL.txt.
 
 import _ from "lodash";
-import moment from "moment";
+import moment from "moment-timezone";
 
 import {
   BytesFitScale,

pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsPage.stories.tsx

@@ -14,7 +14,7 @@ import { storiesOf } from "@storybook/react";
 import { withBackground, withRouterProvider } from "src/storybook/decorators";
 import { randomName } from "src/storybook/fixtures";
 import { IndexDetailsPage, IndexDetailsPageProps } from "./indexDetailsPage";
-import moment from "moment";
+import moment from "moment-timezone";
 
 const withData: IndexDetailsPageProps = {
   databaseName: randomName(),

pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsPage.tsx

@@ -28,7 +28,7 @@ import "antd/lib/col/style";
 import "antd/lib/row/style";
 import "antd/lib/tooltip/style";
 import { SummaryCard } from "../summaryCard";
-import moment, { Moment } from "moment";
+import moment, { Moment } from "moment-timezone";
 import { Heading } from "@cockroachlabs/ui-components";
 import { Anchor } from "../anchor";
 import {

pkg/ui/workspaces/cluster-ui/src/insights/schemaInsights/indexUsageStatsRec.spec.ts

@@ -14,7 +14,7 @@ import {
   recommendDropUnusedIndex,
 } from "./indexUsageStatsRec";
 import { ClusterIndexUsageStatistic } from "../../api";
-import moment from "moment";
+import moment from "moment-timezone";
 
 describe("recommendDropUnusedIndex", () => {
   const mockCurrentTime = moment();

pkg/ui/workspaces/cluster-ui/src/insights/schemaInsights/indexUsageStatsRec.ts

@@ -8,7 +8,7 @@
 // by the Apache License, Version 2.0, included in the file
 // licenses/APL.txt.
 
-import moment from "moment";
+import moment from "moment-timezone";
 
 export const indexNeverUsedReason =
   "This index has not been used and can be removed for better write performance.";

pkg/ui/workspaces/cluster-ui/src/insights/types.ts

@@ -8,7 +8,7 @@
 // by the Apache License, Version 2.0, included in the file
 // licenses/APL.txt.
 
-import { Moment } from "moment";
+import { Moment } from "moment-timezone";
 import { Filters } from "../queryFilter";
 
 // This enum corresponds to the string enum for `problems` in `cluster_execution_insights`

pkg/ui/workspaces/cluster-ui/src/insights/utils.spec.ts

@@ -8,7 +8,7 @@
 // by the Apache License, Version 2.0, included in the file
 // licenses/APL.txt.
 
-import moment from "moment";
+import moment from "moment-timezone";
 import {
   filterStatementInsights,
   filterTransactionInsights,

pkg/ui/workspaces/cluster-ui/src/insights/workloadInsights/statementInsights/statementInsightsView.tsx

@@ -51,7 +51,7 @@ import {
   timeScaleRangeToObj,
 } from "../../../timeScaleDropdown";
 import { StmtInsightsReq } from "src/api/stmtInsightsApi";
-import moment from "moment";
+import moment from "moment-timezone";
 
 import styles from "src/statementsPage/statementsPage.module.scss";
 import sortableTableStyles from "src/sortedtable/sortedtable.module.scss";

pkg/ui/workspaces/cluster-ui/src/jobs/jobsPage/jobsPage.fixture.tsx

@@ -12,7 +12,7 @@ import * as protos from "@cockroachlabs/crdb-protobuf-client";
 import { createMemoryHistory } from "history";
 import Long from "long";
 import { JobsPageProps } from "./jobsPage";
-import moment from "moment";
+import moment from "moment-timezone";
 
 import JobsResponse = cockroach.server.serverpb.JobsResponse;
 import Job = cockroach.server.serverpb.IJobResponse;

pkg/ui/workspaces/cluster-ui/src/jobs/jobsPage/jobsPage.spec.tsx

@@ -8,7 +8,7 @@
 // by the Apache License, Version 2.0, included in the file
 // licenses/APL.txt.
 
-import moment from "moment";
+import moment from "moment-timezone";
 import { cockroach } from "@cockroachlabs/crdb-protobuf-client";
 import { JobsPage, JobsPageProps } from "./jobsPage";
 import { formatDuration } from "../util/duration";

pkg/ui/workspaces/cluster-ui/src/jobs/jobsPage/jobsPage.tsx

@@ -9,7 +9,7 @@
 // licenses/APL.txt.
 import { cockroach, google } from "@cockroachlabs/crdb-protobuf-client";
 import { InlineAlert } from "@cockroachlabs/ui-components";
-import moment from "moment";
+import moment from "moment-timezone";
 import React from "react";
 import { Helmet } from "react-helmet";
 import { RouteComponentProps } from "react-router-dom";

pkg/ui/workspaces/cluster-ui/src/jobs/util/duration.tsx

@@ -8,7 +8,7 @@
 // by the Apache License, Version 2.0, included in the file
 // licenses/APL.txt.
 import { cockroach } from "@cockroachlabs/crdb-protobuf-client";
-import moment from "moment";
+import moment from "moment-timezone";
 import React from "react";
 import { TimestampToMoment } from "src/util";