diff --git a/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx index f8c8d5bf5ef..9679f43e35f 100644 --- a/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx +++ b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx @@ -13,7 +13,7 @@ export interface PopoverContentProps { export type PopoverContent = string | React.ReactElement | ((props: PopoverContentProps) => JSX.Element); -export const Tooltip: FC = ({ children, theme, ...controllerProps }: TooltipProps) => { +export const Tooltip: FC = React.memo(({ children, theme, ...controllerProps }: TooltipProps) => { const tooltipTriggerRef = createRef(); const popperBackgroundClassName = 'popper__background' + (theme ? ' popper__background--' + theme : ''); @@ -52,4 +52,4 @@ export const Tooltip: FC = ({ children, theme, ...controllerProps }} ); -}; +}); diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx index 7f620aac03e..2f515bdb03b 100644 --- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx +++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx @@ -1,9 +1,9 @@ -import React, { Component } from 'react'; +import React, { PureComponent } from 'react'; import classNames from 'classnames'; import { isEqual } from 'lodash'; import { DataLink, LoadingState, PanelData, PanelMenuItem, QueryResultMetaNotice, ScopedVars } from '@grafana/data'; -import { AngularComponent, getTemplateSrv } from '@grafana/runtime'; -import { ClickOutsideWrapper, Icon, IconName, Tooltip } from '@grafana/ui'; +import { AngularComponent, config, getTemplateSrv } from '@grafana/runtime'; +import { ClickOutsideWrapper, Icon, IconName, Tooltip, stylesFactory } from '@grafana/ui'; import { selectors } from '@grafana/e2e-selectors'; import PanelHeaderCorner from './PanelHeaderCorner'; @@ -14,6 +14,7 @@ import { PanelModel } from 'app/features/dashboard/state/PanelModel'; import { getPanelLinksSupplier } from 'app/features/panel/panellinks/linkSuppliers'; import { getPanelMenu } from 'app/features/dashboard/utils/getPanelMenu'; import { updateLocation } from 'app/core/actions'; +import { css } from 'emotion'; export interface Props { panel: PanelModel; @@ -41,7 +42,7 @@ interface State { menuItems: PanelMenuItem[]; } -export class PanelHeader extends Component { +export class PanelHeader extends PureComponent { clickCoordinates: ClickCoordinates = { x: 0, y: 0 }; state: State = { @@ -90,14 +91,28 @@ export class PanelHeader extends Component { this.props.panel.getQueryRunner().cancelQuery(); }; - private renderLoadingState(): JSX.Element { - return ( -
- - - -
- ); + renderLoadingState(state: LoadingState): JSX.Element | null { + if (state === LoadingState.Loading) { + return ( +
+ + + +
+ ); + } + + if (state === LoadingState.Streaming) { + const styles = getStyles(); + + return ( +
+
+
+ ); + } + + return null; } openInspect = (e: React.SyntheticEvent, tab: string) => { @@ -156,7 +171,7 @@ export class PanelHeader extends Component { return ( <> - {data.state === LoadingState.Loading && this.renderLoadingState()} + {this.renderLoadingState(data.state)}
{ ); } } + +/* + * Styles + */ +export const getStyles = stylesFactory(() => { + return { + streamIndicator: css` + width: 10px; + height: 10px; + background: ${config.theme.colors.textFaint}; + box-shadow: 0 0 2px ${config.theme.colors.textFaint}; + border-radius: 50%; + position: relative; + top: 6px; + right: 1px; + `, + }; +}); diff --git a/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap b/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap index 6b758e51c08..631f895ccb9 100644 --- a/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap +++ b/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap @@ -10,7 +10,7 @@ exports[`Render should render component 1`] = ` > External group sync - @@ -18,7 +18,7 @@ exports[`Render should render component 1`] = ` className="icon--has-hover page-sub-heading-icon" name="question-circle" /> - +
@@ -92,7 +92,7 @@ exports[`Render should render groups table 1`] = ` > External group sync - @@ -100,7 +100,7 @@ exports[`Render should render groups table 1`] = ` className="icon--has-hover page-sub-heading-icon" name="question-circle" /> - +
diff --git a/public/app/plugins/datasource/testdata/runStreams.ts b/public/app/plugins/datasource/testdata/runStreams.ts index 80f78b7eee5..55f0e8b0c10 100644 --- a/public/app/plugins/datasource/testdata/runStreams.ts +++ b/public/app/plugins/datasource/testdata/runStreams.ts @@ -98,6 +98,7 @@ export function runSignalStream( subscriber.next({ data: [data], key: streamId, + state: LoadingState.Streaming, }); timeoutId = setTimeout(pushNextEvent, speed);