ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 10:58:30 -05:00
Code Issues Packages Projects Releases Wiki Activity

More arc controller dashboard updates (#10949)

Browse Source
This commit is contained in:
Charles Gagnon
2020-06-17 07:50:10 -07:00
committed by GitHub
parent 691985af2d
commit c86f301e0e
13 changed files with 169 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
extensions/arc/images/miaa.svg Normal file
View File

@@ -0,0 +1,21 @@
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<defs>
<linearGradient id="ef376e2c-38fd-4835-83bc-bb24ee960fff" x1="6.267" y1="13.967" x2="6.267" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#949494"/>
<stop offset="1" stop-color="#b3b3b3"/>
</linearGradient>
<linearGradient id="e033a847-5835-46c3-85cf-d40f22eafd80" x1="10.135" y1="14.02" x2="10.135" y2="5.219" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#0078d4"/>
<stop offset="1" stop-color="#5ea0ef"/>
</linearGradient>
</defs>
<g id="f77d0813-503e-4294-a8a2-c0c5e582bfd9">
<path d="M17.549,15.146c-.16.7-1.035,1.391-2.617,1.929a21.585,21.585,0,0,1-12.125.017C1.35,16.578.564,15.922.441,15.25c-.022-.118,0-1.966,0-1.966l17.136-.16S17.569,15.061,17.549,15.146Z" fill="#5ea0ef"/>
<ellipse cx="9.001" cy="13.246" rx="8.576" ry="2.965" transform="translate(-0.133 0.091) rotate(-0.575)" fill="#50e6ff"/>
<path d="M10.368,13.491a.484.484,0,0,1-.476.476H2.641a.476.476,0,0,1-.476-.476V.476A.468.468,0,0,1,2.624,0H9.892a.476.476,0,0,1,.476.476Z" fill="url(#ef376e2c-38fd-4835-83bc-bb24ee960fff)"/>
<path d="M3.368,4.895a.893.893,0,0,1,.886-.885H8.347a.893.893,0,0,1,.918.868v.017h0a.9.9,0,0,1-.894.9H4.254A.893.893,0,0,1,3.368,4.895Zm.886-1.754h4.11a.893.893,0,0,0,.9-.885h0a.226.226,0,0,0,0-.026.893.893,0,0,0-.918-.868H4.254a.89.89,0,0,0,0,1.779Z" fill="#003067"/>
<path d="M4.3,1.654a.6.6,0,1,1-.6.6A.6.6,0,0,1,4.3,1.654ZM3.7,4.895a.6.6,0,1,0,.6-.6A.6.6,0,0,0,3.7,4.895Z" fill="#50e6ff"/>
<path d="M16.366,11.252a2.806,2.806,0,0,0-2.431-2.689A3.524,3.524,0,0,0,10.3,5.221,3.611,3.611,0,0,0,6.843,7.543,3.342,3.342,0,0,0,3.9,10.76a3.39,3.39,0,0,0,3.508,3.257h6.174A2.831,2.831,0,0,0,16.366,11.252Z" fill="url(#e033a847-5835-46c3-85cf-d40f22eafd80)"/>
<path d="M13.117,11.562V8.755H12.34V12.2h2.047v-.634ZM7.186,10.183a1.852,1.852,0,0,1-.426-.259.368.368,0,0,1-.1-.267.286.286,0,0,1,.126-.251.555.555,0,0,1,.351-.1,1.387,1.387,0,0,1,.835.242V8.83a2.4,2.4,0,0,0-.835-.125,1.41,1.41,0,0,0-.911.275.92.92,0,0,0-.342.744,1.117,1.117,0,0,0,.785,1,2.089,2.089,0,0,1,.509.3.353.353,0,0,1,.126.267.286.286,0,0,1-.126.251.631.631,0,0,1-.376.1,1.358,1.358,0,0,1-.9-.351v.769a1.889,1.889,0,0,0,.861.192,1.589,1.589,0,0,0,.96-.234.9.9,0,0,0,.36-.76.837.837,0,0,0-.209-.585A1.972,1.972,0,0,0,7.186,10.183ZM11.5,11.5a1.977,1.977,0,0,0,.276-1.053,1.91,1.91,0,0,0-.209-.935,1.474,1.474,0,0,0-.576-.618A1.619,1.619,0,0,0,10.1,8.68a1.844,1.844,0,0,0-.835.242,1.562,1.562,0,0,0-.61.643,2.114,2.114,0,0,0-.226.952,1.888,1.888,0,0,0,.2.877,1.567,1.567,0,0,0,.568.619,1.674,1.674,0,0,0,.835.242l.71.835h1l-.994-.919A1.515,1.515,0,0,0,11.5,11.5Zm-.777-.209a.818.818,0,0,1-1.261-.008,1.254,1.254,0,0,1-.234-.836,1.221,1.221,0,0,1,.242-.835.769.769,0,0,1,.643-.309.72.72,0,0,1,.619.309,1.288,1.288,0,0,1,.234.835A1.228,1.228,0,0,1,10.719,11.294Z" fill="#f2f2f2"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

27
extensions/arc/src/common/utils.ts
View File

@@ -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
@@ -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
extensions/arc/src/constants.ts
View File

@@ -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;
@@ -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
extensions/arc/src/localizedConstants.ts
View File

@@ -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");
@@ -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");

3
extensions/arc/src/models/controllerModel.ts
View File

@@ -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;

2
extensions/arc/src/models/postgresModel.ts
View File

@@ -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;
}
/**

3
extensions/arc/src/test/common/utils.test.ts
View File

@@ -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 {

109
extensions/arc/src/ui/dashboards/controller/controllerDashboardOverviewPage.ts
View File

@@ -7,16 +7,33 @@ 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[]) => {
@@ -24,6 +41,11 @@ export class ControllerDashboardOverviewPage extends DashboardPage {
this.handleRegistrationsUpdated().catch(e => console.log(e));
});
});
this._controllerModel.onEndpointsUpdated(endpoints => {
this.eventuallyRunOnInitialized(() => {
this.handleEndpointsUpdated(endpoints);
});
});
this.refresh().catch(e => {
console.log(e);
});
@@ -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 })
@@ -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,
@@ -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;
}
@@ -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,
@@ -134,8 +166,7 @@ export class ControllerDashboardOverviewPage extends DashboardPage {
return this.modelView.modelBuilder.toolbarContainer().withToolbarItems(
[
{ component: createNewButton },
{ component: deleteButton, toolbarSeparatorAfter: true },
{ component: createNewButton, toolbarSeparatorAfter: true },
{ component: openInAzurePortalButton }
]
).component();
@@ -143,45 +174,79 @@ export class ControllerDashboardOverviewPage extends DashboardPage {
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
extensions/arc/src/ui/dashboards/miaa/miaaConnectionStringsPage.ts
View File

@@ -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 {

4
extensions/arc/src/ui/dashboards/miaa/miaaDashboardOverviewPage.ts
View File

@@ -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';

3
extensions/arc/src/ui/dashboards/postgres/postgresOverviewPage.ts
View File

@@ -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;

3
extensions/arc/src/ui/dashboards/postgres/postgresPropertiesPage.ts
View File

@@ -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 { KeyValueContainer, InputKeyValue, LinkKeyValue, TextKeyValue } from '../../components/keyValueContainer';
import { DashboardPage } from '../../components/dashboardPage';
import { ControllerModel } from '../../../models/controllerModel';
import { PostgresModel } from '../../../models/postgresModel';
import { ResourceType } from '../../../common/utils';
export class PostgresPropertiesPage extends DashboardPage {
private keyValueContainer?: KeyValueContainer;

3
extensions/arc/src/ui/dashboards/postgres/postgresSupportRequestPage.ts
View File

@@ -6,11 +6,10 @@
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 { DashboardPage } from '../../components/dashboardPage';
import { ControllerModel } from '../../../models/controllerModel';
import { PostgresModel } from '../../../models/postgresModel';
import { ResourceType } from '../../../common/utils';
export class PostgresSupportRequestPage extends DashboardPage {
constructor(protected modelView: azdata.ModelView, private _controllerModel: ControllerModel, private _postgresModel: PostgresModel) {