Merge remote-tracking branch 'origin/prod-beta' into prod-stable

.github/workflows/pull_request.yml

@@ -3,7 +3,7 @@
 name: Pull request
 on:
   pull_request:
-    branches: [ main, master, ci-stable, prod-beta, prod-stable, qa-beta, qa-stable, stage-beta, stage-stable ]
+    branches: [ main, master, ci-stable, prod-beta, prod-stable, qa-beta, qa-stable, stage-beta, stage-stable, react-intl_changeover ]
 env:
   BRANCH: ${{ github.base_ref }}
 
@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [14.x]
     steps:
       - name: Checkout code
         uses: actions/checkout@v2

.gitignore

@@ -51,3 +51,4 @@ public/
 dist/
 .DS_Store
 .idea
+/report.*.json

.travis.yml

@@ -1,7 +1,7 @@
 language: node_js
 sudo: false
 node_js:
-  - "12"
+  - "14"
 cache: yarn
 before_script: yarn global add codecov @yarnpkg/lockfile
 script:

.travis/custom_release.sh

@@ -4,14 +4,11 @@ set -x
 
 # If current dev branch is master, push to build repo stage-beta
 if [[ "${TRAVIS_BRANCH}" = "master" || "${TRAVIS_BRANCH}" = "main" ]]; then
-  .travis/release.sh "ci-beta"
-
-  # Release stage
-  rm -rf $APP_BUILD_DIR/.git
   .travis/release.sh "stage-beta"
 fi
 
 # If current dev branch is deployment branch, push to build repo
-if [[ "${TRAVIS_BRANCH}" = "ci-stable" || "${TRAVIS_BRANCH}" = "stage-stable" || "${TRAVIS_BRANCH}" = "prod-beta" || "${TRAVIS_BRANCH}" = "prod-stable" ]]; then
+if [[ "${TRAVIS_BRANCH}" = "stage-stable" || "${TRAVIS_BRANCH}" = "prod-beta" || "${TRAVIS_BRANCH}" = "prod-stable" ||
+      "${TRAVIS_BRANCH}" = "ci-beta" || "${TRAVIS_BRANCH}" = "ci-stable" ]]; then
   .travis/release.sh "${TRAVIS_BRANCH}"
 fi

README.md

@@ -8,17 +8,36 @@ User interface for Koku based on Patternfly [![Patternfly][pf-logo]][patternfly]
 To submit an issue please visit https://issues.redhat.com/projects/COST/
 
 ## Requirements
-* [NodeJS v12+][nodejs]
-* [yarn 1.21+][yarn]
+* [NodeJS v14+][nodejs]
+* [yarn 1.22+][yarn]
 
 ## Getting Started
 1. Install requirements listed above.
 2. Clone the repository, and open a terminal in the base of this project.
 3. Run the command `yarn` to install all the dependencies.
-4. Clone the [insights-proxy](https://github.com/RedHatInsights/insights-proxy) repository.
-5. Run *insights-proxy* setup steps.
+
+### Running Development Server against a hosted Koku instance with webpack proxy
+Note that this works with the stage, prod, and CI environments.
+
+#### Start Development Server
+
+```
+yarn start
+```
+
+Follow the prompts that follow.
+
+* Which platform environment you want to use; `stage`
+* Which the UI environment you want to use; `beta`
+* Do you want to use the Insights proxy; `no`
+
+Point your browser to the [Overview page](https://stage.foo.redhat.com:1337/beta/openshift/cost-management)
 
 ### Running Development Server against a hosted Koku instance behind Insights Proxy
+Note that this only works with the prod and CI environments. *This does not work with stage.*
+
+1. Clone the [insights-proxy](https://github.com/RedHatInsights/insights-proxy) repository.
+2. Run *insights-proxy* setup steps.
 
 #### Start Insights Proxy
 
@@ -31,16 +50,14 @@ SPANDX_CONFIG=/path/to/koku-ui/config/spandx.config.js bash /path/to/insights-pr
 #### Start Development Server
 
 ```
-APP_ENV=proxy yarn start
+yarn start
 ```
 
-As a convenience `start:dev` has been provided to work behind the proxy.
-
-```
-yarn start:dev
-```
+* Which platform environment you want to use; `ci`
+* Which the UI environment you want to use; `beta`
+* Do you want to use the Insights proxy; `yes`
 
-Point your browser to the [Overview page](https://ci.foo.redhat.com:1337/beta/cost-management/)
+Point your browser to the [Overview page](https://ci.foo.redhat.com:1337/beta/cost-management)
 
 ### Building
 ```

package.json

@@ -32,14 +32,14 @@
   },
   "dependencies": {
     "@fortawesome/free-solid-svg-icons": "5.15.2",
-    "@patternfly/patternfly": "^4.115.2",
-    "@patternfly/react-charts": "^6.15.3",
-    "@patternfly/react-core": "^4.135.0",
-    "@patternfly/react-icons": "^4.11.0",
-    "@patternfly/react-styles": "^4.11.0",
-    "@patternfly/react-table": "^4.29.0",
-    "@patternfly/react-tokens": "^4.12.0",
-    "@redhat-cloud-services/frontend-components": "^3.3.5",
+    "@patternfly/patternfly": "^4.125.3",
+    "@patternfly/react-charts": "^6.15.14",
+    "@patternfly/react-core": "^4.147.0",
+    "@patternfly/react-icons": "^4.11.8",
+    "@patternfly/react-styles": "^4.11.8",
+    "@patternfly/react-table": "^4.29.37",
+    "@patternfly/react-tokens": "^4.12.9",
+    "@redhat-cloud-services/frontend-components": "^3.3.8",
     "@redhat-cloud-services/frontend-components-notifications": "^3.2.2",
     "@redhat-cloud-services/frontend-components-utilities": "^3.2.3",
     "@redhat-cloud-services/rbac-client": "^1.0.100",
@@ -77,7 +77,8 @@
     "xstate": "4.16.2"
   },
   "devDependencies": {
-    "@redhat-cloud-services/frontend-components-config-utilities": "^1.4.4",
+    "@formatjs/cli": "4.2.12",
+    "@redhat-cloud-services/frontend-components-config-utilities": "^1.4.6",
     "@testing-library/react": "11.2.5",
     "@types/enzyme": "3.10.8",
     "@types/jest": "26.0.20",
@@ -93,12 +94,14 @@
     "enzyme-adapter-react-16": "1.15.6",
     "enzyme-to-json": "3.6.1",
     "eslint": "^7.28.0",
+    "eslint-plugin-formatjs": "^2.17.3",
     "eslint-plugin-jsdoc": "^35.1.3",
     "eslint-plugin-markdown": "^2.2.0",
     "eslint-plugin-patternfly-react": "^4.1.5",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-simple-import-sort": "^5.0.3",
+    "eslint-plugin-sort-keys-fix": "^1.1.2",
     "git-revision-webpack-plugin": "3.0.6",
     "glob": "^7.1.7",
     "html-loader": "2.0.0",
@@ -113,6 +116,7 @@
     "nodesi": "^1.16.0",
     "null-loader": "4.0.1",
     "prettier": "2.3.2",
+    "react-intl": "5.17.7",
     "rimraf": "^3.0.2",
     "sass": "^1.32.7",
     "sass-loader": "^11.0.1",

scripts/syncLocales.js

@@ -4,7 +4,7 @@ const srcDir = path.resolve(__dirname, '../src/locales');
 
 syncLocales({
   primaryLanguage: 'en',
-  secondaryLanguages: ['de', 'ja'],
+  secondaryLanguages: [], // ['de', 'ja'],
   localesFolder: srcDir,
   // overridePluralRules: pluralResolver => pluralResolver.addRule('he', pluralResolver.getRule('en')),
 });

src/api/costModels.ts

@@ -25,6 +25,7 @@ export interface CostModelRequest {
   name: string;
   source_type: string;
   description: string;
+  distribution: string;
   source_uuids: string[];
   rates: RateRequest[];
   markup: { value: string; unit: string };

src/api/exports/awsOcpExport.ts

@@ -0,0 +1,12 @@
+import { ReportTypePaths } from 'api/reports/awsOcpReports';
+import { ReportType } from 'api/reports/report';
+import axios from 'axios';
+
+export function runExport(reportType: ReportType, query: string) {
+  const path = ReportTypePaths[reportType];
+  return axios.get<string>(`${path}?${query}`, {
+    headers: {
+      Accept: 'text/csv',
+    },
+  });
+}

src/api/exports/azureOcpExport.ts

@@ -0,0 +1,12 @@
+import { ReportTypePaths } from 'api/reports/azureOcpReports';
+import { ReportType } from 'api/reports/report';
+import axios from 'axios';
+
+export function runExport(reportType: ReportType, query: string) {
+  const path = ReportTypePaths[reportType];
+  return axios.get<string>(`${path}?${query}`, {
+    headers: {
+      Accept: 'text/csv',
+    },
+  });
+}

src/api/exports/exportUtils.ts

@@ -1,8 +1,11 @@
 import { ReportPathsType, ReportType } from 'api/reports/report';
 
 import { runExport as runAwsExport } from './awsExport';
+import { runExport as runAwsOcpExport } from './awsOcpExport';
 import { runExport as runAzureExport } from './azureExport';
+import { runExport as runAzureOcpExport } from './azureOcpExport';
 import { runExport as runGcpExport } from './gcpExport';
+import { runExport as runGcpOcpExport } from './gcpOcpExport';
 import { runExport as runIbmExport } from './ibmExport';
 import { runExport as runOcpCloudExport } from './ocpCloudExport';
 import { runExport as runOcpExport } from './ocpExport';
@@ -13,12 +16,21 @@ export function runExport(reportPathsType: ReportPathsType, reportType: ReportTy
     case ReportPathsType.aws:
       report = runAwsExport(reportType, query);
       break;
+    case ReportPathsType.awsOcp:
+      report = runAwsOcpExport(reportType, query);
+      break;
     case ReportPathsType.azure:
       report = runAzureExport(reportType, query);
       break;
+    case ReportPathsType.azureOcp:
+      report = runAzureOcpExport(reportType, query);
+      break;
     case ReportPathsType.gcp:
       report = runGcpExport(reportType, query);
       break;
+    case ReportPathsType.gcpOcp:
+      report = runGcpOcpExport(reportType, query);
+      break;
     case ReportPathsType.ibm:
       report = runIbmExport(reportType, query);
       break;

src/api/exports/gcpOcpExport.ts

@@ -0,0 +1,12 @@
+import { ReportTypePaths } from 'api/reports/gcpOcpReports';
+import { ReportType } from 'api/reports/report';
+import axios from 'axios';
+
+export function runExport(reportType: ReportType, query: string) {
+  const path = ReportTypePaths[reportType];
+  return axios.get<string>(`${path}?${query}`, {
+    headers: {
+      Accept: 'text/csv',
+    },
+  });
+}

src/components/charts/historicalCostChart/historicalCostChart.tsx

@@ -9,7 +9,7 @@ import {
   createContainer,
   getInteractiveLegendEvents,
 } from '@patternfly/react-charts';
-import { Title } from '@patternfly/react-core';
+import { Title, TitleSizes } from '@patternfly/react-core';
 import { default as ChartTheme } from 'components/charts/chartTheme';
 import { getCostRangeString } from 'components/charts/common/chartDatumUtils';
 import { getDateRange } from 'components/charts/common/chartDatumUtils';
@@ -311,7 +311,7 @@ class HistoricalCostChart extends React.Component<HistoricalCostChartProps, Stat
 
     return (
       <div className="chartOverride" ref={this.containerRef}>
-        <Title headingLevel="h2" style={styles.title} size="xl">
+        <Title headingLevel="h2" style={styles.title} size={TitleSizes.xl}>
           {title}
         </Title>
         <div style={{ ...styles.chart, height: adjustedContainerHeight }}>

src/components/charts/historicalTrendChart/historicalTrendChart.tsx

@@ -9,7 +9,7 @@ import {
   createContainer,
   getInteractiveLegendEvents,
 } from '@patternfly/react-charts';
-import { Title } from '@patternfly/react-core';
+import { Title, TitleSizes } from '@patternfly/react-core';
 import { default as ChartTheme } from 'components/charts/chartTheme';
 import { getCostRangeString, getDateRange } from 'components/charts/common/chartDatumUtils';
 import {
@@ -252,7 +252,7 @@ class HistoricalTrendChart extends React.Component<HistoricalTrendChartProps, St
 
     return (
       <div className="chartOverride" ref={this.containerRef}>
-        <Title headingLevel="h2" style={styles.title} size="xl">
+        <Title headingLevel="h2" style={styles.title} size={TitleSizes.xl}>
           {title}
         </Title>
         <div style={{ ...styles.chart, height: containerHeight }}>

src/components/charts/historicalUsageChart/historicalUsageChart.tsx

@@ -9,7 +9,7 @@ import {
   createContainer,
   getInteractiveLegendEvents,
 } from '@patternfly/react-charts';
-import { Title } from '@patternfly/react-core';
+import { Title, TitleSizes } from '@patternfly/react-core';
 import { default as ChartTheme } from 'components/charts/chartTheme';
 import { getDateRange } from 'components/charts/common/chartDatumUtils';
 import { getUsageRangeString } from 'components/charts/common/chartDatumUtils';
@@ -358,7 +358,7 @@ class HistoricalUsageChart extends React.Component<HistoricalUsageChartProps, St
 
     return (
       <div className="chartOverride" ref={this.containerRef}>
-        <Title headingLevel="h2" style={styles.title} size="xl">
+        <Title headingLevel="h2" style={styles.title} size={TitleSizes.xl}>
           {title}
         </Title>
         <div style={{ ...styles.chart, height: adjustedContainerHeight }}>

src/components/reports/reportSummary/reportSummary.tsx

@@ -1,6 +1,6 @@
 import './reportSummary.scss';
 
-import { Card, CardBody, CardFooter, CardTitle, Skeleton, Title } from '@patternfly/react-core';
+import { Card, CardBody, CardFooter, CardTitle, Skeleton, Title, TitleSizes } from '@patternfly/react-core';
 import React from 'react';
 import { WithTranslation, withTranslation } from 'react-i18next';
 import { FetchStatus } from 'store/common';
@@ -17,7 +17,7 @@ interface ReportSummaryProps extends WithTranslation {
 const ReportSummaryBase: React.SFC<ReportSummaryProps> = ({ children, detailsLink, title, subTitle, status }) => (
   <Card className="reportSummary">
     <CardTitle>
-      <Title headingLevel="h2" size="lg">
+      <Title headingLevel="h2" size={TitleSizes.lg}>
         {title}
       </Title>
       {Boolean(subTitle) && <p className="subtitle">{subTitle}</p>}

src/components/reports/reportSummary/reportSummaryAlt.tsx

@@ -1,6 +1,16 @@
 import './reportSummaryAlt.scss';
 
-import { Card, CardBody, CardFooter, CardTitle, Grid, GridItem, Skeleton, Title } from '@patternfly/react-core';
+import {
+  Card,
+  CardBody,
+  CardFooter,
+  CardTitle,
+  Grid,
+  GridItem,
+  Skeleton,
+  Title,
+  TitleSizes,
+} from '@patternfly/react-core';
 import React from 'react';
 import { WithTranslation, withTranslation } from 'react-i18next';
 import { FetchStatus } from 'store/common';
@@ -28,7 +38,7 @@ const OcpCloudReportSummaryAltBase: React.SFC<OcpCloudReportSummaryAltProps> = (
       <GridItem xl={8}>
         <div className="cost">
           <CardTitle>
-            <Title headingLevel="h2" size="lg">
+            <Title headingLevel="h2" size={TitleSizes.lg}>
               {title}
             </Title>
             {Boolean(subTitle) && <p className="subtitle">{subTitle}</p>}

src/components/state/emptyFilterState/emptyFilterState.tsx

@@ -1,4 +1,4 @@
-import { EmptyState, EmptyStateBody, EmptyStateIcon, Title } from '@patternfly/react-core';
+import { EmptyState, EmptyStateBody, EmptyStateIcon, Title, TitleSizes } from '@patternfly/react-core';
 import { SearchIcon } from '@patternfly/react-icons/dist/js/icons/search-icon';
 import { OcpCloudQuery, parseQuery } from 'api/queries/ocpCloudQuery';
 import React from 'react';
@@ -86,7 +86,7 @@ const EmptyFilterStateBase: React.SFC<EmptyFilterStateProps> = ({
     >
       <EmptyState>
         {getIcon()}
-        <Title headingLevel="h2" size="lg">
+        <Title headingLevel="h2" size={TitleSizes.lg}>
           {title}
         </Title>
         <EmptyStateBody>{subTitle}</EmptyStateBody>