CloudWatch: Remove HighResolution toggle since it's not being used (#20440)

* Remove highres flag since it's not being used

* Remove not used code. Init id field correctly

* Fix broken tests

* Remove GMS related calculations

* Rename period field

* Add breaking changes to changelog. Also update upgrading docs

* Update snapshot

* Update docs after feedback

* Changes after feedback

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

@@ -46,7 +46,6 @@ const setup = () => {
       period: '',
       expression: '',
       alias: '',
-      highResolution: false,
       matchExact: true,
     },
     datasource,

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

@@ -51,12 +51,16 @@ export class QueryEditor extends PureComponent<Props, State> {
       query.region = 'default';
     }
 
-    if (!query.statistics || !query.statistics.length) {
-      query.statistics = ['Average'];
+    if (!query.id) {
+      query.id = '';
     }
 
-    if (!query.hasOwnProperty('highResolution')) {
-      query.highResolution = false;
+    if (!query.alias) {
+      query.alias = '';
+    }
+
+    if (!query.statistics || !query.statistics.length) {
+      query.statistics = ['Average'];
     }
 
     if (!query.hasOwnProperty('matchExact')) {
@@ -198,11 +202,7 @@ export class QueryEditor extends PureComponent<Props, State> {
         )}
         <div className="gf-form-inline">
           <div className="gf-form">
-            <QueryField
-              className="query-keyword"
-              label="Min Period"
-              tooltip="Minimum interval between points in seconds"
-            >
+            <QueryField className="query-keyword" label="Period" tooltip="Minimum interval between points in seconds">
               <Input
                 className="gf-form-input width-8"
                 value={query.period || ''}
@@ -220,12 +220,6 @@ export class QueryEditor extends PureComponent<Props, State> {
             >
               <Alias value={query.alias} onChange={(value: string) => this.onChange({ ...query, alias: value })} />
             </QueryField>
-            <Switch
-              label="HighRes"
-              labelClass="query-keyword"
-              checked={query.highResolution}
-              onChange={() => this.onChange({ ...query, highResolution: !query.highResolution })}
-            />
             <Switch
               label="Match Exact"
               labelClass="query-keyword"

public/app/plugins/datasource/cloudwatch/components/__snapshots__/QueryEditor.test.tsx.snap

@@ -248,7 +248,7 @@ Array [
       <label
         className="gf-form-label width-8 query-keyword"
       >
-        Min Period
+        Period
         <div
           className="gf-form-help-icon gf-form-help-icon--right-normal"
           onMouseEnter={[Function]}
@@ -312,33 +312,6 @@ Array [
         <label
           className="gf-form gf-form-switch-container "
           htmlFor="1"
-        >
-          <div
-            className="gf-form-label query-keyword  pointer"
-          >
-            HighRes
-          </div>
-          <div
-            className="gf-form-switch  "
-          >
-            <input
-              checked={false}
-              id="1"
-              onChange={[Function]}
-              type="checkbox"
-            />
-            <span
-              className="gf-form-switch__slider"
-            />
-          </div>
-        </label>
-      </div>
-      <div
-        className="gf-form-switch-container-react"
-      >
-        <label
-          className="gf-form gf-form-switch-container "
-          htmlFor="2"
         >
           <div
             className="gf-form-label query-keyword  pointer"
@@ -359,7 +332,7 @@ Array [
           >
             <input
               checked={true}
-              id="2"
+              id="1"
               onChange={[Function]}
               type="checkbox"
             />