CloudWatch: Calculate period based on time range (#21471)

* Calculate min period based on time range and no of queries

* Use hardcoded array of periods if period is not defined actively by the user

* Fix broken tests

* Use a smaller max period for auto interval

* Fix broken tests

* Test period calculation

* Test min retention period

* Fix broken test

public/app/plugins/datasource/cloudwatch/components/QueryEditor.tsx

@@ -165,14 +165,16 @@ export class QueryEditor extends PureComponent<Props, State> {
                 <tr>
                   <th>Metric Data Query ID</th>
                   <th>Metric Data Query Expression</th>
+                  <th>Period</th>
                   <th />
                 </tr>
               </thead>
               <tbody>
-                {data.series[0].meta.gmdMeta.map(({ ID, Expression }: any) => (
+                {data.series[0].meta.gmdMeta.map(({ ID, Expression, Period }: any) => (
                   <tr key={ID}>
                     <td>{ID}</td>
                     <td>{Expression}</td>
+                    <td>{Period}</td>
                   </tr>
                 ))}
               </tbody>

public/app/plugins/datasource/cloudwatch/components/Stats.tsx

@@ -31,17 +31,15 @@ export const Stats: FunctionComponent<Props> = ({ stats, values, onChange, varia
           }
         />
       ))}
-    {values.length !== stats.length && (
-      <Segment
-        Component={
-          <a className="gf-form-label query-part">
-            <i className="fa fa-plus" />
-          </a>
-        }
-        allowCustomValue
-        onChange={({ value }) => onChange([...values, value])}
-        options={[...stats.filter(({ value }) => !values.includes(value)), variableOptionGroup]}
-      />
-    )}
+    <Segment
+      Component={
+        <a className="gf-form-label query-part">
+          <i className="fa fa-plus" />
+        </a>
+      }
+      allowCustomValue
+      onChange={({ value }) => onChange([...values, value])}
+      options={[...stats.filter(({ value }) => !values.includes(value)), variableOptionGroup]}
+    />
   </>
 );