integrate graph and code snippet

ManageIQ · Mar 29, 2023 · 5ac5f89 · 5ac5f89
1 parent b058138
commit 5ac5f89
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 9 deletions.
diff --git a/app/javascript/components/automated-workflows/automated-workflows-dummy-data.js b/app/javascript/components/automated-workflows/automated-workflows-dummy-data.js
@@ -60,7 +60,7 @@ const summary = (recordId) => ([
   { label: __('Default'), value: 'false' },
 ]);
 
-export const jsonData = `        {
+export const jsonData = ` {
   "Comment": "An example of the Amazon States Language using a choice state.",
   "StartAt": "FirstState",
   "States": {
@@ -148,8 +148,7 @@ export const jsonData = `        {
       "End": true
     }
   }
-}
-`;
+}`;
 
 export const automatedWorkflowData = (recordId) => (
   {

diff --git a/app/javascript/components/automated-workflows/summary.jsx b/app/javascript/components/automated-workflows/summary.jsx
@@ -3,8 +3,10 @@ import PropTypes from 'prop-types';
 import {
   Loading, Tabs, Tab, CodeSnippet,
 } from 'carbon-components-react';
+import AWSSfnGraph from '@tshepomgaga/aws-sfn-graph';
 import MiqStructuredList from '../miq-structured-list';
 import { automatedWorkflowData } from './automated-workflows-dummy-data';
+import '@tshepomgaga/aws-sfn-graph/index.css';
 
 const AutomatedWorkflowSummary = ({ recordId }) => {
   const tabLabels = [
@@ -50,14 +52,24 @@ const AutomatedWorkflowSummary = ({ recordId }) => {
   };
 
   /** Function to render the code snipper component */
-  const renderCodeSnippet = () => (
-    <CodeSnippet type="multi">
-      {data.jsonData}
-    </CodeSnippet>
-  );
+  const renderCodeSnippet = () => {
+    console.log(data.jsonData);
+    return (
+      <CodeSnippet type="multi">
+        {data.jsonData}
+      </CodeSnippet>
+    );
+  };
 
   /** Function to render the graph. */
-  const renderGraph = () => (<div>Graph will be rendered here</div>);
+  const renderGraph = () => (
+    <AWSSfnGraph
+      data={data.jsonData}
+      width={500}
+      height={500}
+      onError={(error) => console.log('error information', error)}
+    />
+  );
 
   /** Function to render various tab contents based on selected tab. */
   const renderTabContents = () => {

diff --git a/package.json b/package.json
@@ -41,6 +41,7 @@
     "@manageiq/ui-components": "1.4.4",
     "@novnc/novnc": "~1.2.0",
     "@pf3/select": "~1.12.6",
+    "@tshepomgaga/aws-sfn-graph": "0.0.6",
     "actioncable": "^5.2.4-2",
     "angular": "~1.6.6",
     "angular-animate": "~1.6.6",

diff --git a/yarn.lock b/yarn.lock
@@ -2057,6 +2057,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tshepomgaga/aws-sfn-graph@npm:0.0.6":
+  version: 0.0.6
+  resolution: "@tshepomgaga/aws-sfn-graph@npm:0.0.6"
+  checksum: 1e8263472c2ec0579d459c04fcd9aa1e5cbc37c07dfaa594b1f1c295603db6d97741e5629b2a60da8e7ce04a1899b4cf0afe1e625ff43a27d877d1495e6df258
+  languageName: node
+  linkType: hard
+
 "@types/babel__core@npm:^7.1.0, @types/babel__core@npm:^7.1.7":
   version: 7.20.0
   resolution: "@types/babel__core@npm:7.20.0"
@@ -11377,6 +11384,7 @@ fsevents@^1.2.7:
     "@manageiq/ui-components": 1.4.4
     "@novnc/novnc": ~1.2.0
     "@pf3/select": ~1.12.6
+    "@tshepomgaga/aws-sfn-graph": 0.0.6
     actioncable: ^5.2.4-2
     angular: ~1.6.6
     angular-animate: ~1.6.6