Google Cloud Monitoring: Ensure selectors fit in the screen (#57817)

public/app/plugins/datasource/cloud-monitoring/components/Aggregation.tsx

@@ -39,6 +39,7 @@ export const Aggregation: FC<Props> = (props) => {
         ]}
         placeholder="Select Reducer"
         inputId={`${props.refId}-group-by-function`}
+        menuPlacement="top"
       />
     </EditorField>
   );

public/app/plugins/datasource/cloud-monitoring/components/AlignmentFunction.tsx

@@ -37,6 +37,7 @@ export const AlignmentFunction: FC<Props> = ({ inputId, query, templateVariableO
       ]}
       placeholder="Select Alignment"
       inputId={inputId}
+      menuPlacement="top"
     />
   );
 };

public/app/plugins/datasource/cloud-monitoring/components/AlignmentPeriodLabel.tsx

@@ -1,28 +0,0 @@
-import React, { FC, useMemo } from 'react';
-
-import { rangeUtil } from '@grafana/data';
-
-import { ALIGNMENTS } from '../constants';
-import CloudMonitoringDatasource from '../datasource';
-import { CustomMetaData } from '../types';
-
-export interface Props {
-  customMetaData: CustomMetaData;
-  datasource: CloudMonitoringDatasource;
-}
-
-export const AlignmentPeriodLabel: FC<Props> = ({ customMetaData, datasource }) => {
-  const { perSeriesAligner, alignmentPeriod } = customMetaData;
-  const formatAlignmentText = useMemo(() => {
-    if (!alignmentPeriod || !perSeriesAligner) {
-      return '';
-    }
-
-    const alignment = ALIGNMENTS.find((ap) => ap.value === datasource.templateSrv.replace(perSeriesAligner));
-    const seconds = parseInt(alignmentPeriod ?? ''.replace(/[^0-9]/g, ''), 10);
-    const hms = rangeUtil.secondsToHms(seconds);
-    return `${hms} interval (${alignment?.text ?? ''})`;
-  }, [datasource, perSeriesAligner, alignmentPeriod]);
-
-  return <label>{formatAlignmentText}</label>;
-};

public/app/plugins/datasource/cloud-monitoring/components/GroupBy.tsx

@@ -47,6 +47,7 @@ export const GroupBy: FunctionComponent<Props> = ({
           onChange={(options) => {
             onChange({ ...query, groupBys: options.map((o) => o.value!) });
           }}
+          menuPlacement="top"
         />
       </EditorField>
       <Aggregation

public/app/plugins/datasource/cloud-monitoring/components/PeriodSelect.tsx

@@ -54,6 +54,7 @@ export function PeriodSelect({
       inputId={inputId}
       disabled={disabled}
       allowCustomValue
+      menuPlacement="top"
     />
   );
 }

public/app/plugins/datasource/cloud-monitoring/components/index.ts

@@ -5,7 +5,6 @@ export { Alignment } from './Alignment';
 export { LabelFilter } from './LabelFilter';
 export { AnnotationsHelp } from './AnnotationsHelp';
 export { AlignmentFunction } from './AlignmentFunction';
-export { AlignmentPeriodLabel } from './AlignmentPeriodLabel';
 export { AliasBy } from './AliasBy';
 export { Aggregation } from './Aggregation';
 export { MetricQueryEditor } from './MetricQueryEditor';