Revert "Merge pull request openshift#5622 from rhamilto/bz1840543"

This reverts commit 169bf18, reversing
changes made to 18b7916.

frontend/public/components/graphs/gauge.tsx

@@ -9,7 +9,7 @@ import classNames from 'classnames';
 import { PrometheusGraph, PrometheusGraphLink } from './prometheus-graph';
 import { usePrometheusPoll } from './prometheus-poll-hook';
 import { PrometheusEndpoint } from './helpers';
-import { humanizePercentage, Humanize } from '../utils';
+import { useRefWidth, humanizePercentage, Humanize } from '../utils';
 import { getInstantVectorStats } from './utils';
 import { DataPoint } from '.';
 
@@ -32,13 +32,24 @@ export const GaugeChart: React.FC<GaugeChartProps> = ({
  secondaryTitle = usedLabel,
  className,
 }) => {
+ const [ref, width] = useRefWidth();
  const ready = !error && !loading;
  const status = loading ? 'Loading' : error;
  const labels = ({ datum: { x, y } }) => (x ? `${x} ${usedLabel}` : `${y} ${remainderLabel}`);
  return (
- <PrometheusGraph className={classNames('graph-wrapper--title-center', className)} title={title}>
+ <PrometheusGraph
+ className={classNames('graph-wrapper--title-center graph-wrapper--gauge', className)}
+ ref={ref}
+ title={title}
+ >
  <PrometheusGraphLink query={query}>
- <ChartDonutThreshold data={thresholds} height={160} padding={0} width={160} y="value">
+ <ChartDonutThreshold
+ data={thresholds}
+ height={width} // Changes the scale of the graph, not actual width and height
+ padding={0}
+ width={width}
+ y="value"
+ >
  <ChartDonutUtilization
  labels={labels}
  data={ready ? data : { y: 0 }}