mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-02-16 10:58:30 -05:00
Added Server Group Nodes status table to Overview page (#14194)
* Add podstatus to spec * Added image to table and fixed spacing. * Added pod status to spec * PR fixes * Edited so that when page is closed and reopened, does not have empty server group node table
This commit is contained in:
@@ -7,16 +7,23 @@ import * as vscode from 'vscode';
|
||||
import * as azdata from 'azdata';
|
||||
import * as azdataExt from 'azdata-ext';
|
||||
import * as loc from '../../../localizedConstants';
|
||||
import { IconPathHelper, cssStyles } from '../../../constants';
|
||||
import { IconPathHelper, cssStyles, iconSize } from '../../../constants';
|
||||
import { DashboardPage } from '../../components/dashboardPage';
|
||||
import { ControllerModel } from '../../../models/controllerModel';
|
||||
import { PostgresModel } from '../../../models/postgresModel';
|
||||
import { promptAndConfirmPassword, promptForInstanceDeletion } from '../../../common/utils';
|
||||
import { ResourceType } from 'arc';
|
||||
|
||||
export type PodStatusModel = {
|
||||
podName: azdata.Component,
|
||||
type: string,
|
||||
status: string
|
||||
};
|
||||
|
||||
export class PostgresOverviewPage extends DashboardPage {
|
||||
|
||||
private propertiesLoading!: azdata.LoadingComponent;
|
||||
private serverGroupNodesLoading!: azdata.LoadingComponent;
|
||||
private kibanaLoading!: azdata.LoadingComponent;
|
||||
private grafanaLoading!: azdata.LoadingComponent;
|
||||
|
||||
@@ -24,6 +31,9 @@ export class PostgresOverviewPage extends DashboardPage {
|
||||
private kibanaLink!: azdata.HyperlinkComponent;
|
||||
private grafanaLink!: azdata.HyperlinkComponent;
|
||||
|
||||
private podStatusTable!: azdata.DeclarativeTableComponent;
|
||||
private podStatusData: PodStatusModel[] = [];
|
||||
|
||||
private readonly _azdataApi: azdataExt.IExtension;
|
||||
|
||||
constructor(protected modelView: azdata.ModelView, private _controllerModel: ControllerModel, private _postgresModel: PostgresModel) {
|
||||
@@ -132,8 +142,63 @@ export class PostgresOverviewPage extends DashboardPage {
|
||||
[loc.kibanaDashboard, this.kibanaLoading, loc.kibanaDashboardDescription],
|
||||
[loc.grafanaDashboard, this.grafanaLoading, loc.grafanaDashboardDescription]]
|
||||
}).component();
|
||||
|
||||
content.addItem(endpointsTable);
|
||||
|
||||
// Server Group Nodes
|
||||
content.addItem(this.modelView.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
|
||||
value: loc.serverGroupNodes,
|
||||
CSSStyles: titleCSS
|
||||
}).component());
|
||||
|
||||
this.podStatusTable = this.modelView.modelBuilder.declarativeTable().withProps({
|
||||
width: '100%',
|
||||
columns: [
|
||||
{
|
||||
displayName: loc.name,
|
||||
valueType: azdata.DeclarativeDataType.component,
|
||||
isReadOnly: true,
|
||||
width: '35%',
|
||||
headerCssStyles: cssStyles.tableHeader,
|
||||
rowCssStyles: {
|
||||
...cssStyles.tableRow,
|
||||
'overflow': 'hidden',
|
||||
'text-overflow': 'ellipsis',
|
||||
'white-space': 'nowrap',
|
||||
'max-width': '0'
|
||||
}
|
||||
},
|
||||
{
|
||||
displayName: loc.type,
|
||||
valueType: azdata.DeclarativeDataType.string,
|
||||
isReadOnly: true,
|
||||
width: '35%',
|
||||
headerCssStyles: cssStyles.tableHeader,
|
||||
rowCssStyles: cssStyles.tableRow
|
||||
},
|
||||
{
|
||||
displayName: loc.status,
|
||||
valueType: azdata.DeclarativeDataType.string,
|
||||
isReadOnly: true,
|
||||
width: '30%',
|
||||
headerCssStyles: cssStyles.tableHeader,
|
||||
rowCssStyles: cssStyles.tableRow
|
||||
}
|
||||
],
|
||||
data: [this.podStatusData.map(p => [p.podName, p.type, p.status])]
|
||||
}).component();
|
||||
|
||||
|
||||
|
||||
this.serverGroupNodesLoading = this.modelView.modelBuilder.loadingComponent()
|
||||
.withItem(this.podStatusTable)
|
||||
.withProperties<azdata.LoadingComponentProperties>({
|
||||
loading: !this._postgresModel.configLastUpdated
|
||||
}).component();
|
||||
|
||||
this.refreshServerNodes();
|
||||
|
||||
content.addItem(this.serverGroupNodesLoading, { CSSStyles: cssStyles.text });
|
||||
|
||||
this.initialized = true;
|
||||
return root;
|
||||
}
|
||||
@@ -223,6 +288,7 @@ export class PostgresOverviewPage extends DashboardPage {
|
||||
refreshButton.enabled = false;
|
||||
try {
|
||||
this.propertiesLoading!.loading = true;
|
||||
this.serverGroupNodesLoading!.loading = true;
|
||||
this.kibanaLoading!.loading = true;
|
||||
this.grafanaLoading!.loading = true;
|
||||
|
||||
@@ -281,6 +347,54 @@ export class PostgresOverviewPage extends DashboardPage {
|
||||
];
|
||||
}
|
||||
|
||||
private getPodStatus(): PodStatusModel[] {
|
||||
let podModels: PodStatusModel[] = [];
|
||||
const podStatus = this._postgresModel.config?.status.podsStatus;
|
||||
|
||||
podStatus?.forEach(p => {
|
||||
// If a condition of the pod has a status of False, pod is not Ready
|
||||
const status = p.conditions.find(c => c.status === 'False') ? loc.notReady : loc.ready;
|
||||
|
||||
const podLabelContainer = this.modelView.modelBuilder.flexContainer().withProps({
|
||||
CSSStyles: { 'alignItems': 'center', 'height': '15px' }
|
||||
}).component();
|
||||
|
||||
const imageComponent = this.modelView.modelBuilder.image().withProps({
|
||||
iconPath: IconPathHelper.postgres,
|
||||
width: iconSize,
|
||||
height: iconSize,
|
||||
iconHeight: '15px',
|
||||
iconWidth: '15px'
|
||||
}).component();
|
||||
|
||||
let podLabel = this.modelView.modelBuilder.text().withProps({
|
||||
value: p.name,
|
||||
}).component();
|
||||
|
||||
if (p.role.toUpperCase() === loc.worker.toUpperCase()) {
|
||||
podLabelContainer.addItem(imageComponent, { CSSStyles: { 'margin-left': '15px', 'margin-right': '0px' } });
|
||||
podLabelContainer.addItem(podLabel);
|
||||
let pod: PodStatusModel = {
|
||||
podName: podLabelContainer,
|
||||
type: loc.worker,
|
||||
status: status
|
||||
};
|
||||
podModels.push(pod);
|
||||
} else {
|
||||
podLabelContainer.addItem(imageComponent, { CSSStyles: { 'margin-right': '0px' } });
|
||||
podLabelContainer.addItem(podLabel);
|
||||
let pod: PodStatusModel = {
|
||||
podName: podLabelContainer,
|
||||
type: loc.coordinator,
|
||||
status: status
|
||||
};
|
||||
podModels.unshift(pod);
|
||||
}
|
||||
});
|
||||
|
||||
return podModels;
|
||||
}
|
||||
|
||||
private refreshDashboardLinks(): void {
|
||||
if (this._postgresModel.config) {
|
||||
const kibanaUrl = this._postgresModel.config.status.logSearchDashboard ?? '';
|
||||
@@ -295,6 +409,14 @@ 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.serverGroupNodesLoading.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
private handleRegistrationsUpdated() {
|
||||
this.properties!.propertyItems = this.getProperties();
|
||||
this.propertiesLoading!.loading = false;
|
||||
@@ -304,5 +426,6 @@ export class PostgresOverviewPage extends DashboardPage {
|
||||
this.properties!.propertyItems = this.getProperties();
|
||||
this.propertiesLoading!.loading = false;
|
||||
this.refreshDashboardLinks();
|
||||
this.refreshServerNodes();
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user