FUI - Reports - Moving to native elements

src/apim.design.module.ts

@@ -31,7 +31,7 @@ import { ProductSubscribeEditorModule as ProductSubscribeDesignModule } from "./
 import { ProductApisEditorModule as ProductApisDesignModule } from "./components/products/product-apis/ko/productApisEditor.module";
 import { ProductSubscriptionsEditorModule as ProductSubscriptionsDesignModule } from "./components/products/product-subscriptions/ko/productSubscriptionsEditor.module";
 import { App } from "./components/app/app";
-import { ReportsEditorModule as ReportsDesignModule } from "./components/reports/ko/reportsEditor.module";
+import { ReportsEditorModule as ReportsDesignModule } from "./components/reports/reports.design.module";
 import { ResetPasswordDesignModule } from "./components/users/reset-password/resetPassword.design.module";
 import { ConfirmPasswordDesignModule } from "./components/users/confirm-password/confirmPassword.design.module";
 import { HelpModule } from "./components/help";

src/apim.publish.module.ts

@@ -28,7 +28,7 @@ import { IdentityService } from "./services/identityService";
 import { ResetPasswordPublishModule } from "./components/users/reset-password/resetPassword.publish.module";
 import { ConfirmPasswordPublishModule } from "./components/users/confirm-password/confirmPassword.publish.module";
 import { ChangePasswordPublishModule } from "./components/users/change-password/changePassword.publish.module";
-import { ReportsPublishModule } from "./components/reports/ko/reports.module";
+import { ReportsPublishModule } from "./components/reports/reports.publish.module";
 import { TenantService } from "./services/tenantService";
 import { ValidationSummaryPublishModule } from "./components/users/validation-summary/validationSummary.publish.module";
 import { BackendService } from "./services/backendService";

src/apim.runtime.module.ts

@@ -110,7 +110,7 @@ import { ResetPasswordRuntimeModule } from "./components/users/reset-password/re
 import { ChangePasswordRuntimeModule } from "./components/users/change-password/changePassword.runtime.module";
 import { ConfirmPasswordRuntimeModule } from "./components/users/confirm-password/confirmPassword.runtime.module";
 import { SubscriptionsRuntimeModule } from "./components/users/subscriptions/subscriptions.runtime.module";
-import { ReportsRuntimeModule } from "./components/reports/ko/reports.runtime.module";
+import { ReportsRuntimeModule } from "./components/reports/reports.runtime.module";
 import { ValidationSummaryRuntimeModule } from "./components/users/validation-summary/validationSummary.runtime.module";
 
 export class ApimRuntimeModule implements IInjectorModule {

src/components/react.components.d.ts

@@ -31,5 +31,7 @@ declare namespace JSX {
         "fui-signin-runtime": any;
         "signin-runtime": any;
         "placeholder-content": any;
+        "fui-reports-runtime": any;
+        "reports-runtime": any;        
     }
 }

src/components/reports/react/ReportsViewModel.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { LocalStyles } from "@paperbits/common/styles";
+
+export class ReportsViewModel extends React.Component {
+    public state: {
+        isRedesignEnabled: boolean;
+        styles: LocalStyles;
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.state = {...props};
+    }
+
+    public render(): JSX.Element {
+        const data = JSON.stringify(this.state);
+
+        return this.state.isRedesignEnabled
+            ? <fui-reports-runtime props={data} ></fui-reports-runtime>
+            : <reports-runtime params={data}></reports-runtime>;
+    }
+}

src/components/reports/react/Charts/ApiCalls.tsx → src/components/reports/react/runtime/Charts/ApiCalls.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { useCallback, useEffect, useState } from "react";
-import { Body1, Subtitle2Stronger } from "@fluentui/react-components";
 import { IChartProps, LineChart } from "@fluentui/react-charting";
 import { TReportsChartProps } from "../ReportsRuntime";
 
@@ -51,9 +50,9 @@ export const ApiCalls = ({ reportsByTime, timeRange, dateFormattingFunc }: TRepo
 
     return (
         <div className={"report-chart-container"}>
-            <Subtitle2Stronger block className={"report-chart-title"}>API Calls</Subtitle2Stronger>
+            <h5 className={"report-chart-title"}>API Calls</h5>
             {reportsByTime.length === 0
-                ? <Body1 block>No data</Body1>
+                ? <div>No data</div>
                 : <LineChart
                     data={data}
                     xAxisTitle="Time"

src/components/reports/react/Charts/ApiResponseTime.tsx → src/components/reports/react/runtime/Charts/ApiResponseTime.tsx

@@ -1,8 +1,7 @@
 import * as React from "react";
 import { useCallback, useEffect, useState } from "react";
-import { Body1, Subtitle2Stronger } from "@fluentui/react-components";
 import { IChartProps, LineChart } from "@fluentui/react-charting";
-import { Utils } from "../../../../utils";
+import { Utils } from "../../../../../utils";
 import { TReportsChartProps } from "../ReportsRuntime";
 
 const apiResponseTimeLineChartData: IChartProps = {
@@ -47,9 +46,9 @@ export const ApiResponseTime = ({ reportsByTime, timeRange, dateFormattingFunc }
 
     return (
         <div className={"report-chart-container"}>
-            <Subtitle2Stronger block className={"report-chart-title"}>API Response Times</Subtitle2Stronger>
+            <h5 className={"report-chart-title"}>API Response Times</h5>
             {reportsByTime.length === 0
-                ? <Body1 block>No data</Body1>
+                ? <div>No data</div>
                 : <LineChart
                     data={data}
                     xAxisTitle="Time"

src/components/reports/react/Charts/DataTransfer.tsx → src/components/reports/react/runtime/Charts/DataTransfer.tsx

@@ -1,8 +1,7 @@
 import * as React from "react";
 import { useCallback, useEffect, useState } from "react";
-import { Body1, Subtitle2Stronger } from "@fluentui/react-components";
 import { IChartProps, LineChart } from "@fluentui/react-charting";
-import { Utils } from "../../../../utils";
+import { Utils } from "../../../../../utils";
 import { TReportsChartProps } from "../ReportsRuntime";
 
 const dataTransferLineChartData: IChartProps = {
@@ -37,9 +36,9 @@ export const DataTransfer = ({ reportsByTime, timeRange, dateFormattingFunc }: T
 
     return (
         <div className={"report-chart-container"}>
-            <Subtitle2Stronger block className={"report-chart-title"}>Data Transfer</Subtitle2Stronger>
+            <h5 className={"report-chart-title"}>Data Transfer</h5>
             {reportsByTime.length === 0
-                ? <Body1 block>No data</Body1>
+                ? <div>No data</div>
                 : <LineChart
                     data={data}
                     xAxisTitle="Time"

src/components/reports/react/ReportsRuntime.tsx → src/components/reports/react/runtime/ReportsRuntime.tsx

@@ -4,9 +4,9 @@ import * as moment from "moment/moment";
 import { Stack } from "@fluentui/react";
 import { FluentProvider } from "@fluentui/react-components";
 import { Resolve } from "@paperbits/react/decorators";
-import { AnalyticsService } from "../../../services/analyticsService";
-import { ReportRecordByTime } from "../../../contracts/reportRecordByTime";
-import * as Constants from "../../../constants";
+import { AnalyticsService } from "../../../../services/analyticsService";
+import { ReportRecordByTime } from "../../../../contracts/reportRecordByTime";
+import * as Constants from "../../../../constants";
 import {
     optionsReports,
     optionsReportsCharts,

src/components/reports/react/Tables/Apis.tsx → src/components/reports/react/runtime/Tables/Apis.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
-import { Body1Strong, TableCell, TableRow } from "@fluentui/react-components";
-import { AnalyticsService } from "../../../../services/analyticsService";
-import { ReportQuery } from "../../../../services/reportQuery";
-import * as Constants from "../../../../constants";
-import { Utils } from "../../../../utils";
+import { TableCell, TableRow } from "@fluentui/react-components";
+import { AnalyticsService } from "../../../../../services/analyticsService";
+import { ReportQuery } from "../../../../../services/reportQuery";
+import * as Constants from "../../../../../constants";
+import { Utils } from "../../../../../utils";
 import { useLoadData } from "../utils";
 import { TReportsTableProps } from "../ReportsRuntime";
 import { orderDefault } from "./shared/Headers";
@@ -54,9 +54,7 @@ export const Apis = ({ analyticsService, timeRange: { startTime, endTime } }: TR
         <ReportsTable mainLabel={"APIs"} orderState={[order, setOrder]} pageState={[page, setPage]} data={data} working={working}>
             {api => (
                 <TableRow key={api.name}>
-                    <TableCell>
-                        <Body1Strong>{api.name}</Body1Strong>
-                    </TableCell>
+                    <TableCell><span className="strong">{api.name}</span></TableCell>
                     <TableCell>{api.callCountSuccess}</TableCell>
                     <TableCell>{api.callCountBlocked}</TableCell>
                     <TableCell>{api.callCountFailed}</TableCell>

src/components/reports/react/Tables/Operations.tsx → src/components/reports/react/runtime/Tables/Operations.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
-import { Body1Strong, TableCell, TableRow } from "@fluentui/react-components";
-import { AnalyticsService } from "../../../../services/analyticsService";
-import { ReportQuery } from "../../../../services/reportQuery";
-import * as Constants from "../../../../constants";
-import { Utils } from "../../../../utils";
+import { TableCell, TableRow } from "@fluentui/react-components";
+import { AnalyticsService } from "../../../../../services/analyticsService";
+import { ReportQuery } from "../../../../../services/reportQuery";
+import * as Constants from "../../../../../constants";
+import { Utils } from "../../../../../utils";
 import { useLoadData } from "../utils";
 import { TReportsTableProps } from "../ReportsRuntime";
 import { orderDefault } from "./shared/Headers";
@@ -54,9 +54,7 @@ export const Operations = ({ analyticsService, timeRange: { startTime, endTime }
         <ReportsTable mainLabel={"Operations"} orderState={[order, setOrder]} pageState={[page, setPage]} data={data} working={working}>
             {api => (
                 <TableRow key={api.name}>
-                    <TableCell>
-                        <Body1Strong>{api.name}</Body1Strong>
-                    </TableCell>
+                    <TableCell><span className="strong">{api.name}</span></TableCell>
                     <TableCell>{api.callCountSuccess}</TableCell>
                     <TableCell>{api.callCountBlocked}</TableCell>
                     <TableCell>{api.callCountFailed}</TableCell>

src/components/reports/react/Tables/Products.tsx → src/components/reports/react/runtime/Tables/Products.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
-import { Body1Strong, TableCell, TableRow } from "@fluentui/react-components";
-import { AnalyticsService } from "../../../../services/analyticsService";
-import { ReportQuery } from "../../../../services/reportQuery";
-import * as Constants from "../../../../constants";
-import { Utils } from "../../../../utils";
+import { TableCell, TableRow } from "@fluentui/react-components";
+import { AnalyticsService } from "../../../../../services/analyticsService";
+import { ReportQuery } from "../../../../../services/reportQuery";
+import * as Constants from "../../../../../constants";
+import { Utils } from "../../../../../utils";
 import { useLoadData } from "../utils";
 import { TReportsTableProps } from "../ReportsRuntime";
 import { orderDefault } from "./shared/Headers";
@@ -54,9 +54,7 @@ export const Products = ({ analyticsService, timeRange: { startTime, endTime } }
         <ReportsTable mainLabel={"Products"} orderState={[order, setOrder]} pageState={[page, setPage]} data={data} working={working}>
             {product => (
                 <TableRow key={product.name}>
-                    <TableCell>
-                        <Body1Strong>{product.name}</Body1Strong>
-                    </TableCell>
+                    <TableCell><span className="strong">{product.name}</span></TableCell>
                     <TableCell>{product.callCountSuccess}</TableCell>
                     <TableCell>{product.callCountBlocked}</TableCell>
                     <TableCell>{product.callCountFailed}</TableCell>

src/components/reports/react/Tables/Subscriptions.tsx → src/components/reports/react/runtime/Tables/Subscriptions.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
-import { Body1Strong, TableCell, TableRow } from "@fluentui/react-components";
-import { AnalyticsService } from "../../../../services/analyticsService";
-import { ReportQuery } from "../../../../services/reportQuery";
-import * as Constants from "../../../../constants";
-import { Utils } from "../../../../utils";
+import { TableCell, TableRow } from "@fluentui/react-components";
+import { AnalyticsService } from "../../../../../services/analyticsService";
+import { ReportQuery } from "../../../../../services/reportQuery";
+import * as Constants from "../../../../../constants";
+import { Utils } from "../../../../../utils";
 import { useLoadData } from "../utils";
 import { TReportsTableProps } from "../ReportsRuntime";
 import { orderDefault } from "./shared/Headers";
@@ -55,9 +55,7 @@ export const Subscriptions = ({ analyticsService, timeRange: { startTime, endTim
         <ReportsTable mainLabel={"Subscriptions"} orderState={[order, setOrder]} pageState={[page, setPage]} data={data} working={working}>
             {api => (
                 <TableRow key={api.name}>
-                    <TableCell>
-                        <Body1Strong>{api.name}</Body1Strong>
-                    </TableCell>
+                    <TableCell><span className="strong">{api.name}</span></TableCell>
                     <TableCell>{api.callCountSuccess}</TableCell>
                     <TableCell>{api.callCountBlocked}</TableCell>
                     <TableCell>{api.callCountFailed}</TableCell>

src/components/reports/react/Tables/shared/Headers.tsx → src/components/reports/react/runtime/Tables/shared/Headers.tsx

@@ -1,11 +1,5 @@
 import * as React from "react";
-import {
-    Body1Strong,
-    Body1Stronger,
-    TableHeader,
-    TableHeaderCell,
-    TableRow,
-} from "@fluentui/react-components";
+import { TableHeader, TableHeaderCell, TableRow } from "@fluentui/react-components";
 
 type TOrder = {
     key: string
@@ -49,28 +43,28 @@ export const Headers = ({ mainLabel, orderState }: THeadersProps) => (
     <TableHeader>
         <TableRow className={"fui-table-headerRow"}>
             <MyHeaderCell orderState={orderState} sortKey={"name"}>
-                <Body1Stronger>{mainLabel}</Body1Stronger>
+                <span className="stronger">{mainLabel}</span>
             </MyHeaderCell>
             <MyHeaderCell orderState={orderState} sortKey={"callCountSuccess"}>
-                <Body1Strong>Successful calls</Body1Strong>
+                <span className="strong">Successful calls</span>
             </MyHeaderCell>
             <MyHeaderCell orderState={orderState} sortKey={"callCountBlocked"}>
-                <Body1Strong>Blocked calls</Body1Strong>
+                <span className="strong">Blocked calls</span>
             </MyHeaderCell>
             <MyHeaderCell orderState={orderState} sortKey={"callCountFailed"}>
-                <Body1Strong>Failed calls</Body1Strong>
+                <span className="strong">Failed calls</span>
             </MyHeaderCell>
             <MyHeaderCell orderState={orderState} sortKey={"callCountOther"}>
-                <Body1Strong>Other calls</Body1Strong>
+                <span className="strong">Other calls</span>
             </MyHeaderCell>
             <MyHeaderCell orderState={orderState} sortKey={"callCountTotal"}>
-                <Body1Strong>Total calls</Body1Strong>
+                <span className="strong">Total calls</span>
             </MyHeaderCell>
             <MyHeaderCell orderState={orderState} sortKey={"apiTimeAvg"}>
-                <Body1Strong>Response time</Body1Strong>
+                <span className="strong">Response time</span>
             </MyHeaderCell>
             <MyHeaderCell orderState={orderState} sortKey={"bandwidth"}>
-                <Body1Strong>Bandwidth</Body1Strong>
+                <span className="strong">Bandwidth</span>
             </MyHeaderCell>
         </TableRow>
     </TableHeader>

src/components/reports/react/Tables/shared/ReportsTable.tsx → src/components/reports/react/runtime/Tables/shared/ReportsTable.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Spinner, Table, TableBody } from "@fluentui/react-components";
-import { Pagination } from "../../../../utils/react/Pagination";
-import { NoRecordsRow } from "../../../../utils/react/NoRecordsRow";
-import * as Constants from "../../../../../constants";
+import { Pagination } from "../../../../../utils/react/Pagination";
+import { NoRecordsRow } from "../../../../../utils/react/NoRecordsRow";
+import * as Constants from "../../../../../../constants";
 import { Headers, TOrderState } from "./Headers";
 
 export const ReportsTable = <T extends unknown>({ mainLabel, pageState: [pageNumber, setPageNumber], orderState, data, working, children }: {

src/components/reports/ko/reportsEditor.module.ts → src/components/reports/reports.design.module.ts

@@ -1,35 +1,37 @@
-import { IInjectorModule, IInjector } from "@paperbits/common/injection";
-import { ReportsHandlers } from "../reportsHandlers";
-import { ReportsEditor } from "./reportsEditor";
-import { ReportsModelBinder } from "../reportsModelBinder";
-import { ReportsViewModelBinder } from "./reportsViewModelBinder";
-import { IWidgetService } from "@paperbits/common/widgets";
-import { ReportsModel } from "../reportsModel";
-import { KnockoutComponentBinder } from "@paperbits/core/ko";
-import { ReportsViewModel } from "./reportsViewModel";
-
-export class ReportsEditorModule implements IInjectorModule {
-    public register(injector: IInjector): void {
-        injector.bind("reportsEditor", ReportsEditor);
-        injector.bindSingleton("reportsModelBinder", ReportsModelBinder);
-        injector.bindSingleton("reportsViewModelBinder", ReportsViewModelBinder)
-        injector.bindSingleton("reportsHandlers", ReportsHandlers);
-
-        const widgetService = injector.resolve<IWidgetService>("widgetService");
-
-        widgetService.registerWidget("reports", {
-            modelDefinition: ReportsModel,
-            componentBinder: KnockoutComponentBinder,
-            componentDefinition: ReportsViewModel,
-            modelBinder: ReportsModelBinder,
-            viewModelBinder: ReportsViewModelBinder
-        });
-
-        widgetService.registerWidgetEditor("reports", {
-            displayName: "Reports",
-            category: "Analytics",
-            iconClass: "widget-icon widget-icon-api-management",
-            handlerComponent: ReportsHandlers
-        });
-    }
+import { IInjectorModule, IInjector } from "@paperbits/common/injection";
+import { IWidgetService } from "@paperbits/common/widgets";
+import { ComponentFlow } from "@paperbits/common/components";
+import { ReactComponentBinder } from "@paperbits/react/bindings";
+import { ReportsHandlers } from "./reportsHandlers";
+import { ReportsEditor } from "./ko/reportsEditor";
+import { ReportsModel } from "./reportsModel";
+import { ReportsViewModel } from "./react/ReportsViewModel";
+import { ReportsModelBinder } from "./reportsModelBinder";
+import { ReportsViewModelBinder } from "./reportsViewModelBinder";
+
+export class ReportsEditorModule implements IInjectorModule {
+    public register(injector: IInjector): void {
+        injector.bind("reportsEditor", ReportsEditor);
+        injector.bindSingleton("reportsModelBinder", ReportsModelBinder);
+        injector.bindSingleton("reportsViewModelBinder", ReportsViewModelBinder)
+        injector.bindSingleton("reportsHandlers", ReportsHandlers);
+
+        const widgetService = injector.resolve<IWidgetService>("widgetService");
+
+        widgetService.registerWidget("reports", {
+            modelDefinition: ReportsModel,
+            componentBinder: ReactComponentBinder,
+            componentDefinition: ReportsViewModel,
+            modelBinder: ReportsModelBinder,
+            viewModelBinder: ReportsViewModelBinder,
+            componentFlow: ComponentFlow.Block
+        });
+
+        widgetService.registerWidgetEditor("reports", {
+            displayName: "Reports",
+            category: "Analytics",
+            iconClass: "widget-icon widget-icon-api-management",
+            handlerComponent: ReportsHandlers
+        });
+    }
 }