Switched deprecated data in declarative table to be dataValues (#16381)

* Controller overview datavalues

* Miaa OV datavalues

* data values PG OV

* data values PG OV p2

* data values PG health

* datavalues miaa OV p2

extensions/arc/src/ui/dashboards/controller/controllerDashboardOverviewPage.ts

@@ -68,7 +68,7 @@ export class ControllerDashboardOverviewPage extends DashboardPage {
 
 		this._arcResourcesLoadingComponent = this.modelView.modelBuilder.loadingComponent().component();
 		this._arcResourcesTable = this.modelView.modelBuilder.declarativeTable().withProperties<azdata.DeclarativeTableProperties>({
-			data: [],
+			dataValues: [],
 			columns: [
 				{
 					displayName: '',
@@ -224,7 +224,7 @@ export class ControllerDashboardOverviewPage extends DashboardPage {
 		this.controllerProperties.instanceNamespace = config?.metadata.namespace || this.controllerProperties.instanceNamespace;
 		this.refreshDisplayedProperties();
 
-		this._arcResourcesTable.data = this._controllerModel.registrations
+		let registrations: (string | azdata.ImageComponent | azdata.HyperlinkComponent)[][] = this._controllerModel.registrations
 			.filter(r => r.instanceType !== ResourceType.dataControllers)
 			.map(r => {
 				const iconPath = getResourceTypeIcon(r.instanceType ?? '');
@@ -249,6 +249,13 @@ export class ControllerDashboardOverviewPage extends DashboardPage {
 
 				return [imageComponent, nameComponent, resourceTypeToDisplayName(r.instanceType), r.state];
 			});
+
+		let registrationsData = registrations.map(r => {
+			return r.map((value): azdata.DeclarativeTableCellValue => {
+				return { value: value };
+			});
+		});
+		this._arcResourcesTable.setDataValues(registrationsData);
 		this._arcResourcesLoadingComponent.loading = !this._controllerModel.registrationsLastUpdated;
 	}
 

extensions/arc/src/ui/dashboards/miaa/miaaDashboardOverviewPage.ts

@@ -132,7 +132,7 @@ export class MiaaDashboardOverviewPage extends DashboardPage {
 					rowCssStyles: cssStyles.tableRow
 				}
 			],
-			data: []
+			dataValues: []
 		}).component();
 
 		this._databasesMessage = this.modelView.modelBuilder.text()
@@ -198,9 +198,9 @@ export class MiaaDashboardOverviewPage extends DashboardPage {
 					rowCssStyles: cssStyles.tableRow
 				}
 			],
-			data: [
+			dataValues: [
-				[loc.kibanaDashboard, this._kibanaLoading, loc.kibanaDashboardDescription],
+				[{ value: loc.kibanaDashboard }, { value: this._kibanaLoading }, { value: loc.kibanaDashboardDescription }],
-				[loc.grafanaDashboard, this._grafanaLoading, loc.grafanaDashboardDescription]]
+				[{ value: loc.grafanaDashboard }, { value: this._grafanaLoading }, { value: loc.grafanaDashboardDescription }]]
 		}).component();
 
 		rootContainer.addItem(endpointsTable);
@@ -366,7 +366,13 @@ export class MiaaDashboardOverviewPage extends DashboardPage {
 		// If we were able to get the databases it means we have a good connection so update the username too
 		this._instanceProperties.miaaAdmin = this._miaaModel.username || this._instanceProperties.miaaAdmin;
 		this.refreshDisplayedProperties();
-		this._databasesTable.data = this._miaaModel.databases.map(d => [d.name, getDatabaseStateDisplayText(d.status)]);
+		let databaseDisplayText = this._miaaModel.databases.map(d => [d.name, getDatabaseStateDisplayText(d.status)]);
+		let databasesTextValues = databaseDisplayText.map(d => {
+			return d.map((value): azdata.DeclarativeTableCellValue => {
+				return { value: value };
+			});
+		});
+		this._databasesTable.setDataValues(databasesTextValues);
 		this._databasesTableLoading.loading = false;
 
 		if (this._miaaModel.databasesLastUpdated) {

extensions/arc/src/ui/dashboards/postgres/postgresOverviewPage.ts

@@ -139,9 +139,9 @@ export class PostgresOverviewPage extends DashboardPage {
 					rowCssStyles: cssStyles.tableRow
 				}
 			],
-			data: [
+			dataValues: [
-				[loc.kibanaDashboard, this.kibanaLoading, loc.kibanaDashboardDescription],
+				[{ value: loc.kibanaDashboard }, { value: this.kibanaLoading }, { value: loc.kibanaDashboardDescription }],
-				[loc.grafanaDashboard, this.grafanaLoading, loc.grafanaDashboardDescription]]
+				[{ value: loc.grafanaDashboard }, { value: this.grafanaLoading }, { value: loc.grafanaDashboardDescription }]]
 		}).component();
 		content.addItem(endpointsTable);
 
@@ -151,6 +151,8 @@ export class PostgresOverviewPage extends DashboardPage {
 			CSSStyles: titleCSS
 		}).component());
 
+
+
 		this.podStatusTable = this.modelView.modelBuilder.declarativeTable().withProps({
 			width: '100%',
 			columns: [
@@ -185,7 +187,7 @@ export class PostgresOverviewPage extends DashboardPage {
 					rowCssStyles: cssStyles.tableRow
 				}
 			],
-			data: [this.podStatusData.map(p => [p.podName, p.type, p.status])]
+			dataValues: this.createPodStatusDataValues()
 		}).component();
 
 
@@ -389,6 +391,15 @@ export class PostgresOverviewPage extends DashboardPage {
 		return podModels;
 	}
 
+	private createPodStatusDataValues(): azdata.DeclarativeTableCellValue[][] {
+		let podDataValue: (string | azdata.Component)[][] = this.podStatusData.map(p => [p.podName, p.type, p.status]);
+		return podDataValue.map(p => {
+			return p.map((value): azdata.DeclarativeTableCellValue => {
+				return { value: value };
+			});
+		});
+	}
+
 	private refreshDashboardLinks(): void {
 		if (this._postgresModel.config) {
 			const kibanaUrl = this._postgresModel.config.status.logSearchDashboard ?? '';
@@ -406,7 +417,7 @@ export class PostgresOverviewPage extends DashboardPage {
 	private refreshServerNodes(): void {
 		if (this._postgresModel.config) {
 			this.podStatusData = this.getPodStatus();
-			this.podStatusTable.data = this.podStatusData.map(p => [p.podName, p.type, p.status]);
+			this.podStatusTable.setDataValues(this.createPodStatusDataValues());
 			this.serverGroupNodesLoading.loading = false;
 		}
 	}

extensions/arc/src/ui/dashboards/postgres/postgresResourceHealthPage.ts

@@ -12,7 +12,7 @@ import { PostgresModel } from '../../../models/postgresModel';
 
 export type PodHealthModel = {
 	condition: string,
-	details?: azdata.Component,
+	details: azdata.Component,
 	lastUpdate: string
 };
 
@@ -119,7 +119,7 @@ export class PostgresResourceHealthPage extends DashboardPage {
 					rowCssStyles: cssStyles.tableRow
 				}
 			],
-			data: [this.coordinatorData.map(p => [p.condition, p.details, p.lastUpdate])]
+			dataValues: this.createPodConditionsDataValues(this.coordinatorData)
 		}).component();
 
 		this.podDropDown = this.modelView.modelBuilder.dropDown().withProps({ width: '150px' }).component();
@@ -234,11 +234,20 @@ export class PostgresResourceHealthPage extends DashboardPage {
 			this.podConditionsTableIndexes.set(p.name, indexes);
 		});
 
-		this.podConditionsTable.data = this.podsData.map(p => [p.condition, p.details, p.lastUpdate]);
+		this.podConditionsTable.setDataValues(this.createPodConditionsDataValues(this.podsData));
 
 		return podNames;
 	}
 
+	private createPodConditionsDataValues(podInfo: PodHealthModel[]): azdata.DeclarativeTableCellValue[][] {
+		let podDataValues: (string | azdata.Component)[][] = podInfo.map(p => [p.condition, p.details, p.lastUpdate]);
+		return podDataValues.map(p => {
+			return p.map((value): azdata.DeclarativeTableCellValue => {
+				return { value: value };
+			});
+		});
+	}
+
 	private findPodIssues(): string[] {
 		const podStatus = this._postgresModel.config?.status.podsStatus;
 		let issueCount = 0;