Skip to content

Commit

Permalink
[Discover] Deangularization context error message refactoring (elasti…
Browse files Browse the repository at this point in the history
…c#70090)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
  • Loading branch information
dej611 and elasticmachine committed Jul 1, 2020
1 parent 0ce23d5 commit 1be87e8
Show file tree
Hide file tree
Showing 6 changed files with 171 additions and 38 deletions.
42 changes: 4 additions & 38 deletions src/plugins/discover/public/application/angular/context_app.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,44 +12,10 @@


<!-- Error feedback -->
<div
class="kuiViewContent kuiViewContentItem"
ng-if="contextApp.state.loadingStatus.anchor.status === contextApp.constants.LOADING_STATUS.FAILED"
>
<div class="kuiInfoPanel kuiInfoPanel--error kuiVerticalRhythm">
<div class="kuiInfoPanelHeader">
<span class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--error fa-warning"></span>
<span
class="kuiInfoPanelHeader__title"
i18n-id="discover.context.failedToLoadAnchorDocumentDescription"
i18n-default-message="Failed to load the anchor document"
></span>
</div>

<div class="kuiInfoPanelBody">
<div
class="kuiInfoPanelBody__message"
ng-if="contextApp.state.loadingStatus.anchor.reason === contextApp.constants.FAILURE_REASONS.INVALID_TIEBREAKER"
i18n-id="discover.context.noSearchableTiebreakerFieldDescription"
i18n-default-message="No searchable tiebreaker field could be found in the index pattern {indexPatternId}. Please change the advanced setting {tieBreakerFields} to include a valid field for this index pattern."
i18n-values="{
indexPatternId: contextApp.state.queryParameters.indexPatternId,
html_tieBreakerFields: '<code>context:tieBreakerFields</code>'
}"
>
</div>
<div
class="kuiInfoPanelBody__message"
ng-if="contextApp.state.loadingStatus.anchor.reason === contextApp.constants.FAILURE_REASONS.UNKNOWN"
>
<span
i18n-id="discover.context.reloadPageDescription.reloadOrVisitTextMessage"
i18n-default-message="Please reload or go back to the document list to select a valid anchor document."
></span>
</div>
</div>
</div>
</div>
<context-error-message
status="contextApp.state.loadingStatus.anchor.status"
reason="contextApp.state.loadingStatus.anchor.reason">
</context-error-message>

<main
class="kuiViewContent kuiViewContentItem"
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
/*
* 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 { mountWithIntl } from 'test_utils/enzyme_helpers';
import { ReactWrapper } from 'enzyme';
import { ContextErrorMessage } from './context_error_message';
// @ts-ignore
import { FAILURE_REASONS, LOADING_STATUS } from '../../angular/context/query';
// @ts-ignore
import { findTestSubject } from '@elastic/eui/lib/test';

describe('loading spinner', function () {
let component: ReactWrapper;

it('ContextErrorMessage does not render on loading', () => {
component = mountWithIntl(<ContextErrorMessage status={LOADING_STATUS.LOADING} />);
expect(findTestSubject(component, 'contextErrorMessageTitle').length).toBe(0);
});

it('ContextErrorMessage does not render on success loading', () => {
component = mountWithIntl(<ContextErrorMessage status={LOADING_STATUS.LOADED} />);
expect(findTestSubject(component, 'contextErrorMessageTitle').length).toBe(0);
});

it('ContextErrorMessage renders just the title if the reason is not specifically handled', () => {
component = mountWithIntl(<ContextErrorMessage status={LOADING_STATUS.FAILED} />);
expect(findTestSubject(component, 'contextErrorMessageTitle').length).toBe(1);
expect(findTestSubject(component, 'contextErrorMessageBody').text()).toBe('');
});

it('ContextErrorMessage renders the reason for unknown errors', () => {
component = mountWithIntl(
<ContextErrorMessage status={LOADING_STATUS.FAILED} reason={FAILURE_REASONS.UNKNOWN} />
);
expect(findTestSubject(component, 'contextErrorMessageTitle').length).toBe(1);
expect(findTestSubject(component, 'contextErrorMessageBody').length).toBe(1);
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
/*
* 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 { EuiCallOut, EuiText } from '@elastic/eui';
import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
// @ts-ignore
import { FAILURE_REASONS, LOADING_STATUS } from '../../angular/context/query';

export interface ContextErrorMessageProps {
/**
* the status of the loading action
*/
status: string;
/**
* the reason of the error
*/
reason?: string;
}

export function ContextErrorMessage({ status, reason }: ContextErrorMessageProps) {
if (status !== LOADING_STATUS.FAILED) {
return null;
}
return (
<I18nProvider>
<EuiCallOut
title={
<FormattedMessage
id="discover.context.failedToLoadAnchorDocumentDescription"
defaultMessage="Failed to load the anchor document"
/>
}
color="danger"
iconType="alert"
data-test-subj="contextErrorMessageTitle"
>
<EuiText data-test-subj="contextErrorMessageBody">
{reason === FAILURE_REASONS.UNKNOWN && (
<FormattedMessage
id="discover.context.reloadPageDescription.reloadOrVisitTextMessage"
defaultMessage="Please reload or go back to the document list to select a valid anchor document."
/>
)}
</EuiText>
</EuiCallOut>
</I18nProvider>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
/*
* 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 { ContextErrorMessage } from './context_error_message';

export function createContextErrorMessageDirective(reactDirective: any) {
return reactDirective(ContextErrorMessage, [
['status', { watchDepth: 'reference' }],
['reason', { watchDepth: 'reference' }],
]);
}
Original file line number Diff line number Diff line change
@@ -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 { ContextErrorMessage } from './context_error_message';
export { createContextErrorMessageDirective } from './context_error_message_directive';
2 changes: 2 additions & 0 deletions src/plugins/discover/public/get_inner_angular.ts
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ import { createDiscoverSidebarDirective } from './application/components/sidebar
import { createHitsCounterDirective } from '././application/components/hits_counter';
import { createLoadingSpinnerDirective } from '././application/components/loading_spinner/loading_spinner';
import { createTimechartHeaderDirective } from './application/components/timechart_header';
import { createContextErrorMessageDirective } from './application/components/context_error_message';
import { DiscoverStartPlugins } from './plugin';
import { getScopedHistory } from './kibana_services';
import { createSkipBottomButtonDirective } from './application/components/skip_bottom_button';
Expand Down Expand Up @@ -160,6 +161,7 @@ export function initializeInnerAngularModule(
.directive('hitsCounter', createHitsCounterDirective)
.directive('loadingSpinner', createLoadingSpinnerDirective)
.directive('timechartHeader', createTimechartHeaderDirective)
.directive('contextErrorMessage', createContextErrorMessageDirective)
.service('debounce', ['$timeout', DebounceProviderTimeout]);
}

Expand Down

0 comments on commit 1be87e8

Please sign in to comment.