EC2 instances empty state

https://issues.redhat.com/browse/COST-5546
project-koku · Oct 16, 2024 · df0e3d4 · df0e3d4
1 parent a2cafe2
commit df0e3d4
Show file tree

Hide file tree

Showing 8 changed files with 213 additions and 12 deletions.
diff --git a/locales/data.json b/locales/data.json
@@ -1103,6 +1103,18 @@
         "value": "Clusters"
       }
     ],
+    "copied": [
+      {
+        "type": 0,
+        "value": "Copied"
+      }
+    ],
+    "copy": [
+      {
+        "type": 0,
+        "value": "Copy"
+      }
+    ],
     "cost": [
       {
         "type": 0,
@@ -10973,13 +10985,27 @@
     "noInstancesDesc": [
       {
         "type": 0,
-        "value": "Add an Amazon EC2 instance to see a total cost breakdown of your spend by instances."
+        "value": "To view the cost of EC2 instances, label your resources with the following tag and key value pair in the AWS console."
+      }
+    ],
+    "noInstancesMoreInfo": [
+      {
+        "type": 0,
+        "value": "For more information, "
+      },
+      {
+        "type": 1,
+        "value": "seeDocumentation"
+      },
+      {
+        "type": 0,
+        "value": "."
       }
     ],
     "noInstancesTitle": [
       {
         "type": 0,
-        "value": "No instances available"
+        "value": "View cost of EC2 instances"
       }
     ],
     "noMappedTags": [
@@ -12059,6 +12085,12 @@
         "value": "Save"
       }
     ],
+    "seeDocumentation": [
+      {
+        "type": 0,
+        "value": "see documentation"
+      }
+    ],
     "select": [
       {
         "type": 0,
@@ -12862,6 +12894,12 @@
         "value": "Value"
       }
     ],
+    "tagKey": [
+      {
+        "type": 0,
+        "value": "Tag key:"
+      }
+    ],
     "tagKeyChild": [
       {
         "type": 0,
@@ -13110,6 +13148,12 @@
         "value": "Tag names"
       }
     ],
+    "tagValue": [
+      {
+        "type": 0,
+        "value": "Tag value:"
+      }
+    ],
     "timeOfExport": [
       {
         "type": 0,

diff --git a/locales/translations.json b/locales/translations.json
@@ -71,6 +71,8 @@
   "clusterId": "Cluster id",
   "clusterInfo": "Cluster information",
   "clusters": "Clusters",
+  "copied": "Copied",
+  "copy": "Copy",
   "cost": "Cost",
   "costBreakdownAriaDesc": "Breakdown of markup, raw, and usage costs",
   "costBreakdownAriaLabel": "A description of markup, raw cost and usage cost",
@@ -412,8 +414,9 @@
   "noDataStateRefresh": "Refresh this page",
   "noDataStateTitle": "Still processing the data",
   "noExportsStateTitle": "There are no export files available",
-  "noInstancesDesc": "Add an Amazon EC2 instance to see a total cost breakdown of your spend by instances.",
-  "noInstancesTitle": "No instances available",
+  "noInstancesDesc": "To view the cost of EC2 instances, label your resources with the following tag and key value pair in the AWS console.",
+  "noInstancesMoreInfo": "For more information, {seeDocumentation}.",
+  "noInstancesTitle": "View cost of EC2 instances",
   "noMappedTags": "No mapped tags",
   "noMappedTagsDesc": "Map multiple tags across data sources to be used as a single tag key for report grouping and filtering. {warning} Changes will be reflected within 24 hours. {learnMore}",
   "noMappedTagsWarning": "Tags must be enabled to be mapped.",
@@ -539,6 +542,7 @@
   "rhelMemoryUsageAndRequests": "Memory usage and requests",
   "rhelVolumeUsageAndRequests": "Volume usage and requests",
   "save": "Save",
+  "seeDocumentation": "see documentation",
   "select": "Select...",
   "selectAll": "Select all",
   "selectCategories": "Select categories to enable or disable",
@@ -585,6 +589,7 @@
   "tagHeadingKey": "Key",
   "tagHeadingTitle": "Tags ({value})",
   "tagHeadingValue": "Value",
+  "tagKey": "Tag key:",
   "tagKeyChild": "Child tag keys",
   "tagKeyParent": "Parent tag key",
   "tagKeyParentSource": "Parent integration",
@@ -617,6 +622,7 @@
   "tagMappingWizardSuccess": "Tag mapping successful",
   "tagMappingWizardSuccessDesc": "Your tag keys were successfully mapped. Changes will be reflected in report summarizations within 24 hours.",
   "tagNames": "Tag names",
+  "tagValue": "Tag value:",
   "timeOfExport": "Time of export",
   "to": "to",
   "toolBarBulkSelectAll": "Select all ({value} items)",
@@ -642,4 +648,4 @@
   "workerUnallocated": "Worker unallocated",
   "workerUnallocatedDesc": "Distribute unused and non-reserved resource costs to projects",
   "yes": "Yes"
-}
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -85,6 +85,7 @@
     "@eslint/compat": "^1.2.0",
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.12.0",
+    "@formatjs/cli": "^6.2.15",
     "@formatjs/ecma402-abstract": "^2.2.0",
     "@formatjs/fast-memoize": "^2.2.1",
     "@formatjs/intl-localematcher": "^0.5.5",

diff --git a/src/locales/messages.ts b/src/locales/messages.ts
@@ -405,6 +405,16 @@ export default defineMessages({
     description: 'Clusters',
     id: 'clusters',
   },
+  copied: {
+    defaultMessage: 'Copied',
+    description: 'Copied',
+    id: 'copied',
+  },
+  copy: {
+    defaultMessage: 'Copy',
+    description: 'Copy',
+    id: 'copy',
+  },
   cost: {
     defaultMessage: 'Cost',
     description: 'Cost',
@@ -2635,13 +2645,20 @@ export default defineMessages({
     id: 'noExportsStateTitle',
   },
   noInstancesDesc: {
-    defaultMessage: 'Add an Amazon EC2 instance to see a total cost breakdown of your spend by instances.',
-    description: 'Add an Amazon EC2 instance to see a total cost breakdown of your spend by instances.',
+    defaultMessage:
+      'To view the cost of EC2 instances, label your resources with the following tag and key value pair in the AWS console.',
+    description:
+      'To view the cost of EC2 instances, label your resources with the following tag and key value pair in the AWS console.',
     id: 'noInstancesDesc',
   },
+  noInstancesMoreInfo: {
+    defaultMessage: 'For more information, {seeDocumentation}.',
+    description: 'For more information, see documentation.',
+    id: 'noInstancesMoreInfo',
+  },
   noInstancesTitle: {
-    defaultMessage: 'No instances available',
-    description: 'No instances available',
+    defaultMessage: 'View cost of EC2 instances',
+    description: 'View cost of EC2 instances',
     id: 'noInstancesTitle',
   },
   noMappedTags: {
@@ -3314,6 +3331,11 @@ export default defineMessages({
     description: 'Save',
     id: 'save',
   },
+  seeDocumentation: {
+    defaultMessage: 'see documentation',
+    description: 'see documentation',
+    id: 'seeDocumentation',
+  },
   select: {
     defaultMessage: 'Select...',
     description: 'Select...',
@@ -3584,6 +3606,11 @@ export default defineMessages({
     description: 'Value',
     id: 'tagHeadingValue',
   },
+  tagKey: {
+    defaultMessage: 'Tag key:',
+    description: 'Tag keys',
+    id: 'tagKey',
+  },
   tagKeyChild: {
     defaultMessage: 'Child tag keys',
     description: 'Child tag keys',
@@ -3758,6 +3785,11 @@ export default defineMessages({
     description: 'Tag Names',
     id: 'tagNames',
   },
+  tagValue: {
+    defaultMessage: 'Tag value:',
+    description: 'Tag value',
+    id: 'tagValue',
+  },
   timeOfExport: {
     defaultMessage: 'Time of export',
     description: 'Time of export',

diff --git a/src/routes/components/page/noInstances/noInstances.styles.ts b/src/routes/components/page/noInstances/noInstances.styles.ts
@@ -0,0 +1,24 @@
+import global_spacer_lg from '@patternfly/react-tokens/dist/js/global_spacer_lg';
+import global_spacer_sm from '@patternfly/react-tokens/dist/js/global_spacer_sm';
+import global_spacer_xs from '@patternfly/react-tokens/dist/js/global_spacer_xs';
+
+export const styles = {
+  clipboardContainer: {
+    textAlign: 'left',
+  },
+  moreInfo: {
+    display: 'block',
+  },
+  tagKey: {
+    marginTop: global_spacer_lg.var,
+  },
+  tagKeyLabel: {
+    marginRight: global_spacer_sm.var,
+  },
+  tagValue: {
+    marginTop: global_spacer_xs.var,
+  },
+  tagValueLabel: {
+    marginRight: global_spacer_sm.var,
+  },
+} as { [className: string]: React.CSSProperties };
diff --git a/src/routes/components/page/noInstances/noInstancesState.tsx b/src/routes/components/page/noInstances/noInstancesState.tsx
@@ -1,16 +1,20 @@
 import {
+  ClipboardCopy,
   EmptyState,
   EmptyStateBody,
+  EmptyStateFooter,
   EmptyStateHeader,
   EmptyStateIcon,
   EmptyStateVariant,
 } from '@patternfly/react-core';
-import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import { TagIcon } from '@patternfly/react-icons/dist/esm/icons/tag-icon';
 import messages from 'locales/messages';
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl';
 import { injectIntl } from 'react-intl';
 
+import { styles } from './noInstances.styles';
+
 interface NoInstancesStateOwnProps {
   // TBD...
 }
@@ -25,10 +29,49 @@ class NoInstancesStateBase extends React.Component<NoInstancesStateProps, any> {
       <EmptyState variant={EmptyStateVariant.lg} className="pf-m-redhat-font">
         <EmptyStateHeader
           titleText={intl.formatMessage(messages.noInstancesTitle)}
-          icon={<EmptyStateIcon icon={PlusCircleIcon} />}
+          icon={<EmptyStateIcon icon={TagIcon} />}
           headingLevel="h1"
         />
-        <EmptyStateBody>{intl.formatMessage(messages.noInstancesDesc)}</EmptyStateBody>
+        <EmptyStateBody>
+          <div>{intl.formatMessage(messages.noInstancesDesc)}</div>
+          <div style={styles.clipboardContainer}>
+            <div style={styles.tagKey}>
+              <span style={styles.tagValueLabel}>{intl.formatMessage(messages.tagKey)}</span>
+              <ClipboardCopy
+                clickTip={intl.formatMessage(messages.copied)}
+                hoverTip={intl.formatMessage(messages.copy)}
+                isCode
+                isReadOnly
+                variant="inline-compact"
+              >
+                com_redhat_insights_cost_management
+              </ClipboardCopy>
+            </div>
+            <div style={styles.tagValue}>
+              <span style={styles.tagValueLabel}>{intl.formatMessage(messages.tagValue)}</span>
+              <ClipboardCopy
+                clickTip={intl.formatMessage(messages.copied)}
+                hoverTip={intl.formatMessage(messages.copy)}
+                isCode
+                isReadOnly
+                variant="inline-compact"
+              >
+                ec2_compute
+              </ClipboardCopy>
+            </div>
+          </div>
+        </EmptyStateBody>
+        <EmptyStateFooter>
+          <div style={styles.moreInfo}>
+            {intl.formatMessage(messages.noInstancesMoreInfo, {
+              seeDocumentation: (
+                <a href={intl.formatMessage(messages.docsTagMapping)} rel="noreferrer" target="_blank">
+                  {intl.formatMessage(messages.seeDocumentation)}
+                </a>
+              ),
+            })}
+          </div>
+        </EmptyStateFooter>
       </EmptyState>
     );
   }

diff --git a/src/routes/details/awsBreakdown/instances/instances.tsx b/src/routes/details/awsBreakdown/instances/instances.tsx
@@ -311,6 +311,7 @@ const Instances: React.FC<InstancesProps> = ({ costType, currency }) => {
   if (!query.filter_by && !hasInstances && reportFetchStatus === FetchStatus.complete) {
     return <NoInstances />;
   }
+  return <NoInstances />;
   const computedItems = getComputedItems();
 
   return (