Wire up the new AWS EC2 API

https://issues.redhat.com/browse/COST-4855

Author: dlabrecq

src/api/reports/awsReports.ts

@@ -1,5 +1,4 @@
 import { axiosInstance } from 'api';
-import { default as devAxiosInstance } from 'api/apiDev';
 
 import type { Report, ReportData, ReportItem, ReportItemValue, ReportMeta, ReportValue } from './report';
 import { ReportType } from './report';
@@ -63,9 +62,9 @@ export const ReportTypePaths: Partial<Record<ReportType, string>> = {
 export function runReport(reportType: ReportType, query: string) {
   const path = ReportTypePaths[reportType];
 
-  // For use with API development
-  if (reportType === ReportType.ec2Compute) {
-    return devAxiosInstance.get<AwsReport>(`${path}?${query}`);
-  }
+  // For use with API development -- see 'api/apiDev'
+  // if (reportType === ReportType.ec2Compute) {
+  //   return devAxiosInstance.get<AwsReport>(`${path}?${query}`);
+  // }
   return axiosInstance.get<AwsReport>(`${path}?${query}`);
 }

src/api/resources/awsResource.ts

@@ -6,6 +6,8 @@ import { ResourceType } from './resource';
 export const ResourceTypePaths: Partial<Record<ResourceType, string>> = {
   [ResourceType.account]: 'resource-types/aws-accounts/',
   [ResourceType.aws_category]: 'resource-types/aws-categories/',
+  [ResourceType.aws_ec2_instance]: 'resource-types/aws-ec2-compute-instances/',
+  [ResourceType.aws_ec2_os]: 'resource-types/aws-ec2-compute-os/',
   [ResourceType.region]: 'resource-types/aws-regions/',
   [ResourceType.service]: 'resource-types/aws-services/',
 };

src/api/resources/resource.ts

@@ -3,6 +3,7 @@ import type { PagedMetaData, PagedResponse } from 'api/api';
 export interface ResourceData {
   account_alias?: string;
   cluster_alias?: string;
+  instance_name?: string;
   key?: string;
   value?: string | string[];
 }
@@ -13,6 +14,8 @@ export interface Resource extends PagedResponse<ResourceData, PagedMetaData> {}
 export const enum ResourceType {
   account = 'account',
   aws_category = 'aws_category',
+  aws_ec2_instance = 'instance',
+  aws_ec2_os = 'operating_system',
   cluster = 'cluster',
   gcpProject = 'gcp_project',
   node = 'node',

src/api/resources/resourceUtils.ts

@@ -32,6 +32,8 @@ export function isResourceTypeValid(resourcePathsType: ResourcePathsType, resour
     switch (resourceType) {
       case ResourceType.account:
       case ResourceType.aws_category:
+      case ResourceType.aws_ec2_instance:
+      case ResourceType.aws_ec2_os:
       case ResourceType.cluster:
       case ResourceType.gcpProject:
       case ResourceType.node:

src/routes/components/dataToolbar/dataToolbar.tsx

@@ -273,6 +273,9 @@ export class DataToolbarBase extends React.Component<DataToolbarProps, DataToolb
       key,
     });
 
+    if (!(filter && filters)) {
+      return;
+    }
     this.setState(
       {
         filters,

src/routes/components/dataToolbar/utils/category.tsx

@@ -58,7 +58,7 @@ export const getCategoryInput = ({
   return (
     <ToolbarFilter
       categoryName={categoryOption}
-      chips={getChips(filters[categoryOption.key] as Filter[])}
+      chips={getChips(filters?.[categoryOption.key] as Filter[])}
       deleteChip={onDelete}
       key={categoryOption.key}
       showToolbarItem={currentCategory === categoryOption.key}
@@ -71,6 +71,7 @@ export const getCategoryInput = ({
               isDisabled={isDisabled && !_hasFilters}
               onSelect={value => onCategoryInputSelect(value, categoryOption.key)}
               placeholder={intl.formatMessage(messages.filterByPlaceholder, { value: placeholderKey })}
+              resourceKey={categoryOption.resourceKey}
               resourcePathsType={resourcePathsType}
               resourceType={categoryOption.key as ResourceType}
             />
@@ -124,12 +125,12 @@ export const onCategoryInput = ({
   key?: string;
 }) => {
   if (event && event.key && event.key !== 'Enter') {
-    return {};
+    return {}; // For destructure
   }
 
   const val = cleanInput(categoryInput);
   if (val.trim() === '') {
-    return {};
+    return {}; // For destructure
   }
 
   const isExcludes = currentExclude === ExcludeType.exclude;

src/routes/components/dataToolbar/utils/common.ts

@@ -13,6 +13,7 @@ export interface Filters {
 export interface ToolbarChipGroupExt extends ToolbarChipGroup {
   ariaLabelKey?: string;
   placeholderKey?: string;
+  resourceKey?: string;
   selectClassName?: string; // A selector from routes/components/dataToolbar/dataToolbar.scss
   selectOptions?: ToolbarChipGroup[];
 }

src/routes/components/dataToolbar/utils/orgUntits.tsx

@@ -32,14 +32,14 @@ export const getOrgUnitSelect = ({
   const selectOptions: SelectWrapperOption[] = getOrgUnitOptions(orgReport).map(option => ({
     description: option.key,
     compareTo: item =>
-      filters[orgUnitIdKey] ? (filters[orgUnitIdKey] as any).find(filter => filter.value === item.value) : false,
+      filters?.[orgUnitIdKey] ? (filters[orgUnitIdKey] as any).find(filter => filter.value === item.value) : false,
     toString: () => option.name,
     value: option.key,
   }));
 
   const chips = []; // Get selected items as PatternFly's ToolbarChip type
   const selections = []; // Select options and selections must be same type
-  if (filters[orgUnitIdKey] && Array.isArray(filters[orgUnitIdKey])) {
+  if (filters?.[orgUnitIdKey] && Array.isArray(filters[orgUnitIdKey])) {
     (filters[orgUnitIdKey] as any).map(filter => {
       const selection = selectOptions.find(option => option.value === filter.value);
       if (selection) {

src/routes/components/dataToolbar/utils/tags.tsx

@@ -137,7 +137,7 @@ export const getTagValueSelect = ({
   return (
     <ToolbarFilter
       categoryName={categoryName}
-      chips={getChips(filters.tag[tagKeyOption.key])}
+      chips={getChips(filters?.tag?.[tagKeyOption.key])}
       deleteChip={onDelete}
       key={tagKeyOption.key}
       showToolbarItem={currentCategory === tagKey && currentTagKey === tagKeyOption.key}
@@ -147,7 +147,7 @@ export const getTagValueSelect = ({
         onTagValueSelect={onTagValueSelect}
         onTagValueInput={onTagValueInput}
         onTagValueInputChange={onTagValueInputChange}
-        selections={filters.tag[tagKeyOption.key] ? filters.tag[tagKeyOption.key].map(filter => filter.value) : []}
+        selections={filters?.tag?.[tagKeyOption.key] ? filters.tag[tagKeyOption.key].map(filter => filter.value) : []}
         tagKey={currentTagKey}
         tagKeyValue={tagKeyValueInput}
         tagPathsType={tagPathsType}

src/routes/components/export/exportModal.tsx

@@ -13,7 +13,7 @@ import {
   Radio,
   TextInput,
 } from '@patternfly/react-core';
-import type { ReportPathsType } from 'api/reports/report';
+import type { ReportPathsType, ReportType } from 'api/reports/report';
 import type { AxiosError } from 'axios';
 import { format } from 'date-fns';
 import messages from 'locales/messages';
@@ -35,10 +35,12 @@ export interface ExportModalOwnProps {
   groupBy?: string;
   isAllItems?: boolean;
   isOpen: boolean;
+  isTimeScoped?: boolean;
   items?: ComputedReportItem[];
   onClose(isOpen: boolean);
   reportPathsType: ReportPathsType;
   reportQueryString: string;
+  reportType: ReportType;
   resolution?: 'daily' | 'monthly'; // Default resolution
   showAggregateType?: boolean; // Monthly resolution filters are not valid with date range
   showFormatType?: boolean; // Format type; CVS / JSON
@@ -144,9 +146,11 @@ export class ExportModalBase extends React.Component<ExportModalProps, ExportMod
       intl,
       isAllItems,
       isExportsToggleEnabled,
+      isTimeScoped,
       items,
       reportPathsType,
       reportQueryString,
+      reportType,
       showAggregateType = true,
       showFormatType = true,
       showTimeScope = true,
@@ -200,6 +204,7 @@ export class ExportModalBase extends React.Component<ExportModalProps, ExportMod
             formatType={formatType}
             groupBy={groupBy}
             isAllItems={isAllItems}
+            isTimeScoped={isTimeScoped}
             items={items}
             key="confirm"
             timeScope={showTimeScope ? timeScope : undefined}
@@ -208,6 +213,7 @@ export class ExportModalBase extends React.Component<ExportModalProps, ExportMod
             name={defaultName}
             reportPathsType={reportPathsType}
             reportQueryString={reportQueryString}
+            reportType={reportType}
             resolution={resolution}
           />,
           <Button ouiaId="cancel-btn" key="cancel" onClick={this.handleOnClose} variant={ButtonVariant.link}>