function GroupReport()

in client/src/components/billing/reports/general-report.js [430:597]

• 168 lines of code
• 8 McCabe index (conditional complexity)

function GroupReport ({
  authenticatedUserInfo,
  billingGroup,
  adGroup,
  billingCentersComputeRequest,
  billingCentersStorageRequest,
  billingCentersComputeTableRequest,
  billingCentersStorageTableRequest,
  resources,
  summaryCompute,
  summaryStorages,
  filters
}) {
  const {range, period, region: cloudRegionId} = filters || {};
  const billingCenterName = (billingGroup || adGroup || []).join(' ');
  const title = `${billingCenterName} user's spendings`;
  const tableColumns = [{
    key: 'user',
    dataIndex: 'name',
    title: 'User',
    render: user => (<DisplayUser userName={user} />),
    className: styles.tableCell
  }, {
    key: 'runs-duration',
    dataIndex: 'runsDuration',
    title: 'Runs duration (hours)',
    render: toValue,
    className: styles.tableCell
  }, {
    key: 'runs-count',
    dataIndex: 'runsCount',
    title: 'Runs count',
    className: styles.tableCell
  }, {
    key: 'storage-usage',
    dataIndex: 'storageUsage',
    title: 'Storages usage (Gb)',
    render: toValue,
    className: styles.tableCell
  }, {
    key: 'spendings',
    dataIndex: 'spendings',
    title: 'Spendings',
    render: o => costTickFormatter(o),
    className: styles.tableCell
  }, {
    key: 'billingCenter',
    title: adGroup ? 'Group' : 'Billing center',
    render: () => billingCenterName,
    className: styles.tableCell
  }];
  const onResourcesSelect = BillingNavigation.generateNavigationFn(
    BillingNavigation.resourcesNavigation,
    filters
  );
  const props = {authenticatedUserInfo};
  const onUserSelect = roleModel.isManager.billing({props})
    ? BillingNavigation.generateNavigationFn(BillingNavigation.usersNavigation, filters)
    : undefined;
  return (
    <Discounts.Consumer>
      {
        (computeDiscounts, storageDiscounts) => (
          <Export.Consumer
            exportConfiguration={{
              billingGroup,
              adGroup,
              period,
              range,
              filters: {
                cloudRegionId: cloudRegionId &&
                cloudRegionId.length > 0
                  ? cloudRegionId
                  : undefined
              }
            }}
          >
            <Layout
              layout={GeneralReportLayout.Layout}
              gridStyles={GeneralReportLayout.GridStyles}
            >
              <div key={GeneralReportLayout.Panels.summary}>
                <Layout.Panel
                  style={{
                    display: 'flex',
                    flexDirection: 'column',
                    minHeight: 0
                  }}
                >
                  <BillingTable
                    compute={summaryCompute}
                    storages={summaryStorages}
                    computeDiscounts={computeDiscounts}
                    storagesDiscounts={storageDiscounts}
                  />
                  <ResizableContainer style={{flex: 1}}>
                    {
                      ({width, height}) => (
                        <Summary
                          compute={summaryCompute}
                          storages={summaryStorages}
                          computeDiscounts={computeDiscounts}
                          storagesDiscounts={storageDiscounts}
                          title="Summary"
                          style={{width, height}}
                        />
                      )
                    }
                  </ResizableContainer>
                </Layout.Panel>
              </div>
              <div key={GeneralReportLayout.Panels.resources}>
                <Layout.Panel>
                  <ResizableContainer style={{width: '100%', height: '100%'}}>
                    {
                      ({height}) => (
                        <GroupedBarChart
                          request={resources}
                          discountsMapper={{
                            'Storage': storageDiscounts,
                            'Compute instances': computeDiscounts
                          }}
                          title="Resources"
                          displayQuotasSummary
                          onSelect={onResourcesSelect}
                          height={height}
                        />
                      )
                    }
                  </ResizableContainer>
                </Layout.Panel>
              </div>
              <div key={GeneralReportLayout.Panels.runners}>
                <Layout.Panel>
                  <ResizableContainer style={{width: '100%', height: '100%'}}>
                    {
                      ({height}) => (
                        <div>
                          <UsersChart
                            requests={[billingCentersComputeRequest, billingCentersStorageRequest]}
                            discounts={[computeDiscounts, storageDiscounts]}
                            title={title}
                            onSelect={onUserSelect}
                            style={{height: height / 2.0}}
                          />
                          <BillingCentersTable
                            requests={[
                              billingCentersComputeTableRequest,
                              billingCentersStorageTableRequest
                            ]}
                            discounts={[computeDiscounts, storageDiscounts]}
                            columns={tableColumns}
                            onUserSelect={onUserSelect}
                            height={height / 2.0}
                          />
                        </div>
                      )
                    }
                  </ResizableContainer>
                </Layout.Panel>
              </div>
            </Layout>
          </Export.Consumer>
        )
      }
    </Discounts.Consumer>
  );
}