Skip to content

Commit

Permalink
More arc controller dashboard updates (microsoft#10949)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Charles-Gagnon
Charles-Gagnon authored Jun 17, 2020
1 parent 691985a commit c86f301
Show file tree
Hide file tree
Showing 13 changed files with 169 additions and 40 deletions.
21 changes: 21 additions & 0 deletions extensions/arc/images/miaa.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
27 changes: 22 additions & 5 deletions extensions/arc/src/common/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,8 @@
import * as vscode from 'vscode';
import * as azurecore from '../../../azurecore/src/azurecore';
import * as loc from '../localizedConstants';
import { IconPathHelper, IconPath, ResourceType, Connectionmode } from '../constants';

export enum ResourceType {
dataControllers = 'dataControllers',
postgresInstances = 'postgresInstances',
sqlManagedInstances = 'sqlManagedInstances'
}
/**
* Converts the resource type name into the localized Display Name for that type.
* @param resourceType The resource type name to convert
Expand Down Expand Up @@ -49,3 +45,24 @@ export async function getAzurecoreApi(): Promise<azurecore.IExtension> {
}
return azurecoreApi;
}

export function getResourceTypeIcon(resourceType: string): IconPath | undefined {
switch (resourceType) {
case ResourceType.sqlManagedInstances:
return IconPathHelper.miaa;
case ResourceType.postgresInstances:
return IconPathHelper.postgres;
}
return undefined;
}

export function getConnectionModeDisplayText(connectionMode: string | undefined): string {
connectionMode = connectionMode ?? '';
switch (connectionMode) {
case Connectionmode.connected:
return loc.connected;
case Connectionmode.disconnected:
return loc.disconnected;
}
return connectionMode;
}
25 changes: 25 additions & 0 deletions extensions/arc/src/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export class IconPathHelper {
public static refresh: IconPath;
public static support: IconPath;
public static wrench: IconPath;
public static miaa: IconPath;

public static setExtensionContext(context: vscode.ExtensionContext) {
IconPathHelper.context = context;
Expand Down Expand Up @@ -101,12 +102,36 @@ export class IconPathHelper {
light: context.asAbsolutePath('images/wrench.svg'),
dark: context.asAbsolutePath('images/wrench.svg')
};
IconPathHelper.miaa = {
light: context.asAbsolutePath('images/miaa.svg'),
dark: context.asAbsolutePath('images/miaa.svg'),
};
}
}

export const enum ResourceType {
dataControllers = 'dataControllers',
postgresInstances = 'postgresInstances',
sqlManagedInstances = 'sqlManagedInstances'
}

export const enum Endpoints {
mgmtproxy = 'mgmtproxy',
logsui = 'logsui',
metricsui = 'metricsui',
controller = 'controller'
}

export const enum Connectionmode {
connected = 'connected',
disconnected = 'disconnected'
}

export namespace cssStyles {
export const text = { 'user-select': 'text', 'cursor': 'text' };
export const title = { ...text, 'font-weight': 'bold', 'font-size': '14px' };
export const tableHeader = { ...text, 'text-align': 'left', 'border': 'none' };
export const tableRow = { ...text, 'border-top': 'solid 1px #ccc', 'border-bottom': 'solid 1px #ccc', 'border-left': 'none', 'border-right': 'none' };
}

export const iconSize = '20px';
3 changes: 3 additions & 0 deletions extensions/arc/src/localizedConstants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ export const name = localize('arc.name', "Name");
export const type = localize('arc.type', "Type");
export const status = localize('arc.status', "Status");
export const miaaAdmin = localize('arc.miaaAdmin', "Managed instance admin");
export const controllerEndpoint = localize('arc.controllerEndpoint', "Controller endpoint");
export const dataController = localize('arc.dataController', "Data controller");
export const kibanaDashboard = localize('arc.kibanaDashboard', "Kibana Dashboard");
export const grafanaDashboard = localize('arc.grafanaDashboard', "Grafana Dashboard");
Expand All @@ -60,6 +61,8 @@ export const refresh = localize('arc.refresh', "Refresh");
export const troubleshoot = localize('arc.troubleshoot', "Troubleshoot");
export const clickTheNewSupportRequestButton = localize('arc.clickTheNewSupportRequestButton', "Click the new support request button to file a support request in the Azure Portal.");
export const running = localize('arc.running', "Running");
export const connected = localize('arc.connected', "Connected");
export const disconnected = localize('arc.disconnected', "Disconnected");

// Postgres constants
export const coordinatorEndpoint = localize('arc.coordinatorEndpoint', "Coordinator endpoint");
Expand Down
3 changes: 2 additions & 1 deletion extensions/arc/src/models/controllerModel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
import * as vscode from 'vscode';
import { Authentication } from '../controller/auth';
import { EndpointsRouterApi, EndpointModel, RegistrationRouterApi, RegistrationResponse, TokenRouterApi, SqlInstanceRouterApi } from '../controller/generated/v1/api';
import { ResourceType, parseEndpoint } from '../common/utils';
import { parseEndpoint } from '../common/utils';
import { ResourceType } from '../constants';

export interface Registration extends RegistrationResponse {
externalIp?: string;
Expand Down
2 changes: 1 addition & 1 deletion extensions/arc/src/models/postgresModel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ export class PostgresModel {

/** Creates a SQL database in the service */
public async createDatabase(db: DuskyObjectModelsDatabase): Promise<DuskyObjectModelsDatabase> {
return await (await this._databaseRouter.createDuskyDatabase(this.namespace, this.name, db)).body;
return (await this._databaseRouter.createDuskyDatabase(this.namespace, this.name, db)).body;
}

/**
Expand Down
3 changes: 2 additions & 1 deletion extensions/arc/src/test/common/utils.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@

import * as should from 'should';
import 'mocha';
import { resourceTypeToDisplayName, ResourceType, parseEndpoint } from '../../common/utils';
import { resourceTypeToDisplayName, parseEndpoint } from '../../common/utils';

import * as loc from '../../localizedConstants';
import { ResourceType } from '../../constants';

describe('resourceTypeToDisplayName Method Tests', () => {
it('Display Name should be correct for valid ResourceType', function (): void {
Expand Down
109 changes: 87 additions & 22 deletions extensions/arc/src/ui/dashboards/controller/controllerDashboardOverviewPage.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,45 @@ import * as azdata from 'azdata';
import * as vscode from 'vscode';
import * as loc from '../../../localizedConstants';
import { DashboardPage } from '../../components/dashboardPage';
import { IconPathHelper, cssStyles } from '../../../constants';
import { IconPathHelper, cssStyles, iconSize, ResourceType, Endpoints } from '../../../constants';
import { ControllerModel } from '../../../models/controllerModel';
import { resourceTypeToDisplayName, ResourceType, getAzurecoreApi } from '../../../common/utils';
import { resourceTypeToDisplayName, getAzurecoreApi, getResourceTypeIcon, getConnectionModeDisplayText } from '../../../common/utils';
import { RegistrationResponse } from '../../../controller/generated/v1/model/registrationResponse';
import { EndpointModel } from '../../../controller/generated/v1/api';

export class ControllerDashboardOverviewPage extends DashboardPage {

private _propertiesLoadingComponent!: azdata.LoadingComponent;
private _arcResourcesLoadingComponent!: azdata.LoadingComponent;

private _arcResourcesTable!: azdata.DeclarativeTableComponent;
private _propertiesContainer!: azdata.PropertiesContainerComponent;

private controllerProperties = {
instanceName: '-',
resourceGroupName: '-',
location: '-',
subscriptionId: '-',
controllerEndpoint: '-',
connectionMode: '-',
instanceNamespace: '-',
};

private _endpointsRetrieved = false;
private _registrationsRetrieved = false;

constructor(modelView: azdata.ModelView, private _controllerModel: ControllerModel) {
super(modelView);
this._controllerModel.onRegistrationsUpdated((_: RegistrationResponse[]) => {
this.eventuallyRunOnInitialized(() => {
this.handleRegistrationsUpdated().catch(e => console.log(e));
});
});
this._controllerModel.onEndpointsUpdated(endpoints => {
this.eventuallyRunOnInitialized(() => {
this.handleEndpointsUpdated(endpoints);
});
});
this.refresh().catch(e => {
console.log(e);
});
Expand Down Expand Up @@ -55,8 +77,9 @@ export class ControllerDashboardOverviewPage extends DashboardPage {
rootContainer.addItem(contentContainer, { CSSStyles: { 'margin': '10px 20px 0px 20px' } });

this._propertiesContainer = this.modelView.modelBuilder.propertiesContainer().component();
this._propertiesLoadingComponent = this.modelView.modelBuilder.loadingComponent().withItem(this._propertiesContainer).component();

contentContainer.addItem(this._propertiesContainer);
contentContainer.addItem(this._propertiesLoadingComponent);

const arcResourcesTitle = this.modelView.modelBuilder.text()
.withProperties<azdata.TextComponentProperties>({ value: loc.arcResources })
Expand All @@ -69,6 +92,14 @@ export class ControllerDashboardOverviewPage extends DashboardPage {
this._arcResourcesTable = this.modelView.modelBuilder.declarativeTable().withProperties<azdata.DeclarativeTableProperties>({
data: [],
columns: [
{
displayName: '',
valueType: azdata.DeclarativeDataType.component,
width: iconSize,
isReadOnly: true,
headerCssStyles: cssStyles.tableHeader,
rowCssStyles: cssStyles.tableRow
},
{
displayName: loc.name,
valueType: azdata.DeclarativeDataType.string,
Expand Down Expand Up @@ -100,7 +131,9 @@ export class ControllerDashboardOverviewPage extends DashboardPage {
.withItems([this._arcResourcesTable])
.component();

contentContainer.addItem(arcResourcesTableContainer);
this._arcResourcesLoadingComponent = this.modelView.modelBuilder.loadingComponent().withItem(arcResourcesTableContainer).component();

contentContainer.addItem(this._arcResourcesLoadingComponent);
this.initialized = true;
return rootContainer;
}
Expand All @@ -112,10 +145,9 @@ export class ControllerDashboardOverviewPage extends DashboardPage {
iconPath: IconPathHelper.add
}).component();

const deleteButton = this.modelView.modelBuilder.button().withProperties<azdata.ButtonProperties>({
label: loc.deleteText,
iconPath: IconPathHelper.delete
}).component();
createNewButton.onDidClick(async () => {
await vscode.commands.executeCommand('azdata.resource.deploy');
});

const openInAzurePortalButton = this.modelView.modelBuilder.button().withProperties<azdata.ButtonProperties>({
label: loc.openInAzurePortal,
Expand All @@ -134,54 +166,87 @@ export class ControllerDashboardOverviewPage extends DashboardPage {

return this.modelView.modelBuilder.toolbarContainer().withToolbarItems(
[
{ component: createNewButton },
{ component: deleteButton, toolbarSeparatorAfter: true },
{ component: createNewButton, toolbarSeparatorAfter: true },
{ component: openInAzurePortalButton }
]
).component();
}

private async handleRegistrationsUpdated(): Promise<void> {
const reg = this._controllerModel.controllerRegistration;
if (reg) {
this.controllerProperties.instanceName = reg?.instanceName || this.controllerProperties.instanceName;
this.controllerProperties.resourceGroupName = reg?.resourceGroupName || this.controllerProperties.resourceGroupName;
this.controllerProperties.location = (await getAzurecoreApi()).getRegionDisplayName(reg?.location) || this.controllerProperties.location;
this.controllerProperties.subscriptionId = reg?.subscriptionId || this.controllerProperties.subscriptionId;
this.controllerProperties.connectionMode = getConnectionModeDisplayText(reg?.connectionMode) || this.controllerProperties.connectionMode;
this.controllerProperties.instanceNamespace = reg?.instanceNamespace || this.controllerProperties.instanceNamespace;
this._registrationsRetrieved = true;
this.refreshDisplayedProperties();

this._arcResourcesTable.data = this._controllerModel.registrations
.filter(r => r.instanceType !== ResourceType.dataControllers)
.map(r => {
const iconPath = getResourceTypeIcon(r.instanceType ?? '');
const imageComponent = this.modelView.modelBuilder.image()
.withProperties<azdata.ImageComponentProperties>({
width: iconSize,
height: iconSize,
iconPath: iconPath,
iconHeight: iconSize,
iconWidth: iconSize
})
.component();
return [imageComponent, r.instanceName, resourceTypeToDisplayName(r.instanceType), r.vCores];
});
this._arcResourcesLoadingComponent.loading = false;
}

private handleEndpointsUpdated(endpoints: EndpointModel[]): void {
const controllerEndpoint = endpoints.find(endpoint => endpoint.name === Endpoints.controller);
this.controllerProperties.controllerEndpoint = controllerEndpoint?.endpoint || this.controllerProperties.controllerEndpoint;
this._endpointsRetrieved = true;
this.refreshDisplayedProperties();
}

private refreshDisplayedProperties(): void {
// Only update once we've retrieved all the necessary properties
if (this._endpointsRetrieved && this._registrationsRetrieved) {
this._propertiesContainer.propertyItems = [
{
displayName: loc.name,
value: reg.instanceName || '-'
value: this.controllerProperties.instanceName
},
{
displayName: loc.resourceGroup,
value: reg.resourceGroupName || '-'
value: this.controllerProperties.resourceGroupName
},
{
displayName: loc.region,
value: (await getAzurecoreApi()).getRegionDisplayName(reg.location) || '-'
value: this.controllerProperties.location
},
{
displayName: loc.subscriptionId,
value: reg.subscriptionId || '-'
value: this.controllerProperties.subscriptionId
},
{
displayName: loc.type,
value: loc.dataControllersType
},
{
displayName: loc.coordinatorEndpoint,
value: '-'
displayName: loc.controllerEndpoint,
value: this.controllerProperties.controllerEndpoint
},
{
displayName: loc.connectionMode,
value: reg.connectionMode || '-'
value: this.controllerProperties.connectionMode
},
{
displayName: loc.namespace,
value: reg.instanceNamespace || '-'
value: this.controllerProperties.instanceNamespace
}
];
this._propertiesLoadingComponent.loading = false;
}

this._arcResourcesTable.data = this._controllerModel.registrations
.filter(r => r.instanceType !== ResourceType.dataControllers)
.map(r => [r.instanceName, resourceTypeToDisplayName(r.instanceType), r.vCores]);
}
}
3 changes: 1 addition & 2 deletions extensions/arc/src/ui/dashboards/miaa/miaaConnectionStringsPage.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,10 @@

import * as azdata from 'azdata';
import * as loc from '../../../localizedConstants';
import { IconPathHelper, cssStyles } from '../../../constants';
import { IconPathHelper, cssStyles, ResourceType } from '../../../constants';
import { KeyValueContainer, KeyValue, InputKeyValue, MultilineInputKeyValue } from '../../components/keyValueContainer';
import { DashboardPage } from '../../components/dashboardPage';
import { ControllerModel, Registration } from '../../../models/controllerModel';
import { ResourceType } from '../../../common/utils';
import { MiaaModel } from '../../../models/miaaModel';

export class MiaaConnectionStringsPage extends DashboardPage {
Expand Down
4 changes: 2 additions & 2 deletions extensions/arc/src/ui/dashboards/miaa/miaaDashboardOverviewPage.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@
import * as azdata from 'azdata';
import * as loc from '../../../localizedConstants';
import { DashboardPage } from '../../components/dashboardPage';
import { IconPathHelper, cssStyles } from '../../../constants';
import { IconPathHelper, cssStyles, ResourceType } from '../../../constants';
import { ControllerModel, Registration } from '../../../models/controllerModel';
import { ResourceType, getAzurecoreApi } from '../../../common/utils';
import { getAzurecoreApi } from '../../../common/utils';
import { MiaaModel, DatabaseModel } from '../../../models/miaaModel';
import { HybridSqlNsNameGetResponse } from '../../../controller/generated/v1/model/hybridSqlNsNameGetResponse';
import { EndpointModel } from '../../../controller/generated/v1/api';
Expand Down
3 changes: 1 addition & 2 deletions extensions/arc/src/ui/dashboards/postgres/postgresOverviewPage.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,11 @@
import * as vscode from 'vscode';
import * as azdata from 'azdata';
import * as loc from '../../../localizedConstants';
import { IconPathHelper, cssStyles } from '../../../constants';
import { IconPathHelper, cssStyles, ResourceType } from '../../../constants';
import { DuskyObjectModelsDatabase, DuskyObjectModelsDatabaseServiceArcPayload, V1Pod } from '../../../controller/generated/dusky/api';
import { DashboardPage } from '../../components/dashboardPage';
import { ControllerModel } from '../../../models/controllerModel';
import { PostgresModel, PodRole } from '../../../models/postgresModel';
import { ResourceType } from '../../../common/utils';

export class PostgresOverviewPage extends DashboardPage {
private propertiesLoading?: azdata.LoadingComponent;
Expand Down
Loading

0 comments on commit c86f301

Please sign in to comment.