feat(heureka) : Refactor store implementation to implement filtering …

…functionalities for diferent entities (#177) * Merge branch 'main' into renovate/npm-dependencies * feat(heureka): add filtering and search functionality for services tab * adjust store actions and update package-lock.json * CleanUp * CleanUp * add fetch filters value queries and change respective files * Automatic application of license header * fix (heureka): Update the package-lock.json (#164) * fix (heureka): Update the package-lock.json to be able to build it on mac * Update the version * feat(heureka): Substitute vulnerabilities with issues tab using the new issueMatch entity (#175) * fix(heureka): Add the left behind issueMatches.js file (#178) * fix(heureka): Fix merge conflicts in package-lock.json * Adjust relevant imports to use juno npm packages * Correct filter query * feat(heureka) : Add components view (#263) * feat(heureka) : add components view * Automatic application of license header * Install date-fns * feat(heureka): Add the total number of component versions and fix some errors * feat)heureka): Add pagination info to the components query * Using container and stack for styling and some cleanup * add componentInstances to componentVersion in the component query * Change the setting to put pagination on the right side of the page --------- Co-authored-by: License Bot <[email protected]> * Add default filtering * feat(heureka): add filtering and search functionality for services tab * adjust store actions and update package-lock.json * Correct filter query * Automatic application of license header * feat(heureka): Add msg handling per tab and mem tabs to prevent unnecessary re-rendering (#281) * feat(heureka): Add error handling per tab and mem tabs to prevent unnecessary re-rendering * remove error considition to render Messages * move messages inside each tab and add resetMessages * remove unnecessary resetMessages and correct queries * feat(heureka): Refactor controllers and reduce redundencies (#295) * feat(heureka): Refactor controllers and reduce redundencies * Automatic application of license header --------- Co-authored-by: License Bot <[email protected]> * Remove merge conflicts in utils * Remove not adjusted filter test * Resolve test errors * Refactoring store using slices * complete filtering for services tab * generalize filtering for all tabs * Activate the working filter select for services tab * Automatic application of license header * Adjust panel manager and services and issue details impl based on new store slices * CleanUp console.logs * Display search input only on issues tab for now * Display right icon on filter button * Cleanup and improvements based on code review inqueries * Add code comments and some wording and layouting improvements --------- Co-authored-by: License Bot <[email protected]>
cloudoperators · Aug 20, 2024 · d179515 · d179515
1 parent 3babe01
commit d179515
Show file tree

Hide file tree

Showing 40 changed files with 891 additions and 1,135 deletions.
diff --git a/heureka/ui/package-lock.json b/heureka/ui/package-lock.json
diff --git a/heureka/ui/package.json b/heureka/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "heureka",
-  "version": "2.3.5",
+  "version": "2.4.0",
   "author": "UI-Team",
   "contributors": [
     "Hoda Noori, Arturo Reuschenbach Pucernau"
@@ -26,7 +26,6 @@
     "babel-jest": "^29.3.1",
     "babel-plugin-transform-import-meta": "^2.2.0",
     "esbuild": "^0.19.4",
-    "graphql": "^16.8.2",
     "graphql-request": "^7.0.1",
     "immer": "^10.0.0",
     "jest": "^29.3.1",

diff --git a/heureka/ui/public/index.html b/heureka/ui/public/index.html
@@ -6,8 +6,8 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8"/>
-    <link rel="icon" href="favicon.ico" sizes="any"/>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="favicon.ico" sizes="any" />
 
     <title>Heureka Dev</title>
     <style>
@@ -29,17 +29,19 @@
     </style>
     <script>
       // automatically reload on build changes
-      new EventSource("/esbuild").addEventListener("change", () => location.reload())
+      new EventSource("/esbuild").addEventListener("change", () =>
+        location.reload()
+      )
     </script>
   </head>
   <body>
     <script type="module">
       // appProps are generated in development env and added to the build
       import allProps from "./build/appProps.js"
-      import ("./build/index.js").then((app) => {
-        app.mount(document.getElementById("root"), {props: allProps.appProps})
+      import("./build/index.js").then((app) => {
+        app.mount(document.getElementById("root"), { props: allProps.appProps })
       })
     </script>
     <div id="root" data-juno-app="heureka"></div>
   </body>
-</html>
+</html>
diff --git a/heureka/ui/src/App.js b/heureka/ui/src/App.js
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect } from "react"
+import React, { useLayoutEffect } from "react"
 import styles from "./styles.scss"
 import {
   AppShell,
@@ -13,12 +13,19 @@ import {
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { MessagesProvider } from "@cloudoperators/juno-messages-provider"
 import AsyncWorker from "./components/AsyncWorker"
-import StoreProvider, { useActions } from "./components/StoreProvider"
 import TabContext from "./components/tabs/TabContext"
 import { ErrorBoundary } from "react-error-boundary"
+import {
+  useGlobalsActions,
+  useFilterActions,
+  StoreProvider,
+} from "./hooks/useAppStore"
 import PanelManager from "./components/shared/PanelManager"
 
-const App = (props) => {
+function App(props = {}) {
+  const { setLabels, setPredefinedFilters, setActivePredefinedFilter } =
+    useFilterActions()
+  const { setEmbedded, setApiEndpoint } = useGlobalsActions()
   const preErrorClasses = `
   custom-error-pre
   border-theme-error
@@ -27,6 +34,11 @@ const App = (props) => {
   w-full
   `
 
+  useLayoutEffect(() => {
+    setApiEndpoint(props.endpoint)
+    if (props.embedded === "true" || props.embedded === true) setEmbedded(true)
+  }, [])
+
   const fallbackRender = ({ error }) => {
     return (
       <div className="w-1/2">

diff --git a/heureka/ui/src/actions.js b/heureka/ui/src/actions.js
diff --git a/heureka/ui/src/components/AsyncWorker.jsx b/heureka/ui/src/components/AsyncWorker.jsx
@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from "react"
 import useUrlState from "../hooks/useUrlState"
 import useQueryClientFn from "../hooks/useQueryClientFn"
 

diff --git a/heureka/ui/src/components/StoreProvider.jsx b/heureka/ui/src/components/StoreProvider.jsx
diff --git a/heureka/ui/src/components/components/ComponentsList.jsx b/heureka/ui/src/components/components/ComponentsList.jsx
@@ -9,21 +9,42 @@ import {
   DataGridRow,
   DataGridHeadCell,
   DataGridCell,
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  Stack,
 } from "@cloudoperators/juno-ui-components"
 import HintNotFound from "../shared/HintNotFound"
 import HintLoading from "../shared/HintLoading"
 import ComponentsListItem from "./ComponentsListItem"
 
 const ComponentsList = ({ items, isLoading }) => {
-  console.log("components", items)
   return (
     <DataGrid columns={4}>
       <DataGridRow>
         <DataGridHeadCell>Name</DataGridHeadCell>
         <DataGridHeadCell>Type</DataGridHeadCell>
-        <DataGridHeadCell>Total Number of Versions</DataGridHeadCell>
+        <DataGridHeadCell>
+          <Stack direction="vertical">
+            <Tooltip triggerEvent="hover">
+              <TooltipTrigger>Version Count</TooltipTrigger>
+              <TooltipContent>
+                Total Number of Component Versions
+              </TooltipContent>
+            </Tooltip>
+          </Stack>
+        </DataGridHeadCell>
 
-        <DataGridHeadCell>Total Number of Instances</DataGridHeadCell>
+        <DataGridHeadCell>
+          <Stack direction="vertical">
+            <Tooltip triggerEvent="hover">
+              <TooltipTrigger>Instance Count</TooltipTrigger>
+              <TooltipContent>
+                Total Number of Component Instances
+              </TooltipContent>
+            </Tooltip>
+          </Stack>
+        </DataGridHeadCell>
       </DataGridRow>
       {isLoading && !items ? (
         <DataGridRow>

diff --git a/heureka/ui/src/components/components/ComponentsListController.jsx b/heureka/ui/src/components/components/ComponentsListController.jsx
@@ -10,7 +10,7 @@ import ListController from "../shared/ListController"
 const ComponentsListController = () => {
   return (
     <ListController
-      queryKey="components"
+      queryKey="Components"
       entityName="Components"
       ListComponent={ComponentsList}
     />

diff --git a/heureka/ui/src/components/components/ComponentsTab.jsx b/heureka/ui/src/components/components/ComponentsTab.jsx
@@ -10,16 +10,13 @@ import {
   Messages,
   MessagesProvider,
 } from "@cloudoperators/juno-messages-provider"
-import { Container } from "@cloudoperators/juno-ui-components"
 
 const ComponentsTab = () => {
   return (
     <>
       <MessagesProvider>
-        <Filters />
-        <Container py>
-          <Messages />
-        </Container>
+        <Messages />
+        {/* <Filters queryKey={ComponentFilterValues} />  // Should be activated after BE respective implementation*/}
         <ComponentsListController />
       </MessagesProvider>
     </>