{
Company Data Usage
-
;
+ monthUsage: Record;
+ yearUsage: Record;
+ }
+ >
data={this.users.result}
columns={[
{
@@ -1008,46 +1015,74 @@ export default class CompanyPage extends React.Component {
Header: emailHeader,
accessor: 'userEmail',
minWidth: 200,
- onFilter: (data: UserOverviewUsage, keyword) =>
+ onFilter: (data, keyword) =>
filterByKeyword(data.userEmail, keyword),
},
- {
- id: 'totalUsage',
- Header: usageHeader,
- minWidth: 100,
- accessor: 'totalUsage',
- Cell(props: { original: UserOverviewUsage }) {
- return (
-
- );
- },
- },
this.resourcesTypeToggleValue ===
ToggleValue.ALL_RESOURCES
? {
- id: 'endpoint',
+ id: 'totalUsage',
+ Header: usageHeader,
+ minWidth: 100,
+ Cell(props: {
+ original: UserOverviewUsage;
+ }) {
+ return (
+
+ );
+ },
+ }
+ : {
+ id: 'totalUsage',
+ Header: usageHeader,
+ minWidth: 100,
+ Cell(props: {
+ original: UserOverviewUsage;
+ }) {
+ return (
+
+ );
+ },
+ },
+ this.resourcesTypeToggleValue ===
+ ToggleValue.ALL_RESOURCES
+ ? {
+ id: 'mostUsedEndpoint',
Header: endpointHeader,
minWidth: 200,
- accessor: 'endpoint',
- onFilter: (
- data: UserOverviewUsage,
- keyword
- ) =>
- filterByKeyword(data.endpoint, keyword),
+ onFilter: (data, keyword) =>
+ filterByKeyword(
+ data.yearUsage[currentYearStr]
+ ?.mostUsedEndpoint,
+ keyword
+ ),
+ accessor: x =>
+ x.yearUsage[currentYearStr]
+ ?.mostUsedEndpoint,
}
: {
- id: 'noPrivateEndpoint',
- Header: noPrivateEndpointHeader,
+ id: 'mostUsedPublicEndpoint',
+ Header: publicEndpointHeader,
minWidth: 200,
- accessor: 'noPrivateEndpoint',
- onFilter: (
- data: UserOverviewUsage,
- keyword
- ) =>
+ accessor: x =>
+ x.yearUsage[currentYearStr]
+ ?.mostUsedPublicEndpoint,
+ onFilter: (data, keyword) =>
filterByKeyword(
- data.noPrivateEndpoint,
+ data.yearUsage[currentYearStr]
+ ?.mostUsedPublicEndpoint,
keyword
),
},
diff --git a/src/main/webapp/app/pages/usageAnalysisPage/ResourceUsageDetailsPage.tsx b/src/main/webapp/app/pages/usageAnalysisPage/ResourceUsageDetailsPage.tsx
index 04622fd65..8e1400908 100644
--- a/src/main/webapp/app/pages/usageAnalysisPage/ResourceUsageDetailsPage.tsx
+++ b/src/main/webapp/app/pages/usageAnalysisPage/ResourceUsageDetailsPage.tsx
@@ -5,15 +5,14 @@ import { inject, observer } from 'mobx-react';
import { RouterStore } from 'mobx-react-router';
import React from 'react';
import { match } from 'react-router-dom';
-import { ToggleValue, UsageRecord } from './UsageAnalysisPage';
import Client from 'app/shared/api/clientInstance';
-import {
- USAGE_DETAIL_TIME_KEY,
- USAGE_ALL_TIME_KEY,
- USAGE_ALL_TIME_VALUE,
-} from 'app/config/constants';
import ResourceUsageDetailsTable from './ResourceUsageDetailsTable';
import { decodeResourceUsageDetailPageURL } from 'app/shared/utils/Utils';
+import {
+ TimeGroupedUsageRecords,
+ mapUsageSummaryToTimeGroupedUsageRecords,
+ ToggleValue,
+} from './usage-analysis-utils';
@inject('routing')
@observer
@@ -27,40 +26,21 @@ export default class ResourceUsageDetailsPage extends React.Component<{
this.props.match.params['endpoint']
);
- readonly resourceDetail = remoteData
);
},
+ });
+ }
+ columns.push({
+ ...getUsageTableColumnDefinition(UsageTableColumnKey.USAGE),
+ Cell(props: { original: UsageRecord }) {
+ return ;
},
- {
- id: 'totalUsage',
- Header: usageHeader,
- accessor: 'totalUsage',
- Cell(props: { original: UserOverviewUsage }) {
- return ;
- },
+ });
+ columns.push({
+ id: 'endpoint',
+ Header: endpointHeader,
+ minWidth: 200,
+ onFilter: (row: UsageRecord, keyword: string) =>
+ filterByKeyword(row.resource, keyword),
+ Cell(props: { original: UsageRecord }) {
+ return props.original.resource ? (
+
+
+ {props.original.resource}
+ {' '}
+ {isResources && <>({props.original.maxUsageProportion}%)>}
+
+ ) : (
+ N/A
+ );
},
- this.resourcesTypeToggleValue === ToggleValue.ALL_RESOURCES
- ? {
- id: 'endpoint',
- Header: endpointHeader,
- minWidth: 200,
- accessor: (row: UserOverviewUsage) =>
- `${row.endpoint} (${row.maxUsageProportion}%)`,
- onFilter: (row: UserOverviewUsage, keyword: string) =>
- filterByKeyword(row.endpoint, keyword),
- Cell(props: { original: UserOverviewUsage }) {
- return props.original.endpoint ? (
-
-
- {props.original.endpoint}
- {' '}
- ({props.original.maxUsageProportion}%)
-
- ) : (
- N/A
- );
- },
- }
- : {
- id: 'noPrivateEndpoint',
- Header: noPrivateEndpointHeader,
- minWidth: 200,
- accessor: (row: UserOverviewUsage) =>
- `${row.endpoint} (${row.noPrivateMaxUsageProportion}%)`,
- onFilter: (row: UserOverviewUsage, keyword: string) =>
- filterByKeyword(row.noPrivateEndpoint, keyword),
- Cell(props: { original: UserOverviewUsage }) {
- return props.original.endpoint ? (
-
-
- {props.original.endpoint}
- {' '}
- ({props.original.maxUsageProportion}%)
-
- ) : (
- N/A
- );
- },
- },
- {
+ });
+ columns.push({
+ ...getUsageTableColumnDefinition(UsageTableColumnKey.TIME),
+ Header: filterDependentTimeHeader(this.timeTypeToggleValue),
+ onFilter: (row: UsageRecord, keyword: string) =>
+ filterByKeyword(row.time, keyword),
+ });
+ if (isResources) {
+ columns.push({
...getUsageTableColumnDefinition(UsageTableColumnKey.OPERATION),
sortable: false,
className: 'd-flex justify-content-center',
- Cell(props: { original: UserOverviewUsage }) {
+ Cell(props: { original: UsageRecord }) {
return props.original.userId ? (
);
},
- },
- ];
+ });
+ }
+ return columns;
}
- readonly dateGroupedColumns = [
- {
- id: 'userEmail',
- Header: emailHeader,
- accessor: 'resource',
- onFilter: (row: UsageRecord, keyword: string) =>
- filterByKeyword(row.resource, keyword),
- Cell(props: { original: UsageRecord }) {
- return props.original.userId ? (
-
- {props.original.resource}
-
- ) : (
- {props.original.resource}
- );
- },
- },
- {
- ...getUsageTableColumnDefinition(UsageTableColumnKey.USAGE),
- Cell(props: { original: UsageRecord }) {
- return ;
- },
- },
- {
- ...getUsageTableColumnDefinition(UsageTableColumnKey.TIME),
- Header: filterDependentTimeHeader(this.timeTypeToggleValue),
- onFilter: (row: UsageRecord, keyword: string) =>
- filterByKeyword(row.time, keyword),
- },
- {
- ...getUsageTableColumnDefinition(UsageTableColumnKey.OPERATION),
- sortable: false,
- className: 'd-flex justify-content-center',
- Cell(props: { original: UsageRecord }) {
- return props.original.userId ? (
-
-
-
- ) : (
-
- );
- },
- },
- ];
-
@computed get resetDefaultSort(): SortingRule[] {
const sortingRules: SortingRule[] = [];
if (this.filterToggled) {
@@ -282,7 +173,7 @@ export default class UsageAnalysisTable extends React.Component<
});
}
- if (this.timeTypeToggleValue === ToggleValue.RESULTS_IN_TOTAL) {
+ if (this.timeTypeToggleValue === ToggleValue.RESULTS_BY_YEAR) {
sortingRules.push({
id: 'totalUsage',
desc: true,
@@ -328,7 +219,7 @@ export default class UsageAnalysisTable extends React.Component<
- key={this.timeTypeToggleValue}
- data={this.props.data}
- columns={this.getAllTimeColumns}
- loading={!this.props.loadedData}
- defaultSorted={this.resetDefaultSort}
- showPagination={true}
- minRows={1}
- defaultPageSize={this.props.defaultPageSize}
- filters={this.filters}
- />
- );
- } else {
- return (
-
- key={this.timeTypeToggleValue}
- data={this.calculateDateGroupedData}
- columns={this.dateGroupedColumns}
- loading={!this.props.loadedData}
- defaultSorted={this.resetDefaultSort}
- showPagination={true}
- minRows={1}
- defaultPageSize={this.props.defaultPageSize}
- filters={this.filters}
- />
- );
- }
+ return (
+
+ key={this.timeTypeToggleValue}
+ data={this.calculateDateGroupedData}
+ columns={this.dateGroupedColumns}
+ loading={!this.props.loadedData}
+ defaultSorted={this.resetDefaultSort}
+ showPagination={true}
+ minRows={1}
+ defaultPageSize={this.props.defaultPageSize}
+ filters={this.filters}
+ />
+ );
}
render() {
diff --git a/src/main/webapp/app/pages/usageAnalysisPage/UsageToggleGroup.tsx b/src/main/webapp/app/pages/usageAnalysisPage/UsageToggleGroup.tsx
index dbd6da521..96f163cdb 100644
--- a/src/main/webapp/app/pages/usageAnalysisPage/UsageToggleGroup.tsx
+++ b/src/main/webapp/app/pages/usageAnalysisPage/UsageToggleGroup.tsx
@@ -1,7 +1,7 @@
import { observer } from 'mobx-react';
import React from 'react';
import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap';
-import { ToggleValue } from './UsageAnalysisPage';
+import { ToggleValue } from './usage-analysis-utils';
type IUsageToggleGroupProps = {
defaultValue: ToggleValue;
diff --git a/src/main/webapp/app/pages/usageAnalysisPage/UserUsageDetailsPage.tsx b/src/main/webapp/app/pages/usageAnalysisPage/UserUsageDetailsPage.tsx
index 0b36f6bf2..244161067 100644
--- a/src/main/webapp/app/pages/usageAnalysisPage/UserUsageDetailsPage.tsx
+++ b/src/main/webapp/app/pages/usageAnalysisPage/UserUsageDetailsPage.tsx
@@ -10,17 +10,17 @@ import { Col, Row } from 'react-bootstrap';
import UserUsageDetailsTable from './UserUsageDetailsTable';
import { InfoRow } from '../AccountPage';
import {
- USAGE_DETAIL_TIME_KEY,
- USAGE_ALL_TIME_KEY,
- USAGE_ALL_TIME_VALUE,
+ USAGE_MONTH_DETAIL_TIME_KEY,
+ USAGE_YEAR_DETAIL_TIME_KEY,
USAGE_DAY_DETAIL_TIME_KEY,
} from 'app/config/constants';
import { remoteData } from 'cbioportal-frontend-commons';
+import { notifyError } from 'app/shared/utils/NotificationUtils';
import {
- ToggleValue,
UsageRecord,
-} from 'app/pages/usageAnalysisPage/UsageAnalysisPage';
-import { notifyError } from 'app/shared/utils/NotificationUtils';
+ TimeGroupedUsageRecords,
+ ToggleValue,
+} from './usage-analysis-utils';
@inject('routing')
@observer
@@ -36,37 +36,48 @@ export default class UserUsageDetailsPage extends React.Component<{
super(props);
}
- readonly usageDetail = remoteData