ui: add date range selector in stmts and txns pages

pkg/ui/workspaces/cluster-ui/src/api/fetchData.spec.ts

@@ -0,0 +1,39 @@
+// Copyright 2021 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 { propsToQueryString } from "./fetchData";
+
+describe("fetchData functions", () => {
+ describe("propsToQueryString", () => {
+ it("creates query string from object", () => {
+ const obj = {
+ start: 100,
+ end: 200,
+ strParam: "hello",
+ bool: false,
+ };
+ const expected = "start=100&end=200&strParam=hello&bool=false";
+ const res = propsToQueryString(obj);
+ expect(res).toEqual(expected);
+ });
+
+ it("skips entries with nullish values", () => {
+ const obj = {
+ start: 100,
+ end: 200,
+ strParam: null as any,
+ hello: undefined as any,
+ };
+ const expected = "start=100&end=200";
+ const res = propsToQueryString(obj);
+ expect(res).toEqual(expected);
+ });
+ });
+});

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

@@ -11,6 +11,7 @@
 import { cockroach } from "@cockroachlabs/crdb-protobuf-client";
 import { RequestError } from "../util";
 import { getBasePath } from "./basePath";
+import { stringify } from "querystring";
 
 interface ProtoBuilder<
  P extends ConstructorType,
@@ -29,6 +30,18 @@ export function toArrayBuffer(encodedRequest: Uint8Array): ArrayBuffer {
  );
 }
 
+// propsToQueryString is a helper function that converts a set of object
+// properties to a query string
+// - keys with null or undefined values will be skipped
+// - non-string values will be toString'd
+export function propsToQueryString(props: { [k: string]: any }) {
+ const params = new URLSearchParams();
+ Object.entries(props).forEach(
+ ([k, v]: [string, any]) => v != null && params.set(k, v.toString()),
+ );
+ return params.toString();
+}
+
 /**
  * @param RespBuilder expects protobuf stub class to build decode response;
  * @param path relative URL path for requested resource;

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

@@ -9,7 +9,7 @@
 // licenses/APL.txt.
 
 import { cockroach } from "@cockroachlabs/crdb-protobuf-client";
-import { fetchData } from "src/api";
+import { fetchData, propsToQueryString } from "src/api";
 
 const STATEMENTS_PATH = "/_status/statements";
 
@@ -19,3 +19,19 @@ export const getStatements = (): Promise<cockroach.server.serverpb.StatementsRes
  STATEMENTS_PATH,
  );
 };
+
+export type StatementsRequest = cockroach.server.serverpb.StatementsRequest;
+
+export const getCombinedStatements = (
+ req: StatementsRequest,
+): Promise<cockroach.server.serverpb.StatementsResponse> => {
+ const queryStr = propsToQueryString({
+ start: req.start.toInt(),
+ end: req.end.toInt(),
+ combined: true,
+ });
+ return fetchData(
+ cockroach.server.serverpb.StatementsResponse,
+ `${STATEMENTS_PATH}?${queryStr}`,
+ );
+};

pkg/ui/workspaces/cluster-ui/src/dateRange/dateRange.fixtures.tsx

@@ -0,0 +1,16 @@
+// Copyright 2021 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 moment, { Moment } from "moment";
+
+export const start = moment.utc("2021.08.08");
+export const end = moment.utc("2021.08.12");
+
+export const allowedInterval: [Moment, Moment] = [start, end];

pkg/ui/workspaces/cluster-ui/src/dateRange/dateRange.module.scss

@@ -0,0 +1,57 @@
+@import "../core/index.module";
+
+.popup-container {
+ width: 506px;
+ height: 240px;
+
+ .label {
+ display: block;
+ margin-bottom: 1rem;
+ }
+
+ .popup-content {
+ :global(.ant-calendar-picker) {
+ width: 290px;
+ margin-right: 14px;
+ input {
+ padding-left: 34px;
+ }
+ }
+
+ :global(.ant-time-picker-icon),
+ :global(.ant-calendar-picker-icon) {
+ left: 12px;
+ }
+
+ :global(.ant-time-picker) {
+ width: 150px;
+ }
+ }
+
+ .popup-footer {
+ margin-top: 24px;
+ text-align: right;
+ button {
+ margin-left: 8px;
+ }
+ }
+
+ :global(.ant-popover-arrow) {
+ display: none;
+ }
+}
+
+.date-range-form {
+ width: 300px;
+ height: 40px;
+
+ :global(.ant-input-affix-wrapper) {
+ height: 40px;
+ &:hover {
+ :global(.ant-input:not(.ant-input-disabled)) {
+ border-color: $colors--primary-blue-3;
+ border-right-width: 2px !important;
+ }
+ }
+ }
+}

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

@@ -0,0 +1,32 @@
+// Copyright 2021 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 { storiesOf } from "@storybook/react";
+import { start, end, allowedInterval } from "./dateRange.fixtures";
+import { DateRange } from "./index";
+
+storiesOf("DateRange", module)
+ .add("default", () => (
+ <DateRange
+ allowedInterval={allowedInterval}
+ end={end}
+ onSubmit={() => {}}
+ start={start}
+ />
+ ))
+ .add("with invalid date range", () => (
+ <DateRange
+ allowedInterval={allowedInterval}
+ end={start}
+ onSubmit={() => {}}
+ start={end}
+ />
+ ));

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

@@ -0,0 +1,190 @@
+// Copyright 2021 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, { useState } from "react";
+import { Alert, DatePicker, Form, Input, Popover, TimePicker } from "antd";
+import { Moment } from "moment";
+import classNames from "classnames/bind";
+import { Time as TimeIcon, ErrorCircleFilled } from "@cockroachlabs/icons";
+import { Button } from "src/button";
+import { Text, TextTypes } from "src/text";
+
+import styles from "./dateRange.module.scss";
+
+const cx = classNames.bind(styles);
+
+function rangeToString(start: Moment, end: Moment): string {
+ const formatStr = "MMM D, H:mm";
+ const formatStrSameDay = "H:mm";
+
+ const isSameDay = start.isSame(end, "day");
+ return `${start.utc().format(formatStr)} - ${end
+ .utc()
+ .format(isSameDay ? formatStrSameDay : formatStr)} (UTC)`;
+}
+
+type DateRangeMenuProps = {
+ start: Moment;
+ end: Moment;
+ allowedInterval?: [Moment, Moment];
+ closeMenu: () => void;
+ onSubmit: (start: Moment, end: Moment) => void;
+};
+
+function DateRangeMenu({
+ start,
+ end,
+ allowedInterval,
+ closeMenu,
+ onSubmit,
+}: DateRangeMenuProps): React.ReactElement {
+ const dateFormat = "MMMM D, YYYY";
+ const timeFormat = "H:mm [(UTC)]";
+ const [startMoment, setStartMoment] = useState<Moment>(start);
+ const [endMoment, setEndMoment] = useState<Moment>(end);
+
+ const onChangeStart = (m?: Moment) => {
+ m && setStartMoment(m);
+ };
+
+ const onChangeEnd = (m?: Moment) => {
+ m && setEndMoment(m);
+ };
+
+ const isDisabled = allowedInterval
+ ? (date: Moment): boolean => {
+ return (
+ date.isBefore(allowedInterval[0]) || date.isAfter(allowedInterval[1])
+ );
+ }
+ : null;
+
+ const isValid = startMoment.isBefore(endMoment);
+
+ const onApply = (): void => {
+ onSubmit(startMoment, endMoment);
+ closeMenu();
+ };
+
+ return (
+ <div className={cx("popup-content")}>
+ <Text className={cx("label")} textType={TextTypes.CaptionStrong}>
+ From
+ </Text>
+ <DatePicker
+ disabledDate={isDisabled}
+ allowClear={false}
+ format={dateFormat}
+ onChange={onChangeStart}
+ suffixIcon={<TimeIcon />}
+ value={startMoment}
+ />
+ <TimePicker
+ allowClear={false}
+ format={timeFormat}
+ onChange={onChangeStart}
+ suffixIcon={<span />}
+ value={startMoment}
+ />
+ <Text className={cx("label")} textType={TextTypes.CaptionStrong}>
+ To
+ </Text>
+ <DatePicker
+ allowClear={false}
+ disabledDate={isDisabled}
+ format={dateFormat}
+ onChange={onChangeEnd}
+ suffixIcon={<TimeIcon />}
+ value={endMoment}
+ />
+ <TimePicker
+ allowClear={false}
+ format={timeFormat}
+ onChange={onChangeEnd}
+ suffixIcon={<span />}
+ value={endMoment}
+ />
+ {!isValid && (
+ <Alert
+ icon={<ErrorCircleFilled fill="#FF3B4E" />}
+ message="Date interval not valid"
+ type="error"
+ showIcon
+ />
+ )}
+ <div className={cx("popup-footer")}>
+ <Button onClick={closeMenu} type="secondary" textAlign="center">
+ Cancel
+ </Button>
+ <Button
+ disabled={!isValid}
+ onClick={onApply}
+ type="primary"
+ textAlign="center"
+ >
+ Apply
+ </Button>
+ </div>
+ </div>
+ );
+}
+
+type DateRangeProps = {
+ start: Moment;
+ end: Moment;
+ allowedInterval?: [Moment, Moment];
+ onSubmit: (start: Moment, end: Moment) => void;
+};
+
+export function DateRange({
+ allowedInterval,
+ start,
+ end,
+ onSubmit,
+}: DateRangeProps): React.ReactElement {
+ const [menuVisible, setMenuVisible] = useState<boolean>(false);
+ const displayStr = rangeToString(start, end);
+
+ const onVisibleChange = (visible: boolean): void => {
+ setMenuVisible(visible);
+ };
+
+ const closeMenu = (): void => {
+ setMenuVisible(false);
+ };
+
+ const menu = (
+ <DateRangeMenu
+ allowedInterval={allowedInterval}
+ start={start}
+ end={end}
+ closeMenu={closeMenu}
+ onSubmit={onSubmit}
+ />
+ );
+
+ return (
+ <Form className={cx("date-range-form")}>
+ <Form.Item>
+ <Popover
+ destroyTooltipOnHide
+ content={menu}
+ overlayClassName={cx("popup-container")}
+ placement="bottomLeft"
+ visible={menuVisible}
+ onVisibleChange={onVisibleChange}
+ trigger="click"
+ >
+ <Input value={displayStr} prefix={<TimeIcon />} />
+ </Popover>
+ </Form.Item>
+ </Form>
+ );
+}