RSPEED-270 - Add buttons making requests to backend ith database

fec.config.js

@@ -22,6 +22,9 @@ module.exports = {
     '/api/chrome-service/v1/static': {
       host: 'http://localhost:8000',
     },
+    '/api/digital-roadmap/v1': {
+      host: 'http://localhost:8081/',
+    },
   },
 
   /**

src/Components/DynamicComponents/DynamicTag.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+interface DynamicTagProps {
+  tag: string;
+  text: string;
+}
+
+const DynamicTag: React.FC<DynamicTagProps> = ({ tag, text }) => {
+  const Tag = tag as keyof JSX.IntrinsicElements;
+
+  return <Tag>{text}</Tag>;
+};
+
+export default DynamicTag;

src/Components/Released/released.scss

@@ -5,3 +5,15 @@
   margin: $ins-margin;
   display: block;
 }
+
+.non-relevant {
+  color: gray;
+}
+
+.pf-v5-c-sidebar {
+  background-color: white;
+}
+
+.pf-v5-c-sidebar__main {
+  padding: 0 1em;
+}

src/Components/Released/released.tsx

@@ -1,6 +1,7 @@
 import './released.scss';
 import React, { Suspense, lazy } from 'react';
 import {
+  Button,
   Sidebar,
   SidebarContent,
   SidebarPanel,
@@ -13,14 +14,44 @@ import {
   ToolbarItem,
 } from '@patternfly/react-core';
 
+import { getRelevantReleaseNotes } from '../../api';
+
+const DynamicTag = lazy(() => import('../DynamicComponents/DynamicTag'));
+
 const ToggleGroupReleasedView = lazy(
   () => import('../FilterComponents/CustomToggleGroup')
 );
 const SelectOptionVariations = lazy(
   () => import('../FilterComponents/CustomDropdown')
 );
 
+type ReleaseNote = {
+  title: string;
+  text: string;
+  tag: string;
+  relevant: boolean;
+};
+
 const ReleasedTab: React.FC<React.PropsWithChildren> = () => {
+  const emptyReleaseNotes: ReleaseNote[] = [];
+  const [relevantReleaseNotes, setRelevantReleaseNotes] =
+    React.useState(emptyReleaseNotes);
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  const fetchData = (major: number, minor: number, keyword: string) => {
+    setIsLoading(true);
+    getRelevantReleaseNotes(major, minor, keyword)
+      .then((data) => {
+        const releaseNoteParagraphs: ReleaseNote[] = data || [];
+        setRelevantReleaseNotes(releaseNoteParagraphs);
+        setIsLoading(false);
+      })
+      .catch(() => {
+        // Dispatch notif here
+        setIsLoading(false);
+      });
+  };
+
   const items = (
     <React.Fragment>
       <ToolbarItem variant="search-filter">
@@ -38,8 +69,26 @@ const ReleasedTab: React.FC<React.PropsWithChildren> = () => {
           <ToggleGroupReleasedView />
         </Suspense>
       </ToolbarItem>
+      <ToolbarItem>
+        <Button onClick={() => fetchData(9, 5, 'security')} variant="primary">
+          GET 9.5 with security
+        </Button>
+      </ToolbarItem>
+      <ToolbarItem>
+        <Button
+          onClick={() => fetchData(9, 6, 'virtualization')}
+          variant="primary"
+        >
+          GET 9.6 with virtualization
+        </Button>
+      </ToolbarItem>
     </React.Fragment>
   );
+
+  // useEffect(() => {
+  //   fetchData();
+  // }, []);
+
   return (
     <>
       <Toolbar id="toolbar-items-example">
@@ -48,25 +97,22 @@ const ReleasedTab: React.FC<React.PropsWithChildren> = () => {
       <Sidebar hasBorder hasGutter>
         <SidebarPanel>Sidebar panel - TODO Sidebar component</SidebarPanel>
         <SidebarContent>
-          <p>TODO table component</p>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-            dapibus nulla id augue dictum commodo. Donec mollis arcu massa,
-            sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at
-            augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem,
-            malesuada ac lectus nec, porta pretium neque. Ut convallis libero
-            sit amet metus mattis, vel facilisis lorem malesuada. Duis
-            consectetur ante sit amet magna efficitur, a interdum leo vulputate.
-          </p>
-          <p>
-            Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci
-            varius natoque penatibus et magnis dis parturient montes, nascetur
-            ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu
-            bibendum risus. Suspendisse porta euismod tortor, at elementum odio
-            suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a
-            pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit.
-            Vestibulum ut augue vitae erat vulputate bibendum a ut magna.
-          </p>
+          {isLoading ? (
+            <Spinner />
+          ) : relevantReleaseNotes.length > 0 ? (
+            relevantReleaseNotes.map((note, index) => (
+              <div
+                key={index}
+                className={note.relevant ? 'relevant' : 'non-relevant'}
+                style={{ marginBottom: '0.5em' }}
+              >
+                <DynamicTag tag={note.tag} text={note.title} />
+                <p>{note.text}</p>
+              </div>
+            ))
+          ) : (
+            <p>No release notes found</p>
+          )}
         </SidebarContent>
       </Sidebar>
     </>

src/Components/UpcomingTable/UpcomingTable.tsx

@@ -76,9 +76,6 @@ export const UpcomingTable: React.FunctionComponent<UpcomingTableProps> = (
     // Search location with location selections
     const matchesDateValue = dateSelections.includes(repo.date);
 
-    console.log(
-      `repo: ${repo.release} searchValue: ${searchValue}, matchesNameValue: ${matchesNameValue}, releaseSelection: ${releaseSelection}, matchesReleaseValue: ${matchesReleaseValue}, dateSelections: ${dateSelections}, matchesDateValue: ${matchesDateValue}`
-    );
     return (
       (searchValue === '' || matchesNameValue) &&
       (releaseSelection === '' || matchesReleaseValue) &&

src/api.ts

@@ -0,0 +1,60 @@
+import axios from 'axios';
+import { AxiosResponse } from 'axios';
+
+import {
+  DR_API,
+  DR_RELEASE_NOTES,
+  INVENTORY_API_ROOT,
+  INVENTORY_HOSTS_ROOT,
+} from './constants';
+
+/* Digital Roadmap */
+
+export const getRelevantReleaseNotes = async (
+  major: number,
+  minor: number,
+  keyword: string
+) => {
+  const path = DR_API.concat(DR_RELEASE_NOTES).concat('/get-relevant-notes');
+  const params = `?major=${major}&minor=${minor}&keywords=${keyword}`;
+  const response = await axios.get(path.concat(params)).catch(function (error) {
+    return error;
+  });
+
+  return getResponseOrError(response);
+};
+
+/* Inventory */
+
+export const inventoryFetchSystems = (path: string = '') => {
+  return getInventory(INVENTORY_HOSTS_ROOT.concat(path));
+};
+
+export const inventoryFetchSystemsByIds = (
+  ids: string[],
+  path: string = ''
+) => {
+  return getInventory(
+    INVENTORY_HOSTS_ROOT.concat('/').concat(ids.join(',')).concat(path)
+  );
+};
+
+const getInventory = async (path: string) => {
+  const response = await axios
+    .get(INVENTORY_API_ROOT.concat(path))
+    .catch(function (error) {
+      return error;
+    });
+
+  return getResponseOrError(response);
+};
+
+/* Common functions */
+
+const getResponseOrError = (response: AxiosResponse) => {
+  if (response.status === 200) {
+    return response.data;
+  } else {
+    return response;
+  }
+};

src/constants.ts

@@ -1 +1,5 @@
-export const DIGITAL_ROADMAP_API = '/api/digital-roadmap/v1';
+export const DR_API = '/api/digital-roadmap/v1';
+export const DR_RELEASE_NOTES = '/release-notes';
+
+export const INVENTORY_API_ROOT = '/api/inventory/v1';
+export const INVENTORY_HOSTS_ROOT = '/hosts';