IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Explore: Wrap RawPrometheusContainer with PanelChrome (#78084)

Browse Source 
* Use LoadingState type for loading prop

* Fix test
This commit is contained in:
Haris Rozajac 2023-11-21 09:17:41 -07:00 committed by GitHub
parent d1cffdc58a
commit 5b9097e7ff
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/app/features/explore/RawPrometheus/RawPrometheusContainer.test.tsx
View File

@ -1,7 +1,8 @@
import { fireEvent, render, screen, within } from '@testing-library/react';
import React from 'react';
import { FieldType, getDefaultTimeRange, InternalTimeZones, toDataFrame } from '@grafana/data';
import { FieldType, getDefaultTimeRange, InternalTimeZones, toDataFrame, LoadingState } from '@grafana/data';
import { getTemplateSrv } from 'app/features/templating/template_srv';
import { TABLE_RESULTS_STYLE } from 'app/types';
import { RawPrometheusContainer } from './RawPrometheusContainer';
@ -53,7 +54,7 @@ const dataFrame = toDataFrame({
const defaultProps = {
exploreId: 'left',
loading: false,
loading: LoadingState.NotStarted,
width: 800,
onCellFilterAdded: jest.fn(),
tableResult: [dataFrame],
@ -65,6 +66,10 @@ const defaultProps = {
};
describe('RawPrometheusContainer', () => {
beforeAll(() => {
getTemplateSrv();
});
it('should render component for prometheus', () => {
render(<RawPrometheusContainer {...defaultProps} showRawPrometheus={true} />);

14
public/app/features/explore/RawPrometheus/RawPrometheusContainer.tsx
View File

@ -4,7 +4,7 @@ import { connect, ConnectedProps } from 'react-redux';
import { applyFieldOverrides, DataFrame, SelectableValue, SplitOpen, TimeZone } from '@grafana/data';
import { getTemplateSrv, reportInteraction } from '@grafana/runtime';
import { Collapse, RadioButtonGroup, Table, AdHocFilterItem } from '@grafana/ui';
import { RadioButtonGroup, Table, AdHocFilterItem, PanelChrome } from '@grafana/ui';
import { config } from 'app/core/config';
import { PANEL_BORDER } from 'app/core/constants';
import { StoreState, TABLE_RESULTS_STYLE } from 'app/types';
@ -12,7 +12,6 @@ import { ExploreItemState, TABLE_RESULTS_STYLES, TableResultsStyle } from 'app/t
import { MetaInfoText } from '../MetaInfoText';
import RawListContainer from '../PrometheusListView/RawListContainer';
import { selectIsWaitingForData } from '../state/query';
import { exploreDataLinkPostProcessorFactory } from '../utils/links';
interface RawPrometheusContainerProps {
@ -32,11 +31,10 @@ interface PrometheusContainerState {
function mapStateToProps(state: StoreState, { exploreId }: RawPrometheusContainerProps) {
const explore = state.explore;
const item: ExploreItemState = explore.panes[exploreId]!;
const { tableResult, rawPrometheusResult, range } = item;
const loadingInState = selectIsWaitingForData(exploreId)(state);
const { tableResult, rawPrometheusResult, range, queryResponse } = item;
const rawPrometheusFrame: DataFrame[] = rawPrometheusResult ? [rawPrometheusResult] : [];
const result = (tableResult?.length ?? 0) > 0 && rawPrometheusResult ? tableResult : rawPrometheusFrame;
const loading = result && result.length > 0 ? false : loadingInState;
const loading = queryResponse.state;
return { loading, tableResult: result, range };
}
@ -86,7 +84,6 @@ export class RawPrometheusContainer extends PureComponent<Props, PrometheusConta
return (
<div className={spacing}>
{this.state.resultsStyle === TABLE_RESULTS_STYLE.raw ? 'Raw' : 'Table'}
<RadioButtonGroup
onClick={() => {
const props = {
@ -133,13 +130,14 @@ export class RawPrometheusContainer extends PureComponent<Props, PrometheusConta
(frame: DataFrame | undefined): frame is DataFrame => !!frame && frame.length !== 0
);
const title = this.state.resultsStyle === TABLE_RESULTS_STYLE.raw ? 'Raw' : 'Table';
const label = this.state?.resultsStyle !== undefined ? this.renderLabel() : 'Table';
// Render table as default if resultsStyle is not set.
const renderTable = !this.state?.resultsStyle || this.state?.resultsStyle === TABLE_RESULTS_STYLE.table;
return (
<Collapse label={label} loading={loading} isOpen>
<PanelChrome title={title} actions={label} loadingState={loading}>
{frames?.length && (
<>
{renderTable && (
@ -155,7 +153,7 @@ export class RawPrometheusContainer extends PureComponent<Props, PrometheusConta
</>
)}
{!frames?.length && <MetaInfoText metaItems={[{ value: '0 series returned' }]} />}
</Collapse>
</PanelChrome>
);
}
}