From 3b0fff63d4bff5d598128bb9dd4159892183b0c8 Mon Sep 17 00:00:00 2001 From: nasc17 <69922333+nasc17@users.noreply.github.com> Date: Wed, 21 Jul 2021 10:06:27 -0700 Subject: [PATCH] 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 --- .../controllerDashboardOverviewPage.ts | 11 ++++++++-- .../miaa/miaaDashboardOverviewPage.ts | 16 +++++++++----- .../postgres/postgresOverviewPage.ts | 21 ++++++++++++++----- .../postgres/postgresResourceHealthPage.ts | 15 ++++++++++--- 4 files changed, 48 insertions(+), 15 deletions(-) diff --git a/extensions/arc/src/ui/dashboards/controller/controllerDashboardOverviewPage.ts b/extensions/arc/src/ui/dashboards/controller/controllerDashboardOverviewPage.ts index a4a31b88e1..26e66b67d4 100644 --- a/extensions/arc/src/ui/dashboards/controller/controllerDashboardOverviewPage.ts +++ b/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({ - 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; } diff --git a/extensions/arc/src/ui/dashboards/miaa/miaaDashboardOverviewPage.ts b/extensions/arc/src/ui/dashboards/miaa/miaaDashboardOverviewPage.ts index 292c06a5d0..311029bd22 100644 --- a/extensions/arc/src/ui/dashboards/miaa/miaaDashboardOverviewPage.ts +++ b/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: [ - [loc.kibanaDashboard, this._kibanaLoading, loc.kibanaDashboardDescription], - [loc.grafanaDashboard, this._grafanaLoading, loc.grafanaDashboardDescription]] + dataValues: [ + [{ value: loc.kibanaDashboard }, { value: this._kibanaLoading }, { value: loc.kibanaDashboardDescription }], + [{ 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) { diff --git a/extensions/arc/src/ui/dashboards/postgres/postgresOverviewPage.ts b/extensions/arc/src/ui/dashboards/postgres/postgresOverviewPage.ts index 94867fadcc..dcd5d22347 100644 --- a/extensions/arc/src/ui/dashboards/postgres/postgresOverviewPage.ts +++ b/extensions/arc/src/ui/dashboards/postgres/postgresOverviewPage.ts @@ -139,9 +139,9 @@ export class PostgresOverviewPage extends DashboardPage { rowCssStyles: cssStyles.tableRow } ], - data: [ - [loc.kibanaDashboard, this.kibanaLoading, loc.kibanaDashboardDescription], - [loc.grafanaDashboard, this.grafanaLoading, loc.grafanaDashboardDescription]] + dataValues: [ + [{ value: loc.kibanaDashboard }, { value: this.kibanaLoading }, { value: loc.kibanaDashboardDescription }], + [{ 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; } } diff --git a/extensions/arc/src/ui/dashboards/postgres/postgresResourceHealthPage.ts b/extensions/arc/src/ui/dashboards/postgres/postgresResourceHealthPage.ts index 08afd32d81..9055f79bc1 100644 --- a/extensions/arc/src/ui/dashboards/postgres/postgresResourceHealthPage.ts +++ b/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;