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

Initial changes for reusable QDS report (#23527)

Browse Source 
* initial changes for making a QDS report with placeholders

* Add icon for configure button

* Add another example report to show layout

* move files

* add placeholder names to components and cleanup toolbar

* cleanup

* switch to createViews() instead of createTop and BottomSections()

* add QueryStoreView class for the different components in a report

* cleanup

* add more comments

* fix yarn not running for query store extension folder

* add missing break

* change one more view to container
This commit is contained in:
Kim Santiago
2023-06-29 13:24:22 -10:00
committed by GitHub
parent cf607e98a1
commit 220b2b4ac4
12 changed files with 379 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
extensions/query-store/src/common/constants.ts Normal file
View File

@@ -0,0 +1,23 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import * as nls from 'vscode-nls';
const localize = nls.loadMessageBundle();
export const overallResourceConsumption = localize('overallResourceConsumption', "Overall Resource Consumption");
export const duration = localize('duration', "Duration");
export const executionCount = localize('executionCount', "Execution Count");
export const cpuTime = localize('cpuTime', "CPU Time");
export const logicalReads = localize('logicalReads', "Logical Reads");
export function overallResourceConsumptionToolbarLabel(databaseName: string): string { return localize('overallResourceConsumptionToolbarLabel', "Overall resource consumption for database {0}", databaseName); }
export const topResourceConsumingQueries = localize('topResourceConsumingQueries', "Top Resource Consuming Queries");
export const queries = localize('queries', "Queries");
export function planSummary(queryId: string): string { return localize('planSummary', "Plan Summary for query {0}", queryId); }
export function plan(queryId: string): string { return localize('plan', "Plan {0}", queryId); }
export function topResourceConsumingQueriesToolbarLabel(databaseName: string): string { return localize('topResourceConsumingQueriesToolbarLabel', "Top 25 resource consumers for database {0}", databaseName); }
export const configure = localize('configure', "Configure");

78
extensions/query-store/src/common/utils.ts Normal file
View File

@@ -0,0 +1,78 @@
/*---------------------------------------------------------------------------------------------
* 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';
/**
* Creates a flex container with the provided component and sets the background color
* TODO: Remove/redo this helper function after chart components are hooked up, when background color is no longer used
* @param view
* @param component
* @param backgroundColor
* @returns Flex container with the specified background color containing component
*/
export async function createOneComponentFlexContainer(view: azdata.ModelView, component: azdata.Component, backgroundColor: string): Promise<azdata.FlexContainer> {
const flexContainer = view.modelBuilder.flexContainer().component();
await flexContainer.updateCssStyles({ 'background-color': backgroundColor });
flexContainer.addItem(component);
flexContainer.setLayout({
width: '100%',
height: '100%'
});
return flexContainer;
}
/**
* Creates a flex container with two components, either horizontally or vertically based on the passed in flexFlow
* @param view
* @param firstComponent
* @param secondComponent
* @param flexFlow row or column
* @returns Flex container containing the two components
*/
export async function createTwoComponentFlexContainer(view: azdata.ModelView, firstComponent: azdata.Component, secondComponent: azdata.Component, flexFlow: string): Promise<azdata.FlexContainer> {
const flexContainer = view.modelBuilder.flexContainer().component();
if (flexFlow === 'row') {
flexContainer.addItems([firstComponent, secondComponent], { CSSStyles: { 'width': '50%' } });
} else {
flexContainer.addItems([firstComponent, secondComponent], { CSSStyles: { 'height': '50%' } });
}
flexContainer.setLayout({
flexFlow: flexFlow,
width: '100%',
height: '100%'
});
return flexContainer;
}
/**
* Creates a vertical splitview
* @param view
* @param topComponent
* @param bottomComponent
* @param splitViewHeight
* @returns Vertical SplitViewContainer with the top and bottom components
*/
export function createVerticalSplitView(view: azdata.ModelView, topComponent: azdata.Component, bottomComponent: azdata.Component, splitViewHeight: number): azdata.SplitViewContainer {
// TODO: figure out why the horizontal spliview isn't working
const splitview = <azdata.SplitViewContainer>view.modelBuilder.splitViewContainer().component();
splitview.addItem(topComponent);
splitview.addItem(bottomComponent);
splitview.setLayout({
orientation: 'vertical',
splitViewHeight: splitViewHeight
});
return splitview;
}