Users/fnbalaji/dedicated gateway second cut (#812)

* src/SelfServe/Example/SelfServeExample.rp.ts.
Portal changes for DedicatedGateway

1. Change Sqlx endpoints to SqlDedicatedGateway endpoint

2. Remove D32s from the SKU list

3. Add telemetry

4. Remove SKU details field per discussion

5. Support dynamic instance scaling.

* format files to ensure format check and lint tests pass

* Lint fixes

* Lint fixes

* Added metrics blade link

* updated conditions for warning banner

* fixed lint error

* Incorporate metrics link and CR feedback

* Lint fixes

* CR feedback and fix links

* CR feedback and fix links

* Link fix

* More fixes to the Dedicated Gateway layout

* Format check

* Fix casing

Co-authored-by: Srinath Narayanan <srnara@microsoft.com>

src/Localization/en/SqlX.json

@@ -46,8 +46,9 @@
     "ConnectionStringText": "To use the dedicated gateway, use the connection string shown in ",
     "KeysBlade": "the keys blade.",
     "MetricsString": "Metrics",
-    "MetricsText": "Monitor the \"DedicatedGatewayMaximumCpuUsage\" and \"DedicatedGatewayAverageMemoryUsage\" in ",
+    "MetricsText": "Monitor the CPU and memory usage for the dedicated gateway instances in ",
     "MetricsBlade": "the metrics blade.",
+    "MonitorUsage": "Monitor Usage",
     "ResizingDecisionText": "To understand if the dedicated gateway is the right size, ",
     "ResizingDecisionLink": "learn more about dedicated gateway sizing.",
     "WarningBannerOnUpdate": "Adding or modifying dedicated gateway instances may affect your bill.",

src/SelfServe/SqlX/SqlX.tsx

@@ -1,9 +1,10 @@
-import { IsDisplayable, OnChange, RefreshOptions, Values } from "../Decorators";
+import { IsDisplayable, OnChange, PropertyInfo, RefreshOptions, Values } from "../Decorators";
 import { selfServeTrace } from "../SelfServeTelemetryProcessor";
 import {
   ChoiceItem,
   Description,
   DescriptionType,
+  Info,
   InputType,
   NumberUiType,
   OnSaveResult,
@@ -46,15 +47,6 @@ const metricsStringValue: Description = {
   },
 };
 
-const resizingDecisionValue: Description = {
-  textTKey: "ResizingDecisionText",
-  type: DescriptionType.Text,
-  link: {
-    href: "https://aka.ms/cosmos-db-dedicated-gateway-size",
-    textTKey: "ResizingDecisionLink",
-  },
-};
-
 const CosmosD4s = "Cosmos.D4s";
 const CosmosD8s = "Cosmos.D8s";
 const CosmosD16s = "Cosmos.D16s";
@@ -104,7 +96,6 @@ const onEnableDedicatedGatewayChange = (
     currentValues.set("warningBanner", baselineValues.get("warningBanner"));
     currentValues.set("connectionString", baselineValues.get("connectionString"));
     currentValues.set("metricsString", baselineValues.get("metricsString"));
-    currentValues.set("resizingDecisionString", baselineValues.get("resizingDecisionString"));
     return currentValues;
   }
 
@@ -157,11 +148,6 @@ const onEnableDedicatedGatewayChange = (
     hidden: !newValue || !dedicatedGatewayOriginallyEnabled,
   });
 
-  currentValues.set("resizingDecisionString", {
-    value: resizingDecisionValue,
-    hidden: !newValue || !dedicatedGatewayOriginallyEnabled,
-  });
-
   return currentValues;
 };
 
@@ -183,6 +169,14 @@ const getInstancesMax = async (): Promise<number> => {
   return 5;
 };
 
+const NumberOfInstancesDropdownInfo: Info = {
+  messageTKey: "ResizingDecisionText",
+  link: {
+    href: "https://aka.ms/cosmos-db-dedicated-gateway-size",
+    textTKey: "ResizingDecisionLink",
+  },
+};
+
 @IsDisplayable()
 @RefreshOptions({ retryIntervalInMs: 20000 })
 export default class SqlX extends SelfServeBaseClass {
@@ -279,10 +273,6 @@ export default class SqlX extends SelfServeBaseClass {
       value: undefined,
       hidden: true,
     });
-    defaults.set("resizingDecisionString", {
-      value: undefined,
-      hidden: true,
-    });
 
     const response = await getCurrentProvisioningState();
     if (response.status && response.status !== "Deleting") {
@@ -299,13 +289,7 @@ export default class SqlX extends SelfServeBaseClass {
         value: metricsStringValue,
         hidden: false,
       });
-
-      defaults.set("resizingDecisionString", {
-        value: resizingDecisionValue,
-        hidden: false,
-      });
     }
-
     defaults.set("warningBanner", undefined);
     return defaults;
   };
@@ -344,6 +328,7 @@ export default class SqlX extends SelfServeBaseClass {
   sku: ChoiceItem;
 
   @OnChange(onNumberOfInstancesChange)
+  @PropertyInfo(NumberOfInstancesDropdownInfo)
   @Values({
     labelTKey: "NumberOfInstances",
     min: getInstancesMin,
@@ -353,16 +338,6 @@ export default class SqlX extends SelfServeBaseClass {
   })
   instances: number;
 
-  @Values({
-    description: metricsStringValue,
-  })
-  metricsString: string;
-
-  @Values({
-    description: resizingDecisionValue,
-  })
-  resizingDecisionString: string;
-
   @Values({
     labelTKey: "Cost",
     isDynamicDescription: true,
@@ -374,4 +349,10 @@ export default class SqlX extends SelfServeBaseClass {
     isDynamicDescription: true,
   })
   connectionString: string;
+
+  @Values({
+    labelTKey: "MonitorUsage",
+    description: metricsStringValue,
+  })
+  metricsString: string;
 }