: undefined}
>
{this.renderFieldInput(field)}
-
+
);
};
diff --git a/web-console/src/components/form-group-with-info/__snapshots__/form-group-with-info.spec.tsx.snap b/web-console/src/components/form-group-with-info/__snapshots__/form-group-with-info.spec.tsx.snap
new file mode 100644
index 00000000000..e73b8fb1fbd
--- /dev/null
+++ b/web-console/src/components/form-group-with-info/__snapshots__/form-group-with-info.spec.tsx.snap
@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`form group with info matches snapshot 1`] = `
+
+
+
+ Some buttons and stuff
+
+
+`;
diff --git a/web-console/src/components/form-group-with-info/form-group-with-info.scss b/web-console/src/components/form-group-with-info/form-group-with-info.scss
new file mode 100644
index 00000000000..ddde9ec3dd7
--- /dev/null
+++ b/web-console/src/components/form-group-with-info/form-group-with-info.scss
@@ -0,0 +1,29 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.form-group-with-info {
+ .bp3-form-content {
+ position: relative;
+
+ & > .bp3-popover-wrapper {
+ position: absolute;
+ right: 0;
+ top: 7px;
+ }
+ }
+}
diff --git a/web-console/src/components/form-group-with-info/form-group-with-info.spec.tsx b/web-console/src/components/form-group-with-info/form-group-with-info.spec.tsx
new file mode 100644
index 00000000000..6d354241798
--- /dev/null
+++ b/web-console/src/components/form-group-with-info/form-group-with-info.spec.tsx
@@ -0,0 +1,35 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import { FormGroupWithInfo } from './form-group-with-info';
+
+describe('form group with info', () => {
+ it('matches snapshot', () => {
+ const formGroupWithInfo = (
+ Information is gold}>
+ Some buttons and stuff
+
+ );
+
+ const { container } = render(formGroupWithInfo);
+ expect(container.firstChild).toMatchSnapshot();
+ });
+});
diff --git a/web-console/src/components/form-group-with-info/form-group-with-info.tsx b/web-console/src/components/form-group-with-info/form-group-with-info.tsx
new file mode 100644
index 00000000000..791a02a17ff
--- /dev/null
+++ b/web-console/src/components/form-group-with-info/form-group-with-info.tsx
@@ -0,0 +1,53 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { FormGroup, Icon, Popover } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import React from 'react';
+
+import './form-group-with-info.scss';
+
+export interface FormGroupWithInfoProps {
+ label?: React.ReactNode;
+ info?: JSX.Element | string;
+ inlineInfo?: boolean;
+ children?: React.ReactNode;
+}
+
+export const FormGroupWithInfo = React.memo(function FormGroupWithInfo(
+ props: FormGroupWithInfoProps,
+) {
+ const { label, info, inlineInfo, children } = props;
+
+ const popover = (
+
+
+
+ );
+
+ return (
+
+ {children}
+ {info && inlineInfo && popover}
+
+ );
+});
diff --git a/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap b/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap
index f055cc5a2d1..6b899838449 100644
--- a/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap
+++ b/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap
@@ -171,7 +171,7 @@ exports[`header bar matches snapshot 1`] = `
/>
+
diff --git a/web-console/src/dialogs/history-dialog/history-dialog.tsx b/web-console/src/dialogs/history-dialog/history-dialog.tsx
index 017a55fb9a1..9c82a894e8e 100644
--- a/web-console/src/dialogs/history-dialog/history-dialog.tsx
+++ b/web-console/src/dialogs/history-dialog/history-dialog.tsx
@@ -16,7 +16,8 @@
* limitations under the License.
*/
-import { Card, Dialog, Divider } from '@blueprintjs/core';
+import { Card, Classes, Dialog, Divider } from '@blueprintjs/core';
+import classNames from 'classnames';
import React, { ReactNode } from 'react';
import { JsonCollapse } from '../../components';
@@ -25,54 +26,50 @@ import './history-dialog.scss';
interface HistoryDialogProps {
historyRecords: any[];
- children?: ReactNode;
+ buttons?: ReactNode;
}
export const HistoryDialog = React.memo(function HistoryDialog(props: HistoryDialogProps) {
- function renderRecords() {
- const { children, historyRecords } = props;
- let content;
- if (historyRecords.length === 0) {
- content =
- If you enable{' '}
-
- roll-up
-
- , Druid will try to pre-aggregate data before indexing it to conserve
- storage. The primary timestamp will be truncated to the specified query
- granularity, and rows containing the same string field values will be
- aggregated together.
-
-
- If you enable rollup, you must specify which columns are{' '}
-
- dimensions
- {' '}
- (fields you want to group and filter on), and which are{' '}
-
- metrics
- {' '}
- (fields you want to aggregate on).
-