From ec9c2ed029680e4ecc40942dc6819d269161e30d Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Mon, 31 Oct 2022 13:36:07 +0100
Subject: [PATCH] Google Cloud Monitoring: Ensure selectors fit in the screen
 (#57817) (#57899)

(cherry picked from commit ce38840f293bfe94a1d6338a9bab255b3d7cc56c)

Co-authored-by: Andres Martinez Gotor <andres.martinez@grafana.com>
---
 .../components/Aggregation.tsx                |  1 +
 .../components/AlignmentFunction.tsx          |  1 +
 .../components/AlignmentPeriodLabel.tsx       | 28 -------------------
 .../cloud-monitoring/components/GroupBy.tsx   |  1 +
 .../components/PeriodSelect.tsx               |  1 +
 .../cloud-monitoring/components/index.ts      |  1 -
 6 files changed, 4 insertions(+), 29 deletions(-)
 delete mode 100644 public/app/plugins/datasource/cloud-monitoring/components/AlignmentPeriodLabel.tsx

diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Aggregation.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Aggregation.tsx
index 6f403bd09ce..c5c947801c1 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Aggregation.tsx
+++ b/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>
   );
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/AlignmentFunction.tsx b/public/app/plugins/datasource/cloud-monitoring/components/AlignmentFunction.tsx
index 6f43517cc34..eb0a56f2d9d 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/AlignmentFunction.tsx
+++ b/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"
     />
   );
 };
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/AlignmentPeriodLabel.tsx b/public/app/plugins/datasource/cloud-monitoring/components/AlignmentPeriodLabel.tsx
deleted file mode 100644
index 1bfcf1f686a..00000000000
--- a/public/app/plugins/datasource/cloud-monitoring/components/AlignmentPeriodLabel.tsx
+++ /dev/null
@@ -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>;
-};
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/GroupBy.tsx b/public/app/plugins/datasource/cloud-monitoring/components/GroupBy.tsx
index dbd642d9999..fd30735b017 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/GroupBy.tsx
+++ b/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
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/PeriodSelect.tsx b/public/app/plugins/datasource/cloud-monitoring/components/PeriodSelect.tsx
index 24fe3dbbfd5..73a2fedb4f2 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/PeriodSelect.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/PeriodSelect.tsx
@@ -54,6 +54,7 @@ export function PeriodSelect({
       inputId={inputId}
       disabled={disabled}
       allowCustomValue
+      menuPlacement="top"
     />
   );
 }
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/index.ts b/public/app/plugins/datasource/cloud-monitoring/components/index.ts
index d16b907c48a..a4e3e6d33fb 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/index.ts
+++ b/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';