diff --git a/samples/react-dashboards/README.md b/samples/react-dashboards/README.md index 9e668a138..417f00740 100644 --- a/samples/react-dashboards/README.md +++ b/samples/react-dashboards/README.md @@ -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 - `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 **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.** diff --git a/samples/react-dashboards/config/package-solution.json b/samples/react-dashboards/config/package-solution.json index 4f3887ca0..eeef92228 100644 --- a/samples/react-dashboards/config/package-solution.json +++ b/samples/react-dashboards/config/package-solution.json @@ -2,8 +2,9 @@ "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json", "solution": { "name": "Application Insights and Cost Management dashboards", + "iconPath": "assets/appLogo.png", "id": "09af0554-67db-4a65-baa6-872dee7117a8", - "version": "1.0.0.0", + "version": "1.0.1.0", "includeClientSideAssets": true, "skipFeatureDeployment": true, "isDomainIsolated": false, @@ -16,14 +17,6 @@ "resource": "Application Insights API", "scope": "user_impersonation" } - // { - // "resource": "Microsoft Graph", //Microsoft Graph - // "scope": "user_impersonation" - // }, - // { - // "resource": "Office 365 SharePoint Online", //Office 365 SharePoint Online - // "scope": "user_impersonation" - // } ], "developer": { "name": "Kinga Kazala (ETHZ)", diff --git a/samples/react-dashboards/package.json b/samples/react-dashboards/package.json index 86e6111bf..b130f0892 100644 --- a/samples/react-dashboards/package.json +++ b/samples/react-dashboards/package.json @@ -1,6 +1,6 @@ { "name": "spfx-applicationinsights", - "version": "1.0.0", + "version": "1.0.1", "private": true, "engines": { "node": ">=16.13.0 <17.0.0" diff --git a/samples/react-dashboards/sharepoint/assets/appLogo.pdn b/samples/react-dashboards/sharepoint/assets/appLogo.pdn new file mode 100644 index 000000000..afec3729d Binary files /dev/null and b/samples/react-dashboards/sharepoint/assets/appLogo.pdn differ diff --git a/samples/react-dashboards/sharepoint/assets/appLogo.png b/samples/react-dashboards/sharepoint/assets/appLogo.png new file mode 100644 index 000000000..319f56ab7 Binary files /dev/null and b/samples/react-dashboards/sharepoint/assets/appLogo.png differ diff --git a/samples/react-dashboards/src/common/ChartHelper.ts b/samples/react-dashboards/src/common/ChartHelper.ts index fec7b4071..33761de55 100644 --- a/samples/react-dashboards/src/common/ChartHelper.ts +++ b/samples/react-dashboards/src/common/ChartHelper.ts @@ -1,8 +1,8 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import { cloneDeep, merge, uniq } from "@microsoft/sp-lodash-subset"; import { ChartType, PaletteGenerator } from "@pnp/spfx-controls-react"; -import { ChartData, ChartDataSets, ChartOptions, TimeUnit } from "chart.js"; import stringsCommon from "CommonDasboardWebPartStrings"; +import { ChartData, ChartDataSets, ChartOptions, TimeUnit } from "chart.js"; import moment from "moment"; import { ColumnsInfo, DataTypesInfo } from "../components/InsightsChart/IInsightsChartProps"; import ApiHelper from "./ApiHelper"; @@ -214,7 +214,6 @@ export default class ChartHelper { } dataSets.push(dataSet); }); - console.log(dataSets); return { datasets: dataSets } diff --git a/samples/react-dashboards/src/common/ComponentStyles.ts b/samples/react-dashboards/src/common/ComponentStyles.ts index a08d9d3e3..926ea41e6 100644 --- a/samples/react-dashboards/src/common/ComponentStyles.ts +++ b/samples/react-dashboards/src/common/ComponentStyles.ts @@ -7,8 +7,12 @@ const theme = (process.env.NODE_ENV !== 'production') }) : getTheme(); -const padding4px = theme.spacing.s2; -const padding8px = theme.spacing.s1; +const spacing4px = theme.spacing.s2; +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 minWidth=280; @@ -21,7 +25,9 @@ const getColorRGBA = (color: string, opacity: string | number): string => { 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 = { root: { backgroundColor: 'inherit' @@ -40,8 +46,8 @@ const stackStylesDatePicker: Partial = { backgroundColor: theme.palette.neutralQuaternary, paddingTop: 1, paddingBottom: 1, - paddingLeft: padding8px, - paddingRight: padding8px + paddingLeft: spacing8px, + paddingRight: spacing8px }, } @@ -62,17 +68,17 @@ const stackItemStyles100: Partial = { } const stackItemStyles50: Partial = { root: { - width: `calc(50% - ${padding8px})`, + width: `calc(50% - ${spacing8px})`, } } const stackItemStyles66: Partial = { root: { - width: `calc(60% - ${padding4px})`, + width: `calc(60% - ${spacing4px})`, } } const stackItemStyles33: Partial = { root: { - width: `calc(30% - ${padding4px})`, + width: `calc(30% - ${spacing4px})`, } } @@ -95,7 +101,7 @@ const pivotStylesDashboard: Partial = { flexFlow:'wrap' }, itemContainer: { - padding: padding8px, + padding: spacing8px, paddingTop:0, backgroundColor: theme.palette.neutralTertiaryAlt } @@ -184,20 +190,8 @@ const colorPickerStyles: Partial = { } export { - theme, - stackTokens, - heatmapStyles, - datePickerStyles, - dashboardStyles, - stackStyles, - stackStylesMain, - shimmerStyleChart, - transparentTheme, - chartTheme, - disabledPickerStyle, - colorPickerStyles, - linkStyles, - getColorRGB, - getColorRGBA, + chartTheme, colorPickerStyles, dashboardStyles, datePickerStyles, disabledPickerStyle, getColorRGB, + getColorRGBA, heatmapStyles, linkStyles, shimmerStyleChart, stackStyles, + stackStylesMain, stackTokens, teamsPadding, theme, transparentTheme }; diff --git a/samples/react-dashboards/src/webparts/applicationInsightsLogs/ApplicationInsightsLogsWebPart.ts b/samples/react-dashboards/src/webparts/applicationInsightsLogs/ApplicationInsightsLogsWebPart.ts index de68448de..d6fee138c 100644 --- a/samples/react-dashboards/src/webparts/applicationInsightsLogs/ApplicationInsightsLogsWebPart.ts +++ b/samples/react-dashboards/src/webparts/applicationInsightsLogs/ApplicationInsightsLogsWebPart.ts @@ -11,6 +11,7 @@ import { AppInsights, setLogger } from 'pnp-appinsights-listener'; import * as React from 'react'; import { ThemedPalette } from '../../common/ColorsHelper'; import { CacheExpiration, IAppInsightsQuery, IAppInsightsWebPartProps } from '../../common/CommonProps'; +import { teamsPadding } from '../../common/ComponentStyles'; import { ChartStyles, LayoutStyles, ListStyles } from '../../common/DashboardHelper'; import ApplicationInsightsLogs from './components/ApplicationInsightsLogs'; import { IApplicationInsightsLogsProps } from './components/IApplicationInsightsLogsProps'; @@ -39,6 +40,7 @@ export default class ApplicationInsightsLogsWebPart extends BaseClientSideWebPar } public render(): void { + let dashboard: React.ReactElement; const element: React.ReactElement = React.createElement(ApplicationInsightsLogs, { ...this.properties, @@ -56,7 +58,14 @@ export default class ApplicationInsightsLogsWebPart extends BaseClientSideWebPar onConfigureTimePicker: this._onConfigureTimePicker, 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 public _onPivotItemChange = (key: string): void => { @@ -104,7 +113,6 @@ export default class ApplicationInsightsLogsWebPart extends BaseClientSideWebPar text: CacheExpiration[value as keyof typeof CacheExpiration] }; }); - console.log(this.properties.cacheDuration) return { pages: [ diff --git a/samples/react-dashboards/src/webparts/costInsightsDashboard/CostInsightsDashboardWebPart.ts b/samples/react-dashboards/src/webparts/costInsightsDashboard/CostInsightsDashboardWebPart.ts index 059091769..a79a54cf4 100644 --- a/samples/react-dashboards/src/webparts/costInsightsDashboard/CostInsightsDashboardWebPart.ts +++ b/samples/react-dashboards/src/webparts/costInsightsDashboard/CostInsightsDashboardWebPart.ts @@ -8,6 +8,7 @@ import React from 'react'; import * as ReactDom from 'react-dom'; import { ThemedPalette } from '../../common/ColorsHelper'; import { ICostManagementConfig, ICostManagementQuery, ICostManagementWebPartProps } from '../../common/CommonProps'; +import { teamsPadding } from '../../common/ComponentStyles'; import { ChartStyles, LayoutStyles, ListStyles } from '../../common/DashboardHelper'; import CostInsightsDashboard from './components/CostInsightsDashboard'; import { ICostInsightsDashboardProps } from './components/ICostInsightsDashboardProps'; @@ -36,6 +37,8 @@ export default class CostInsightsWebPart extends BaseClientSideWebPart = React.createElement( CostInsightsDashboard, { @@ -55,7 +58,13 @@ export default class CostInsightsWebPart extends BaseClientSideWebPart { this.properties.pivotKey = key