+
+ ;
+
+ beforeAll(() => {
+ props = {
+ onResetQuery: jest.fn(),
+ showResetButton: true,
+ hits: 2,
+ };
+ });
+
+ it('HitsCounter renders a button by providing the showResetButton property', () => {
+ component = mountWithIntl();
+ expect(findTestSubject(component, 'resetSavedSearch').length).toBe(1);
+ });
+
+ it('HitsCounter not renders a button when the showResetButton property is false', () => {
+ component = mountWithIntl(
+
+ );
+ expect(findTestSubject(component, 'resetSavedSearch').length).toBe(0);
+ });
+
+ it('expect to render the number of hits', function() {
+ component = mountWithIntl();
+ const hits = findTestSubject(component, 'discoverQueryHits');
+ expect(hits.text()).toBe('2');
+ });
+
+ it('expect to render 1,899 hits if 1899 hits given', function() {
+ component = mountWithIntl(
+
+ );
+ const hits = findTestSubject(component, 'discoverQueryHits');
+ expect(hits.text()).toBe('1,899');
+ });
+
+ it('should reset query', function() {
+ component = mountWithIntl();
+ findTestSubject(component, 'resetSavedSearch').simulate('click');
+ expect(props.onResetQuery).toHaveBeenCalled();
+ });
+});
diff --git a/src/plugins/discover/public/application/components/hits_counter/hits_counter.tsx b/src/plugins/discover/public/application/components/hits_counter/hits_counter.tsx
new file mode 100644
index 0000000000000..1d2cd12877b1c
--- /dev/null
+++ b/src/plugins/discover/public/application/components/hits_counter/hits_counter.tsx
@@ -0,0 +1,83 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. 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 React from 'react';
+import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
+import { formatNumWithCommas } from '../../helpers';
+
+export interface HitsCounterProps {
+ /**
+ * the number of query hits
+ */
+ hits: number;
+ /**
+ * displays the reset button
+ */
+ showResetButton: boolean;
+ /**
+ * resets the query
+ */
+ onResetQuery: () => void;
+}
+
+export function HitsCounter({ hits, showResetButton, onResetQuery }: HitsCounterProps) {
+ return (
+
+
+
+
+ {formatNumWithCommas(hits)}{' '}
+
+
+
+ {showResetButton && (
+
+
+
+
+
+ )}
+
+
+ );
+}
diff --git a/src/plugins/discover/public/application/components/hits_counter/hits_counter_directive.ts b/src/plugins/discover/public/application/components/hits_counter/hits_counter_directive.ts
new file mode 100644
index 0000000000000..8d45e28370cad
--- /dev/null
+++ b/src/plugins/discover/public/application/components/hits_counter/hits_counter_directive.ts
@@ -0,0 +1,27 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. 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 { HitsCounter } from './hits_counter';
+
+export function createHitsCounterDirective(reactDirective: any) {
+ return reactDirective(HitsCounter, [
+ ['hits', { watchDepth: 'reference' }],
+ ['showResetButton', { watchDepth: 'reference' }],
+ ['onResetQuery', { watchDepth: 'reference' }],
+ ]);
+}
diff --git a/src/plugins/discover/public/application/components/hits_counter/index.ts b/src/plugins/discover/public/application/components/hits_counter/index.ts
new file mode 100644
index 0000000000000..58e7a9eda7f51
--- /dev/null
+++ b/src/plugins/discover/public/application/components/hits_counter/index.ts
@@ -0,0 +1,21 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. 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.
+ */
+
+export { HitsCounter } from './hits_counter';
+export { createHitsCounterDirective } from './hits_counter_directive';
diff --git a/src/plugins/discover/public/application/helpers/format_number_with_commas.ts b/src/plugins/discover/public/application/helpers/format_number_with_commas.ts
new file mode 100644
index 0000000000000..01a010d823d5f
--- /dev/null
+++ b/src/plugins/discover/public/application/helpers/format_number_with_commas.ts
@@ -0,0 +1,27 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. 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.
+ */
+
+const COMMA_SEPARATOR_RE = /(\d)(?=(\d{3})+(?!\d))/g;
+
+/**
+ * Converts a number to a string and adds commas
+ * as thousands separators
+ */
+export const formatNumWithCommas = (input: number) =>
+ String(input).replace(COMMA_SEPARATOR_RE, '$1,');
diff --git a/src/plugins/discover/public/application/helpers/index.ts b/src/plugins/discover/public/application/helpers/index.ts
index 7196c96989e97..3555d24924e80 100644
--- a/src/plugins/discover/public/application/helpers/index.ts
+++ b/src/plugins/discover/public/application/helpers/index.ts
@@ -18,3 +18,4 @@
*/
export { shortenDottedString } from './shorten_dotted_string';
+export { formatNumWithCommas } from './format_number_with_commas';
diff --git a/src/plugins/discover/public/get_inner_angular.ts b/src/plugins/discover/public/get_inner_angular.ts
index e7813c43383f9..8c3f4f030688c 100644
--- a/src/plugins/discover/public/get_inner_angular.ts
+++ b/src/plugins/discover/public/get_inner_angular.ts
@@ -57,6 +57,7 @@ import {
createTopNavHelper,
} from '../../kibana_legacy/public';
import { createDiscoverSidebarDirective } from './application/components/sidebar';
+import { createHitsCounterDirective } from '././application/components/hits_counter';
import { DiscoverStartPlugins } from './plugin';
/**
@@ -151,6 +152,7 @@ export function initializeInnerAngularModule(
.directive('fixedScroll', FixedScrollProvider)
.directive('renderComplete', createRenderCompleteDirective)
.directive('discoverSidebar', createDiscoverSidebarDirective)
+ .directive('hitsCounter', createHitsCounterDirective)
.service('debounce', ['$timeout', DebounceProviderTimeout]);
}