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

Alerting: Set max width on alerting query rows (#34749)

Browse Source
This commit is contained in:
Peter Holmberg 2021-05-27 16:15:43 +02:00 committed by GitHub
parent da6236d89a
commit e085b2316c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/app/features/alerting/unified/components/rule-editor/QueryEditor.tsx
View File

@ -215,6 +215,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
container: css` container: css`
background-color: ${theme.colors.background.primary}; background-color: ${theme.colors.background.primary};
height: 100%; height: 100%;
max-width: ${theme.breakpoints.values.xxl}px;
`, `,
runWrapper: css` runWrapper: css`
margin-top: ${theme.spacing(1)}; margin-top: ${theme.spacing(1)};

17
public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx
View File

@ -22,7 +22,7 @@ export const VizWrapper: FC<Props> = ({ data, currentPanel, changePanel }) => {
}); });
const panels = getSupportedPanels(); const panels = getSupportedPanels();
const vizHeight = useVizHeight(data, currentPanel, options.frameIndex); const vizHeight = useVizHeight(data, currentPanel, options.frameIndex);
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles(vizHeight));
if (!options || !data) { if (!options || !data) {
return null; return null;
@ -33,15 +33,15 @@ export const VizWrapper: FC<Props> = ({ data, currentPanel, changePanel }) => {
<div className={styles.buttonGroup}> <div className={styles.buttonGroup}>
<RadioButtonGroup options={panels} value={currentPanel} onChange={changePanel} /> <RadioButtonGroup options={panels} value={currentPanel} onChange={changePanel} />
</div> </div>
<div style={{ height: vizHeight, width: '100%' }}> <AutoSizer>
<AutoSizer style={{ width: '100%', height: '100%' }}> {({ width }) => {
{({ width, height }) => { if (width === 0) {
if (width === 0 || height === 0) {
return null; return null;
} }
return ( return (
<div style={{ height: `${vizHeight}px`, width: `${width}px` }}>
<PanelRenderer <PanelRenderer
height={height} height={vizHeight}
width={width} width={width}
data={data} data={data}
pluginId={currentPanel} pluginId={currentPanel}
@ -49,11 +49,11 @@ export const VizWrapper: FC<Props> = ({ data, currentPanel, changePanel }) => {
onOptionsChange={setOptions} onOptionsChange={setOptions}
options={options} options={options}
/> />
</div>
); );
}} }}
</AutoSizer> </AutoSizer>
</div> </div>
</div>
); );
}; };
@ -63,9 +63,10 @@ const getSupportedPanels = () => {
.map((panel) => ({ value: panel.id, label: panel.name, imgUrl: panel.info.logos.small })); .map((panel) => ({ value: panel.id, label: panel.name, imgUrl: panel.info.logos.small }));
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (visHeight: number) => (theme: GrafanaTheme2) => ({
wrapper: css` wrapper: css`
padding: 0 ${theme.spacing(2)}; padding: 0 ${theme.spacing(2)};
height: ${visHeight + theme.spacing.gridSize * 4}px;
`, `,
autoSizerWrapper: css` autoSizerWrapper: css`
width: 100%; width: 100%;

4
public/app/features/alerting/unified/hooks/useVizHeight.ts
View File

@ -5,7 +5,7 @@ import { STAT, TIMESERIES } from '../utils/constants';
export function useVizHeight(data: PanelData, pluginId: string, frameIndex: number) { export function useVizHeight(data: PanelData, pluginId: string, frameIndex: number) {
const theme = useTheme2(); const theme = useTheme2();
if (pluginId === TIMESERIES || pluginId === STAT || dataIsEmpty(data)) { if (pluginId === TIMESERIES || pluginId === STAT || dataIsEmpty(data)) {
return '200px'; return 200;
} }
const values = data.series[frameIndex].fields[0].values.length; const values = data.series[frameIndex].fields[0].values.length;
@ -18,7 +18,7 @@ export function useVizHeight(data: PanelData, pluginId: string, frameIndex: numb
*/ */
const tableHeight = values * rowHeight + rowHeight; const tableHeight = values * rowHeight + rowHeight;
return `${tableHeight >= 200 ? 200 : tableHeight}px`; return tableHeight >= 200 ? 200 : tableHeight;
} }
function dataIsEmpty(data: PanelData) { function dataIsEmpty(data: PanelData) {