IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-14 01:23:32 -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`
background-color: ${theme.colors.background.primary};
height: 100%;
max-width: ${theme.breakpoints.values.xxl}px;
`,
runWrapper: css`
margin-top: ${theme.spacing(1)};

29
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 vizHeight = useVizHeight(data, currentPanel, options.frameIndex);
const styles = useStyles2(getStyles);
const styles = useStyles2(getStyles(vizHeight));
if (!options || !data) {
return null;
@ -33,15 +33,15 @@ export const VizWrapper: FC<Props> = ({ data, currentPanel, changePanel }) => {
<div className={styles.buttonGroup}>
<RadioButtonGroup options={panels} value={currentPanel} onChange={changePanel} />
</div>
<div style={{ height: vizHeight, width: '100%' }}>
<AutoSizer style={{ width: '100%', height: '100%' }}>
{({ width, height }) => {
if (width === 0 || height === 0) {
return null;
}
return (
<AutoSizer>
{({ width }) => {
if (width === 0) {
return null;
}
return (
<div style={{ height: `${vizHeight}px`, width: `${width}px` }}>
<PanelRenderer
height={height}
height={vizHeight}
width={width}
data={data}
pluginId={currentPanel}
@ -49,10 +49,10 @@ export const VizWrapper: FC<Props> = ({ data, currentPanel, changePanel }) => {
onOptionsChange={setOptions}
options={options}
/>
);
}}
</AutoSizer>
</div>
</div>
);
}}
</AutoSizer>
</div>
);
};
@ -63,9 +63,10 @@ const getSupportedPanels = () => {
.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`
padding: 0 ${theme.spacing(2)};
height: ${visHeight + theme.spacing.gridSize * 4}px;
`,
autoSizerWrapper: css`
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) {
const theme = useTheme2();
if (pluginId === TIMESERIES || pluginId === STAT || dataIsEmpty(data)) {
return '200px';
return 200;
}
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;
return `${tableHeight >= 200 ? 200 : tableHeight}px`;
return tableHeight >= 200 ? 200 : tableHeight;
}
function dataIsEmpty(data: PanelData) {