additional spacing added for teams client

This commit is contained in:
Kinga Kazala 2023-08-10 16:21:06 +02:00
parent 55f3113b10
commit 33b56479a8
9 changed files with 47 additions and 39 deletions

View File

@ -198,6 +198,11 @@ All permissions are granted to the whole tenant and not to a specific applicatio
- `f5c26e74-f226-4ae8-85f0-b4af0080ac9e` Application Insights API - `f5c26e74-f226-4ae8-85f0-b4af0080ac9e` Application Insights API
- `797f4846-ba00-4fd7-ba43-dac1f8f63013` Windows Azure Service Management API - `797f4846-ba00-4fd7-ba43-dac1f8f63013` Windows Azure Service Management API
#### Developer resources
- [Build your first app with SPFx (Teams)](https://learn.microsoft.com/en-us/microsoftteams/platform/sbs-gs-spfx?tabs=vscode%2Cviscode)
- [Microsoft 365 Developer Proxy](https://github.com/microsoft/m365-developer-proxy)
## Disclaimer ## Disclaimer
**THIS CODE IS PROVIDED _AS IS_ WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** **THIS CODE IS PROVIDED _AS IS_ WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**

View File

@ -2,8 +2,9 @@
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json", "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": { "solution": {
"name": "Application Insights and Cost Management dashboards", "name": "Application Insights and Cost Management dashboards",
"iconPath": "assets/appLogo.png",
"id": "09af0554-67db-4a65-baa6-872dee7117a8", "id": "09af0554-67db-4a65-baa6-872dee7117a8",
"version": "1.0.0.0", "version": "1.0.1.0",
"includeClientSideAssets": true, "includeClientSideAssets": true,
"skipFeatureDeployment": true, "skipFeatureDeployment": true,
"isDomainIsolated": false, "isDomainIsolated": false,
@ -16,14 +17,6 @@
"resource": "Application Insights API", "resource": "Application Insights API",
"scope": "user_impersonation" "scope": "user_impersonation"
} }
// {
// "resource": "Microsoft Graph", //Microsoft Graph
// "scope": "user_impersonation"
// },
// {
// "resource": "Office 365 SharePoint Online", //Office 365 SharePoint Online
// "scope": "user_impersonation"
// }
], ],
"developer": { "developer": {
"name": "Kinga Kazala (ETHZ)", "name": "Kinga Kazala (ETHZ)",

View File

@ -1,6 +1,6 @@
{ {
"name": "spfx-applicationinsights", "name": "spfx-applicationinsights",
"version": "1.0.0", "version": "1.0.1",
"private": true, "private": true,
"engines": { "engines": {
"node": ">=16.13.0 <17.0.0" "node": ">=16.13.0 <17.0.0"

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

View File

@ -1,8 +1,8 @@
/* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-explicit-any */
import { cloneDeep, merge, uniq } from "@microsoft/sp-lodash-subset"; import { cloneDeep, merge, uniq } from "@microsoft/sp-lodash-subset";
import { ChartType, PaletteGenerator } from "@pnp/spfx-controls-react"; import { ChartType, PaletteGenerator } from "@pnp/spfx-controls-react";
import { ChartData, ChartDataSets, ChartOptions, TimeUnit } from "chart.js";
import stringsCommon from "CommonDasboardWebPartStrings"; import stringsCommon from "CommonDasboardWebPartStrings";
import { ChartData, ChartDataSets, ChartOptions, TimeUnit } from "chart.js";
import moment from "moment"; import moment from "moment";
import { ColumnsInfo, DataTypesInfo } from "../components/InsightsChart/IInsightsChartProps"; import { ColumnsInfo, DataTypesInfo } from "../components/InsightsChart/IInsightsChartProps";
import ApiHelper from "./ApiHelper"; import ApiHelper from "./ApiHelper";
@ -214,7 +214,6 @@ export default class ChartHelper {
} }
dataSets.push(dataSet); dataSets.push(dataSet);
}); });
console.log(dataSets);
return { return {
datasets: dataSets datasets: dataSets
} }

View File

@ -7,8 +7,12 @@ const theme = (process.env.NODE_ENV !== 'production')
}) })
: getTheme(); : getTheme();
const padding4px = theme.spacing.s2; const spacing4px = theme.spacing.s2;
const padding8px = theme.spacing.s1; const spacing8px = theme.spacing.s1;
const spacing16px = theme.spacing.m;
const spacing20px = theme.spacing.l1;
// const spacing32px = theme.spacing.l2;
const fontSmall = theme.fonts.small.fontSize; const fontSmall = theme.fonts.small.fontSize;
const minWidth=280; const minWidth=280;
@ -21,7 +25,9 @@ const getColorRGBA = (color: string, opacity: string | number): string => {
return `rgba(${col.r},${col.g},${col.b},${opacity})`; return `rgba(${col.r},${col.g},${col.b},${opacity})`;
} }
const stackTokens: IStackTokens = { childrenGap: `${padding8px} ${padding8px}` }; //rowGap columnGap 8px 4px const teamsPadding = `0px ${spacing16px} 0px ${spacing20px}`
const stackTokens: IStackTokens = { childrenGap: `${spacing8px} ${spacing8px}` }; //rowGap columnGap 8px 4px
const stackStylesMain: Partial<IStackStyles> = { const stackStylesMain: Partial<IStackStyles> = {
root: { root: {
backgroundColor: 'inherit' backgroundColor: 'inherit'
@ -40,8 +46,8 @@ const stackStylesDatePicker: Partial<IStackStyles> = {
backgroundColor: theme.palette.neutralQuaternary, backgroundColor: theme.palette.neutralQuaternary,
paddingTop: 1, paddingTop: 1,
paddingBottom: 1, paddingBottom: 1,
paddingLeft: padding8px, paddingLeft: spacing8px,
paddingRight: padding8px paddingRight: spacing8px
}, },
} }
@ -62,17 +68,17 @@ const stackItemStyles100: Partial<IStackItemStyles> = {
} }
const stackItemStyles50: Partial<IStackItemStyles> = { const stackItemStyles50: Partial<IStackItemStyles> = {
root: { root: {
width: `calc(50% - ${padding8px})`, width: `calc(50% - ${spacing8px})`,
} }
} }
const stackItemStyles66: Partial<IStackItemStyles> = { const stackItemStyles66: Partial<IStackItemStyles> = {
root: { root: {
width: `calc(60% - ${padding4px})`, width: `calc(60% - ${spacing4px})`,
} }
} }
const stackItemStyles33: Partial<IStackItemStyles> = { const stackItemStyles33: Partial<IStackItemStyles> = {
root: { root: {
width: `calc(30% - ${padding4px})`, width: `calc(30% - ${spacing4px})`,
} }
} }
@ -95,7 +101,7 @@ const pivotStylesDashboard: Partial<IPivotStyles> = {
flexFlow:'wrap' flexFlow:'wrap'
}, },
itemContainer: { itemContainer: {
padding: padding8px, padding: spacing8px,
paddingTop:0, paddingTop:0,
backgroundColor: theme.palette.neutralTertiaryAlt backgroundColor: theme.palette.neutralTertiaryAlt
} }
@ -184,20 +190,8 @@ const colorPickerStyles: Partial<IChoiceGroupStyles> = {
} }
export { export {
theme, chartTheme, colorPickerStyles, dashboardStyles, datePickerStyles, disabledPickerStyle, getColorRGB,
stackTokens, getColorRGBA, heatmapStyles, linkStyles, shimmerStyleChart, stackStyles,
heatmapStyles, stackStylesMain, stackTokens, teamsPadding, theme, transparentTheme
datePickerStyles,
dashboardStyles,
stackStyles,
stackStylesMain,
shimmerStyleChart,
transparentTheme,
chartTheme,
disabledPickerStyle,
colorPickerStyles,
linkStyles,
getColorRGB,
getColorRGBA,
}; };

View File

@ -11,6 +11,7 @@ import { AppInsights, setLogger } from 'pnp-appinsights-listener';
import * as React from 'react'; import * as React from 'react';
import { ThemedPalette } from '../../common/ColorsHelper'; import { ThemedPalette } from '../../common/ColorsHelper';
import { CacheExpiration, IAppInsightsQuery, IAppInsightsWebPartProps } from '../../common/CommonProps'; import { CacheExpiration, IAppInsightsQuery, IAppInsightsWebPartProps } from '../../common/CommonProps';
import { teamsPadding } from '../../common/ComponentStyles';
import { ChartStyles, LayoutStyles, ListStyles } from '../../common/DashboardHelper'; import { ChartStyles, LayoutStyles, ListStyles } from '../../common/DashboardHelper';
import ApplicationInsightsLogs from './components/ApplicationInsightsLogs'; import ApplicationInsightsLogs from './components/ApplicationInsightsLogs';
import { IApplicationInsightsLogsProps } from './components/IApplicationInsightsLogsProps'; import { IApplicationInsightsLogsProps } from './components/IApplicationInsightsLogsProps';
@ -39,6 +40,7 @@ export default class ApplicationInsightsLogsWebPart extends BaseClientSideWebPar
} }
public render(): void { public render(): void {
let dashboard: React.ReactElement;
const element: React.ReactElement<IApplicationInsightsLogsProps> = React.createElement(ApplicationInsightsLogs, { const element: React.ReactElement<IApplicationInsightsLogsProps> = React.createElement(ApplicationInsightsLogs, {
...this.properties, ...this.properties,
@ -56,7 +58,14 @@ export default class ApplicationInsightsLogsWebPart extends BaseClientSideWebPar
onConfigureTimePicker: this._onConfigureTimePicker, onConfigureTimePicker: this._onConfigureTimePicker,
onConfigureLayoutSettings: this._onConfigureLayoutSettings, onConfigureLayoutSettings: this._onConfigureLayoutSettings,
}); });
ReactDom.render(element, this.domElement);
if (!!this.context.sdks.microsoftTeams) { // running in Teams, office.com or Outlook
dashboard = React.createElement('div', { style: { padding: teamsPadding }}, element);
}
else{
dashboard=element
}
ReactDom.render(dashboard, this.domElement);
} }
//#region WebPart Properties //#region WebPart Properties
public _onPivotItemChange = (key: string): void => { public _onPivotItemChange = (key: string): void => {
@ -104,7 +113,6 @@ export default class ApplicationInsightsLogsWebPart extends BaseClientSideWebPar
text: CacheExpiration[value as keyof typeof CacheExpiration] text: CacheExpiration[value as keyof typeof CacheExpiration]
}; };
}); });
console.log(this.properties.cacheDuration)
return { return {
pages: [ pages: [

View File

@ -8,6 +8,7 @@ import React from 'react';
import * as ReactDom from 'react-dom'; import * as ReactDom from 'react-dom';
import { ThemedPalette } from '../../common/ColorsHelper'; import { ThemedPalette } from '../../common/ColorsHelper';
import { ICostManagementConfig, ICostManagementQuery, ICostManagementWebPartProps } from '../../common/CommonProps'; import { ICostManagementConfig, ICostManagementQuery, ICostManagementWebPartProps } from '../../common/CommonProps';
import { teamsPadding } from '../../common/ComponentStyles';
import { ChartStyles, LayoutStyles, ListStyles } from '../../common/DashboardHelper'; import { ChartStyles, LayoutStyles, ListStyles } from '../../common/DashboardHelper';
import CostInsightsDashboard from './components/CostInsightsDashboard'; import CostInsightsDashboard from './components/CostInsightsDashboard';
import { ICostInsightsDashboardProps } from './components/ICostInsightsDashboardProps'; import { ICostInsightsDashboardProps } from './components/ICostInsightsDashboardProps';
@ -36,6 +37,8 @@ export default class CostInsightsWebPart extends BaseClientSideWebPart<ICostMana
} }
public render(): void { public render(): void {
let dashboard: React.ReactElement;
const element: React.ReactElement<ICostInsightsDashboardProps> = React.createElement( const element: React.ReactElement<ICostInsightsDashboardProps> = React.createElement(
CostInsightsDashboard, CostInsightsDashboard,
{ {
@ -55,7 +58,13 @@ export default class CostInsightsWebPart extends BaseClientSideWebPart<ICostMana
onConfigureLayoutSettings: this._onConfigureLayoutSettings, onConfigureLayoutSettings: this._onConfigureLayoutSettings,
} }
); );
ReactDom.render(element, this.domElement); if (!!this.context.sdks.microsoftTeams) { // running in Teams, office.com or Outlook
dashboard = React.createElement('div', { style: { padding: teamsPadding } }, element);
}
else {
dashboard = element
}
ReactDom.render(dashboard, this.domElement);
} }
public _onPivotItemChange = (key: string): void => { public _onPivotItemChange = (key: string): void => {
this.properties.pivotKey = key this.properties.pivotKey = key