mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-02-10 02:02:35 -05:00
806 lines
24 KiB
TypeScript
806 lines
24 KiB
TypeScript
/*---------------------------------------------------------------------------------------------
|
|
* Copyright (c) Microsoft Corporation. All rights reserved.
|
|
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
|
*--------------------------------------------------------------------------------------------*/
|
|
|
|
import * as azdata from 'azdata';
|
|
import * as vscode from 'vscode';
|
|
import { IconPath, IconPathHelper } from '../constants/iconPathHelper';
|
|
import * as styles from '../constants/styles';
|
|
import * as loc from '../constants/strings';
|
|
import { filterMigrations, MenuCommands } from '../api/utils';
|
|
import { DatabaseMigration } from '../api/azure';
|
|
import { getCurrentMigrations, getSelectedServiceStatus, isServiceContextValid, MigrationLocalStorage } from '../models/migrationLocalStorage';
|
|
import { SelectMigrationServiceDialog } from '../dialog/selectMigrationService/selectMigrationServiceDialog';
|
|
import { logError, TelemetryViews } from '../telemtery';
|
|
import { AdsMigrationStatus, ServiceContextChangeEvent, TabBase } from './tabBase';
|
|
import { DashboardStatusBar } from './DashboardStatusBar';
|
|
|
|
interface IActionMetadata {
|
|
title?: string,
|
|
description?: string,
|
|
link?: string,
|
|
iconPath?: azdata.ThemedIconPath,
|
|
command?: string;
|
|
}
|
|
|
|
interface StatusCard {
|
|
container: azdata.DivContainer;
|
|
count: azdata.TextComponent,
|
|
textContainer?: azdata.FlexContainer,
|
|
warningContainer?: azdata.FlexContainer,
|
|
warningText?: azdata.TextComponent,
|
|
}
|
|
|
|
export const DashboardTabId = 'DashboardTab';
|
|
|
|
const maxWidth = 800;
|
|
const BUTTON_CSS = {
|
|
'font-size': '13px',
|
|
'line-height': '18px',
|
|
'margin': '4px 0',
|
|
'text-align': 'left',
|
|
};
|
|
|
|
export class DashboardTab extends TabBase<DashboardTab> {
|
|
private _migrationStatusCardsContainer!: azdata.FlexContainer;
|
|
private _migrationStatusCardLoadingContainer!: azdata.LoadingComponent;
|
|
private _inProgressMigrationButton!: StatusCard;
|
|
private _inProgressWarningMigrationButton!: StatusCard;
|
|
private _allMigrationButton!: StatusCard;
|
|
private _successfulMigrationButton!: StatusCard;
|
|
private _failedMigrationButton!: StatusCard;
|
|
private _completingMigrationButton!: StatusCard;
|
|
private _selectServiceText!: azdata.TextComponent;
|
|
private _serviceContextButton!: azdata.ButtonComponent;
|
|
private _refreshButton!: azdata.ButtonComponent;
|
|
|
|
constructor() {
|
|
super();
|
|
this.title = loc.DESKTOP_DASHBOARD_TAB_TITLE;
|
|
this.id = DashboardTabId;
|
|
this.icon = IconPathHelper.sqlMigrationLogo;
|
|
}
|
|
|
|
public async create(
|
|
view: azdata.ModelView,
|
|
openMigrationsFcn: (status: AdsMigrationStatus) => Promise<void>,
|
|
serviceContextChangedEvent: vscode.EventEmitter<ServiceContextChangeEvent>,
|
|
statusBar: DashboardStatusBar): Promise<DashboardTab> {
|
|
|
|
this.view = view;
|
|
this.openMigrationsFcn = openMigrationsFcn;
|
|
this.serviceContextChangedEvent = serviceContextChangedEvent;
|
|
this.statusBar = statusBar;
|
|
|
|
await this.initialize(this.view);
|
|
|
|
return this;
|
|
}
|
|
|
|
public async refresh(): Promise<void> {
|
|
if (this.isRefreshing || this._migrationStatusCardLoadingContainer === undefined) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
this.isRefreshing = true;
|
|
this._refreshButton.enabled = false;
|
|
this._migrationStatusCardLoadingContainer.loading = true;
|
|
await this.statusBar.clearError();
|
|
const migrations = await getCurrentMigrations();
|
|
|
|
const inProgressMigrations = filterMigrations(migrations, AdsMigrationStatus.ONGOING);
|
|
let warningCount = 0;
|
|
for (let i = 0; i < inProgressMigrations.length; i++) {
|
|
if (inProgressMigrations[i].properties.migrationFailureError?.message ||
|
|
inProgressMigrations[i].properties.migrationStatusDetails?.fileUploadBlockingErrors ||
|
|
inProgressMigrations[i].properties.migrationStatusDetails?.restoreBlockingReason) {
|
|
warningCount += 1;
|
|
}
|
|
}
|
|
if (warningCount > 0) {
|
|
this._inProgressWarningMigrationButton.warningText!.value = loc.MIGRATION_INPROGRESS_WARNING(warningCount);
|
|
this._inProgressMigrationButton.container.display = 'none';
|
|
this._inProgressWarningMigrationButton.container.display = '';
|
|
} else {
|
|
this._inProgressMigrationButton.container.display = '';
|
|
this._inProgressWarningMigrationButton.container.display = 'none';
|
|
}
|
|
|
|
this._inProgressMigrationButton.count.value = inProgressMigrations.length.toString();
|
|
this._inProgressWarningMigrationButton.count.value = inProgressMigrations.length.toString();
|
|
|
|
this._updateStatusCard(migrations, this._successfulMigrationButton, AdsMigrationStatus.SUCCEEDED, true);
|
|
this._updateStatusCard(migrations, this._failedMigrationButton, AdsMigrationStatus.FAILED);
|
|
this._updateStatusCard(migrations, this._completingMigrationButton, AdsMigrationStatus.COMPLETING);
|
|
this._updateStatusCard(migrations, this._allMigrationButton, AdsMigrationStatus.ALL, true);
|
|
|
|
await this._updateSummaryStatus();
|
|
} catch (e) {
|
|
await this.statusBar.showError(
|
|
loc.DASHBOARD_REFRESH_MIGRATIONS_TITLE,
|
|
loc.DASHBOARD_REFRESH_MIGRATIONS_LABEL,
|
|
e.message);
|
|
logError(TelemetryViews.SqlServerDashboard, 'RefreshgMigrationFailed', e);
|
|
} finally {
|
|
this._migrationStatusCardLoadingContainer.loading = false;
|
|
this._refreshButton.enabled = true;
|
|
this.isRefreshing = false;
|
|
}
|
|
}
|
|
|
|
protected async initialize(view: azdata.ModelView): Promise<void> {
|
|
const container = view.modelBuilder.flexContainer()
|
|
.withLayout({
|
|
flexFlow: 'column',
|
|
width: '100%',
|
|
height: '100%'
|
|
}).component();
|
|
|
|
const toolbar = view.modelBuilder.toolbarContainer();
|
|
toolbar.addToolbarItems([
|
|
<azdata.ToolbarComponent>{ component: this.createNewMigrationButton() },
|
|
<azdata.ToolbarComponent>{ component: this.createNewSupportRequestButton() },
|
|
<azdata.ToolbarComponent>{ component: this.createFeedbackButton() },
|
|
]);
|
|
|
|
container.addItem(
|
|
toolbar.component(),
|
|
{ CSSStyles: { 'flex': '0 0 auto' } });
|
|
|
|
const header = this._createHeader(view);
|
|
// Files need to have the vscode-file scheme to be loaded by ADS
|
|
const watermarkUri = vscode.Uri
|
|
.file(<string>IconPathHelper.migrationDashboardHeaderBackground.light)
|
|
.with({ scheme: 'vscode-file' });
|
|
|
|
container.addItem(header, {
|
|
CSSStyles: {
|
|
'background-image': `
|
|
url(${watermarkUri}),
|
|
linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%)`,
|
|
'background-repeat': 'no-repeat',
|
|
'background-position': '91.06% 100%',
|
|
'margin-bottom': '20px'
|
|
}
|
|
});
|
|
|
|
const tasksContainer = await this._createTasks(view);
|
|
header.addItem(tasksContainer, {
|
|
CSSStyles: {
|
|
'width': `${maxWidth}px`,
|
|
'margin': '24px'
|
|
}
|
|
});
|
|
container.addItem(
|
|
await this._createFooter(view),
|
|
{ CSSStyles: { 'margin': '0 24px' } });
|
|
|
|
this.content = container;
|
|
}
|
|
|
|
private _createHeader(view: azdata.ModelView): azdata.FlexContainer {
|
|
const header = view.modelBuilder.flexContainer()
|
|
.withLayout({
|
|
flexFlow: 'column',
|
|
width: maxWidth,
|
|
}).component();
|
|
const titleComponent = view.modelBuilder.text()
|
|
.withProps({
|
|
value: loc.DASHBOARD_TITLE,
|
|
width: '750px',
|
|
CSSStyles: { ...styles.DASHBOARD_TITLE_CSS }
|
|
}).component();
|
|
|
|
const descriptionComponent = view.modelBuilder.text()
|
|
.withProps({
|
|
value: loc.DASHBOARD_DESCRIPTION,
|
|
CSSStyles: { ...styles.NOTE_CSS }
|
|
}).component();
|
|
header.addItems([titleComponent, descriptionComponent], {
|
|
CSSStyles: {
|
|
'width': `${maxWidth}px`,
|
|
'padding-left': '24px'
|
|
}
|
|
});
|
|
return header;
|
|
}
|
|
|
|
private async _createTasks(view: azdata.ModelView): Promise<azdata.Component> {
|
|
const tasksContainer = view.modelBuilder.flexContainer()
|
|
.withLayout({
|
|
flexFlow: 'row',
|
|
width: '100%',
|
|
}).component();
|
|
|
|
const migrateButtonMetadata: IActionMetadata = {
|
|
title: loc.DASHBOARD_MIGRATE_TASK_BUTTON_TITLE,
|
|
description: loc.DASHBOARD_MIGRATE_TASK_BUTTON_DESCRIPTION,
|
|
iconPath: IconPathHelper.sqlMigrationLogo,
|
|
command: MenuCommands.StartMigration
|
|
};
|
|
|
|
const preRequisiteListTitle = view.modelBuilder.text()
|
|
.withProps({
|
|
value: loc.PRE_REQ_TITLE,
|
|
CSSStyles: {
|
|
...styles.BODY_CSS,
|
|
'margin': '0px',
|
|
}
|
|
}).component();
|
|
|
|
const migrateButton = this._createTaskButton(view, migrateButtonMetadata);
|
|
|
|
const preRequisiteListElement = view.modelBuilder.text()
|
|
.withProps({
|
|
value: [
|
|
loc.PRE_REQ_1,
|
|
loc.PRE_REQ_2,
|
|
loc.PRE_REQ_3,
|
|
loc.PRE_REQ_4,
|
|
],
|
|
CSSStyles: {
|
|
...styles.SMALL_NOTE_CSS,
|
|
'padding-left': '12px',
|
|
'margin': '-0.5em 0px',
|
|
}
|
|
}).component();
|
|
|
|
const preRequisiteLearnMoreLink = view.modelBuilder.hyperlink()
|
|
.withProps({
|
|
label: loc.LEARN_MORE,
|
|
ariaLabel: loc.LEARN_MORE_ABOUT_PRE_REQS,
|
|
url: 'https://aka.ms/azuresqlmigrationextension',
|
|
}).component();
|
|
|
|
const preReqContainer = view.modelBuilder.flexContainer()
|
|
.withItems([
|
|
preRequisiteListTitle,
|
|
preRequisiteListElement,
|
|
preRequisiteLearnMoreLink])
|
|
.withLayout({ flexFlow: 'column' })
|
|
.component();
|
|
|
|
tasksContainer.addItem(migrateButton, {});
|
|
tasksContainer.addItems(
|
|
[preReqContainer],
|
|
{ CSSStyles: { 'margin-left': '20px' } });
|
|
|
|
return tasksContainer;
|
|
}
|
|
|
|
private _createTaskButton(view: azdata.ModelView, taskMetaData: IActionMetadata): azdata.Component {
|
|
const maxHeight: number = 84;
|
|
const maxWidth: number = 236;
|
|
const buttonContainer = view.modelBuilder.button().withProps({
|
|
buttonType: azdata.ButtonType.Informational,
|
|
description: taskMetaData.description,
|
|
height: maxHeight,
|
|
iconHeight: 32,
|
|
iconPath: taskMetaData.iconPath,
|
|
iconWidth: 32,
|
|
label: taskMetaData.title,
|
|
title: taskMetaData.title,
|
|
width: maxWidth,
|
|
CSSStyles: {
|
|
'border': '1px solid',
|
|
'display': 'flex',
|
|
'flex-direction': 'column',
|
|
'justify-content': 'flex-start',
|
|
'border-radius': '4px',
|
|
'transition': 'all .5s ease',
|
|
}
|
|
}).component();
|
|
this.disposables.push(
|
|
buttonContainer.onDidClick(async () => {
|
|
if (taskMetaData.command) {
|
|
await vscode.commands.executeCommand(taskMetaData.command);
|
|
}
|
|
}));
|
|
return view.modelBuilder.divContainer().withItems([buttonContainer]).component();
|
|
}
|
|
|
|
private async _createFooter(view: azdata.ModelView): Promise<azdata.Component> {
|
|
const footerContainer = view.modelBuilder.flexContainer().withLayout({
|
|
flexFlow: 'row',
|
|
width: maxWidth,
|
|
justifyContent: 'flex-start'
|
|
}).component();
|
|
const statusContainer = await this._createMigrationStatusContainer(view);
|
|
const videoLinksContainer = this._createVideoLinks(view);
|
|
footerContainer.addItem(statusContainer);
|
|
footerContainer.addItem(
|
|
videoLinksContainer,
|
|
{ CSSStyles: { 'padding-left': '8px', } });
|
|
|
|
return footerContainer;
|
|
}
|
|
|
|
private _createVideoLinks(view: azdata.ModelView): azdata.Component {
|
|
const linksContainer = view.modelBuilder.flexContainer()
|
|
.withLayout({
|
|
flexFlow: 'column',
|
|
width: '440px',
|
|
height: '436px',
|
|
justifyContent: 'flex-start',
|
|
}).withProps({
|
|
CSSStyles: {
|
|
'border': '1px solid rgba(0, 0, 0, 0.1)',
|
|
'padding': '10px',
|
|
'overflow': 'scroll',
|
|
}
|
|
}).component();
|
|
|
|
const titleComponent = view.modelBuilder.text()
|
|
.withProps({
|
|
value: loc.HELP_TITLE,
|
|
CSSStyles: { ...styles.SECTION_HEADER_CSS }
|
|
})
|
|
.component();
|
|
|
|
linksContainer.addItems(
|
|
[titleComponent],
|
|
{ CSSStyles: { 'margin-bottom': '16px' } });
|
|
|
|
const links = [
|
|
{
|
|
title: loc.DASHBOARD_HELP_LINK_MIGRATE_USING_ADS,
|
|
description: loc.DASHBOARD_HELP_DESCRIPTION_MIGRATE_USING_ADS,
|
|
link: 'https://docs.microsoft.com/azure/dms/migration-using-azure-data-studio'
|
|
},
|
|
{
|
|
title: loc.DASHBOARD_HELP_LINK_MI_TUTORIAL,
|
|
description: loc.DASHBOARD_HELP_DESCRIPTION_MI_TUTORIAL,
|
|
link: 'https://docs.microsoft.com/azure/dms/tutorial-sql-server-managed-instance-online-ads'
|
|
},
|
|
{
|
|
title: loc.DASHBOARD_HELP_LINK_VM_TUTORIAL,
|
|
description: loc.DASHBOARD_HELP_DESCRIPTION_VMTUTORIAL,
|
|
link: 'https://docs.microsoft.com/azure/dms/tutorial-sql-server-to-virtual-machine-online-ads'
|
|
},
|
|
{
|
|
title: loc.DASHBOARD_HELP_LINK_SQLDB_TUTORIAL,
|
|
description: loc.DASHBOARD_HELP_DESCRIPTION_SQLDBTUTORIAL,
|
|
link: 'https://docs.microsoft.com/azure/dms/tutorial-sql-server-to-sql-db-offline-ads'
|
|
},
|
|
{
|
|
title: loc.DASHBOARD_HELP_LINK_DMS_GUIDE,
|
|
description: loc.DASHBOARD_HELP_DESCRIPTION_DMS_GUIDE,
|
|
link: 'https://docs.microsoft.com/data-migration/'
|
|
},
|
|
];
|
|
|
|
linksContainer.addItems(links.map(l => this._createLink(view, l)), {});
|
|
|
|
const videoLinks: IActionMetadata[] = [];
|
|
const videosContainer = view.modelBuilder.flexContainer()
|
|
.withLayout({
|
|
flexFlow: 'row',
|
|
width: maxWidth,
|
|
}).component();
|
|
videosContainer.addItems(videoLinks.map(l => this._createVideoLink(view, l)), {});
|
|
linksContainer.addItem(videosContainer);
|
|
|
|
return linksContainer;
|
|
}
|
|
|
|
private _createLink(view: azdata.ModelView, linkMetaData: IActionMetadata): azdata.Component {
|
|
const maxWidth = 400;
|
|
const labelsContainer = view.modelBuilder.flexContainer()
|
|
.withProps({
|
|
CSSStyles: {
|
|
'flex-direction': 'column',
|
|
'width': `${maxWidth}px`,
|
|
'justify-content': 'flex-start',
|
|
'margin-bottom': '12px'
|
|
}
|
|
}).component();
|
|
const linkContainer = view.modelBuilder.flexContainer()
|
|
.withProps({
|
|
CSSStyles: {
|
|
'flex-direction': 'row',
|
|
'width': `${maxWidth}px`,
|
|
'justify-content': 'flex-start',
|
|
'margin-bottom': '4px'
|
|
}
|
|
|
|
}).component();
|
|
const descriptionComponent = view.modelBuilder.text()
|
|
.withProps({
|
|
value: linkMetaData.description,
|
|
width: maxWidth,
|
|
CSSStyles: { ...styles.NOTE_CSS }
|
|
}).component();
|
|
const linkComponent = view.modelBuilder.hyperlink()
|
|
.withProps({
|
|
label: linkMetaData.title!,
|
|
url: linkMetaData.link!,
|
|
showLinkIcon: true,
|
|
CSSStyles: { ...styles.BODY_CSS }
|
|
}).component();
|
|
linkContainer.addItem(linkComponent);
|
|
labelsContainer.addItems([linkContainer, descriptionComponent]);
|
|
return labelsContainer;
|
|
}
|
|
|
|
private _createVideoLink(view: azdata.ModelView, linkMetaData: IActionMetadata): azdata.Component {
|
|
const maxWidth = 150;
|
|
const videosContainer = view.modelBuilder.flexContainer()
|
|
.withLayout({
|
|
flexFlow: 'column',
|
|
width: maxWidth,
|
|
justifyContent: 'flex-start'
|
|
}).component();
|
|
const video1Container = view.modelBuilder.divContainer()
|
|
.withProps({
|
|
clickable: true,
|
|
width: maxWidth,
|
|
height: '100px'
|
|
}).component();
|
|
const descriptionComponent = view.modelBuilder.text()
|
|
.withProps({
|
|
value: linkMetaData.description,
|
|
width: maxWidth,
|
|
height: '50px',
|
|
CSSStyles: { ...styles.BODY_CSS }
|
|
}).component();
|
|
this.disposables.push(
|
|
video1Container.onDidClick(async () => {
|
|
if (linkMetaData.link) {
|
|
await vscode.env.openExternal(vscode.Uri.parse(linkMetaData.link));
|
|
}
|
|
}));
|
|
videosContainer.addItem(video1Container, {
|
|
CSSStyles: {
|
|
'background-image': `url(${vscode.Uri.file(<string>linkMetaData.iconPath?.light)})`,
|
|
'background-repeat': 'no-repeat',
|
|
'background-position': 'top',
|
|
'width': `${maxWidth}px`,
|
|
'height': '104px',
|
|
'background-size': `${maxWidth}px 120px`
|
|
}
|
|
});
|
|
videosContainer.addItem(descriptionComponent);
|
|
return videosContainer;
|
|
}
|
|
|
|
private _createStatusCard(
|
|
view: azdata.ModelView,
|
|
cardIconPath: IconPath,
|
|
cardTitle: string,
|
|
hasSubtext: boolean = false
|
|
): StatusCard {
|
|
const buttonWidth = '400px';
|
|
const buttonHeight = hasSubtext ? '70px' : '50px';
|
|
const statusCard = view.modelBuilder.flexContainer()
|
|
.withProps({
|
|
CSSStyles: {
|
|
'width': buttonWidth,
|
|
'height': buttonHeight,
|
|
'align-items': 'center',
|
|
}
|
|
}).component();
|
|
|
|
const statusIcon = view.modelBuilder.image()
|
|
.withProps({
|
|
iconPath: cardIconPath!.light,
|
|
iconHeight: 24,
|
|
iconWidth: 24,
|
|
height: 32,
|
|
CSSStyles: { 'margin': '0 8px' }
|
|
}).component();
|
|
|
|
const textContainer = view.modelBuilder.flexContainer()
|
|
.withLayout({ flexFlow: 'column' })
|
|
.component();
|
|
|
|
const cardTitleText = view.modelBuilder.text()
|
|
.withProps({ value: cardTitle })
|
|
.withProps({
|
|
CSSStyles: {
|
|
...styles.SECTION_HEADER_CSS,
|
|
'width': '240px',
|
|
}
|
|
}).component();
|
|
textContainer.addItem(cardTitleText);
|
|
|
|
const cardCount = view.modelBuilder.text()
|
|
.withProps({
|
|
value: '0',
|
|
CSSStyles: {
|
|
...styles.BIG_NUMBER_CSS,
|
|
'margin': '0 0 0 8px',
|
|
'text-align': 'center',
|
|
}
|
|
}).component();
|
|
|
|
let warningContainer;
|
|
let warningText;
|
|
if (hasSubtext) {
|
|
const warningIcon = view.modelBuilder.image()
|
|
.withProps({
|
|
iconPath: IconPathHelper.warning,
|
|
iconWidth: 12,
|
|
iconHeight: 12,
|
|
width: 12,
|
|
height: 18,
|
|
}).component();
|
|
|
|
const warningDescription = '';
|
|
warningText = view.modelBuilder.text()
|
|
.withProps({
|
|
value: warningDescription,
|
|
CSSStyles: {
|
|
...styles.BODY_CSS,
|
|
'padding-left': '8px',
|
|
}
|
|
}).component();
|
|
|
|
warningContainer = view.modelBuilder.flexContainer()
|
|
.withItems(
|
|
[warningIcon, warningText],
|
|
{ flex: '0 0 auto' })
|
|
.withProps({ CSSStyles: { 'align-items': 'center' } })
|
|
.component();
|
|
|
|
textContainer.addItem(warningContainer);
|
|
}
|
|
|
|
statusCard.addItems([
|
|
statusIcon,
|
|
textContainer,
|
|
cardCount,
|
|
]);
|
|
|
|
const compositeButton = view.modelBuilder.divContainer()
|
|
.withItems([statusCard])
|
|
.withProps({
|
|
ariaRole: 'button',
|
|
ariaLabel: loc.SHOW_STATUS,
|
|
clickable: true,
|
|
CSSStyles: {
|
|
'height': buttonHeight,
|
|
'margin-bottom': '16px',
|
|
'border': '1px solid',
|
|
'display': 'flex',
|
|
'flex-direction': 'column',
|
|
'justify-content': 'flex-start',
|
|
'border-radius': '4px',
|
|
'transition': 'all .5s ease',
|
|
}
|
|
}).component();
|
|
return {
|
|
container: compositeButton,
|
|
count: cardCount,
|
|
textContainer: textContainer,
|
|
warningContainer: warningContainer,
|
|
warningText: warningText
|
|
};
|
|
}
|
|
|
|
private async _createMigrationStatusContainer(view: azdata.ModelView): Promise<azdata.FlexContainer> {
|
|
const statusContainer = view.modelBuilder.flexContainer()
|
|
.withLayout({
|
|
flexFlow: 'column',
|
|
width: '400px',
|
|
height: '436px',
|
|
justifyContent: 'flex-start',
|
|
})
|
|
.withProps({
|
|
CSSStyles: {
|
|
'border': '1px solid rgba(0, 0, 0, 0.1)',
|
|
'padding': '10px',
|
|
}
|
|
})
|
|
.component();
|
|
|
|
const statusContainerTitle = view.modelBuilder.text()
|
|
.withProps({
|
|
value: loc.DATABASE_MIGRATION_STATUS,
|
|
width: '100%',
|
|
CSSStyles: { ...styles.SECTION_HEADER_CSS }
|
|
}).component();
|
|
|
|
this._refreshButton = view.modelBuilder.button()
|
|
.withProps({
|
|
label: loc.REFRESH,
|
|
iconPath: IconPathHelper.refresh,
|
|
iconHeight: 16,
|
|
iconWidth: 16,
|
|
width: 70,
|
|
CSSStyles: { 'float': 'right' }
|
|
}).component();
|
|
|
|
const statusHeadingContainer = view.modelBuilder.flexContainer()
|
|
.withItems([
|
|
statusContainerTitle,
|
|
this._refreshButton,
|
|
]).withLayout({
|
|
alignContent: 'center',
|
|
alignItems: 'center',
|
|
flexFlow: 'row',
|
|
}).component();
|
|
|
|
this.disposables.push(
|
|
this._refreshButton.onDidClick(
|
|
async (e) => await this.refresh()));
|
|
|
|
const buttonContainer = view.modelBuilder.flexContainer()
|
|
.withProps({
|
|
CSSStyles: {
|
|
'justify-content': 'left',
|
|
'align-iems': 'center',
|
|
},
|
|
})
|
|
.component();
|
|
|
|
buttonContainer.addItem(
|
|
await this._createServiceSelector(view));
|
|
|
|
this._selectServiceText = view.modelBuilder.text()
|
|
.withProps({
|
|
value: loc.SELECT_SERVICE_MESSAGE,
|
|
CSSStyles: {
|
|
'font-size': '12px',
|
|
'margin': '10px',
|
|
'font-weight': '350',
|
|
'text-align': 'center',
|
|
'display': 'none'
|
|
}
|
|
}).component();
|
|
|
|
const header = view.modelBuilder.flexContainer()
|
|
.withItems([statusHeadingContainer, buttonContainer])
|
|
.withLayout({ flexFlow: 'column', })
|
|
.component();
|
|
|
|
this._migrationStatusCardsContainer = view.modelBuilder.flexContainer()
|
|
.withLayout({
|
|
flexFlow: 'column',
|
|
height: '272px',
|
|
})
|
|
.withProps({ CSSStyles: { 'overflow': 'hidden auto' } })
|
|
.component();
|
|
|
|
await this._updateSummaryStatus();
|
|
|
|
// in progress
|
|
this._inProgressMigrationButton = this._createStatusCard(
|
|
view,
|
|
IconPathHelper.inProgressMigration,
|
|
loc.MIGRATION_IN_PROGRESS);
|
|
this.disposables.push(
|
|
this._inProgressMigrationButton.container.onDidClick(
|
|
async (e) => await this.openMigrationsFcn(AdsMigrationStatus.ONGOING)));
|
|
this._migrationStatusCardsContainer.addItem(
|
|
this._inProgressMigrationButton.container,
|
|
{ flex: '0 0 auto' });
|
|
|
|
// in progress warning
|
|
this._inProgressWarningMigrationButton = this._createStatusCard(
|
|
view,
|
|
IconPathHelper.inProgressMigration,
|
|
loc.MIGRATION_IN_PROGRESS,
|
|
true);
|
|
this.disposables.push(
|
|
this._inProgressWarningMigrationButton.container.onDidClick(
|
|
async (e) => await this.openMigrationsFcn(AdsMigrationStatus.ONGOING)));
|
|
this._migrationStatusCardsContainer.addItem(
|
|
this._inProgressWarningMigrationButton.container,
|
|
{ flex: '0 0 auto' });
|
|
|
|
// successful
|
|
this._successfulMigrationButton = this._createStatusCard(
|
|
view,
|
|
IconPathHelper.completedMigration,
|
|
loc.MIGRATION_COMPLETED);
|
|
this.disposables.push(
|
|
this._successfulMigrationButton.container.onDidClick(
|
|
async (e) => await this.openMigrationsFcn(AdsMigrationStatus.SUCCEEDED)));
|
|
this._migrationStatusCardsContainer.addItem(
|
|
this._successfulMigrationButton.container,
|
|
{ flex: '0 0 auto' });
|
|
|
|
// completing
|
|
this._completingMigrationButton = this._createStatusCard(
|
|
view,
|
|
IconPathHelper.completingCutover,
|
|
loc.MIGRATION_CUTOVER_CARD);
|
|
this.disposables.push(
|
|
this._completingMigrationButton.container.onDidClick(
|
|
async (e) => await this.openMigrationsFcn(AdsMigrationStatus.COMPLETING)));
|
|
this._migrationStatusCardsContainer.addItem(
|
|
this._completingMigrationButton.container,
|
|
{ flex: '0 0 auto' });
|
|
|
|
// failed
|
|
this._failedMigrationButton = this._createStatusCard(
|
|
view,
|
|
IconPathHelper.error,
|
|
loc.MIGRATION_FAILED);
|
|
this.disposables.push(
|
|
this._failedMigrationButton.container.onDidClick(
|
|
async (e) => await this.openMigrationsFcn(AdsMigrationStatus.FAILED)));
|
|
this._migrationStatusCardsContainer.addItem(
|
|
this._failedMigrationButton.container,
|
|
{ flex: '0 0 auto' });
|
|
|
|
// all migrations
|
|
this._allMigrationButton = this._createStatusCard(
|
|
view,
|
|
IconPathHelper.view,
|
|
loc.VIEW_ALL);
|
|
this.disposables.push(
|
|
this._allMigrationButton.container.onDidClick(
|
|
async (e) => await this.openMigrationsFcn(AdsMigrationStatus.ALL)));
|
|
this._migrationStatusCardsContainer.addItem(
|
|
this._allMigrationButton.container,
|
|
{ flex: '0 0 auto' });
|
|
|
|
this._migrationStatusCardLoadingContainer = view.modelBuilder.loadingComponent()
|
|
.withItem(this._migrationStatusCardsContainer)
|
|
.component();
|
|
statusContainer.addItem(header, { CSSStyles: { 'margin-bottom': '10px' } });
|
|
statusContainer.addItem(this._selectServiceText, {});
|
|
statusContainer.addItem(this._migrationStatusCardLoadingContainer, {});
|
|
return statusContainer;
|
|
}
|
|
|
|
private async _createServiceSelector(view: azdata.ModelView): Promise<azdata.Component> {
|
|
const serviceContextLabel = await getSelectedServiceStatus();
|
|
this._serviceContextButton = view.modelBuilder.button()
|
|
.withProps({
|
|
iconPath: IconPathHelper.sqlMigrationService,
|
|
iconHeight: 22,
|
|
iconWidth: 22,
|
|
label: serviceContextLabel,
|
|
title: serviceContextLabel,
|
|
description: loc.MIGRATION_SERVICE_DESCRIPTION,
|
|
buttonType: azdata.ButtonType.Informational,
|
|
width: 375,
|
|
CSSStyles: { ...BUTTON_CSS },
|
|
})
|
|
.component();
|
|
|
|
const connectionProfile = await azdata.connection.getCurrentConnection();
|
|
this.disposables.push(
|
|
this.serviceContextChangedEvent.event(
|
|
async (e) => {
|
|
if (e.connectionId === connectionProfile.connectionId) {
|
|
await this.updateServiceContext(this._serviceContextButton);
|
|
await this.refresh();
|
|
}
|
|
}
|
|
));
|
|
await this.updateServiceContext(this._serviceContextButton);
|
|
|
|
this.disposables.push(
|
|
this._serviceContextButton.onDidClick(async () => {
|
|
const dialog = new SelectMigrationServiceDialog(this.serviceContextChangedEvent);
|
|
await dialog.initialize();
|
|
}));
|
|
|
|
return this._serviceContextButton;
|
|
}
|
|
|
|
private _updateStatusCard(
|
|
migrations: DatabaseMigration[],
|
|
card: StatusCard,
|
|
status: AdsMigrationStatus,
|
|
show?: boolean): void {
|
|
const list = filterMigrations(migrations, status);
|
|
const count = list?.length || 0;
|
|
card.container.display = count > 0 || show ? '' : 'none';
|
|
card.count.value = count.toString();
|
|
}
|
|
|
|
private async _updateSummaryStatus(): Promise<void> {
|
|
const serviceContext = await MigrationLocalStorage.getMigrationServiceContext();
|
|
const isContextValid = isServiceContextValid(serviceContext);
|
|
await this._selectServiceText.updateCssStyles({ 'display': isContextValid ? 'none' : 'block' });
|
|
await this._migrationStatusCardsContainer.updateCssStyles({ 'visibility': isContextValid ? 'visible' : 'hidden' });
|
|
this._refreshButton.enabled = isContextValid;
|
|
}
|
|
}
|