wip

konveyor · Jul 5, 2023 · 29a1692 · 29a1692
1 parent 2d7bfe0
commit 29a1692
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 66 deletions.
diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json
@@ -270,6 +270,8 @@
     "jobFunction": "Job function",
     "jobFunctionDeleted": "Job function deleted",
     "jobFunctions": "Job functions",
+    "language": "Language",
+    "label": "Label",
     "loading": "Loading",
     "lowRisk": "Low risk",
     "mavenConfig": "Maven configuration",

diff --git a/client/src/app/pages/dependencies/dependencies.tsx b/client/src/app/pages/dependencies/dependencies.tsx
@@ -35,26 +35,67 @@ import {
 import { useFetchDependencies } from "@app/queries/dependencies";
 import { useSelectionState } from "@migtools/lib-ui";
 import { getHubRequestParams } from "@app/shared/hooks/table-controls";
-import { PageDrawerContent } from "@app/shared/page-drawer-context";
 import { DependencyAppsDetailDrawer } from "./dependency-apps-detail-drawer";
+import { useSharedAffectedApplicationFilterCategories } from "../issues/helpers";
 
 export const Dependencies: React.FC = () => {
   const { t } = useTranslation();
 
+  const allAffectedApplicationsFilterCategories =
+    useSharedAffectedApplicationFilterCategories();
+
   const tableControlState = useTableControlUrlParams({
     columnNames: {
       name: "Dependency name",
       foundIn: "Found in",
-      language: "Language",
+      provider: "Language",
       labels: "Labels",
+      sha: "SHA",
+      version: "Version",
     },
     sortableColumns: ["name", "labels"],
     initialSort: { columnKey: "name", direction: "asc" },
     filterCategories: [
+      ...allAffectedApplicationsFilterCategories,
       {
         key: "name",
         title: t("terms.name"),
         type: FilterType.search,
+        filterGroup: "Dependency",
+        placeholderText:
+          t("actions.filterBy", {
+            what: t("terms.name").toLowerCase(),
+          }) + "...",
+        getServerFilterValue: (value) => (value ? [`*${value[0]}*`] : []),
+      },
+      //TODO: Not implemented on hub
+      // {
+      //   key: "provider",
+      //   title: t("terms.language"),
+      //   type: FilterType.search,
+      //   filterGroup: "Dependency",
+      //   placeholderText:
+      //     t("actions.filterBy", {
+      //       what: t("terms.language").toLowerCase(),
+      //     }) + "...",
+      //   getServerFilterValue: (value) => (value ? [`*${value[0]}*`] : []),
+      // },
+      {
+        key: "version",
+        title: t("terms.label"),
+        type: FilterType.search,
+        filterGroup: "Dependency",
+        placeholderText:
+          t("actions.filterBy", {
+            what: t("terms.label").toLowerCase(),
+          }) + "...",
+        getServerFilterValue: (value) => (value ? [`*${value[0]}*`] : []),
+      },
+      {
+        key: "sha",
+        title: "SHA",
+        type: FilterType.search,
+        filterGroup: "Dependency",
         placeholderText:
           t("actions.filterBy", {
             what: t("terms.name").toLowerCase(),
@@ -75,8 +116,6 @@ export const Dependencies: React.FC = () => {
       ...tableControlState, // Includes filterState, sortState and paginationState
       hubSortFieldKeys: {
         name: "name",
-        // version: "version",
-        // sha: "sha",
         labels: "labels",
       },
     })
@@ -140,8 +179,10 @@ export const Dependencies: React.FC = () => {
                 <TableHeaderContentWithControls {...tableControls}>
                   <Th {...getThProps({ columnKey: "name" })} />
                   <Th {...getThProps({ columnKey: "foundIn" })} />
-                  <Th {...getThProps({ columnKey: "language" })} />
+                  <Th {...getThProps({ columnKey: "provider" })} />
                   <Th {...getThProps({ columnKey: "labels" })} />
+                  <Th {...getThProps({ columnKey: "version" })} />
+                  <Th {...getThProps({ columnKey: "sha" })} />
                 </TableHeaderContentWithControls>
               </Tr>
             </Thead>
@@ -185,15 +226,21 @@ export const Dependencies: React.FC = () => {
                         </Td>
                         <Td
                           width={10}
-                          {...getTdProps({ columnKey: "language" })}
+                          {...getTdProps({ columnKey: "provider" })}
                         >
                           {dependency.provider}
                         </Td>
+                        <Td width={10} {...getTdProps({ columnKey: "labels" })}>
+                          {dependency.labels}
+                        </Td>
                         <Td
                           width={10}
-                          {...getTdProps({ columnKey: "language" })}
+                          {...getTdProps({ columnKey: "version" })}
                         >
-                          {dependency.labels}
+                          {dependency.version}
+                        </Td>
+                        <Td width={10} {...getTdProps({ columnKey: "sha" })}>
+                          {dependency.sha}
                         </Td>
                       </TableRowContentWithControls>
                     </Tr>

diff --git a/client/src/app/pages/issues/affected-applications/affected-applications.tsx b/client/src/app/pages/issues/affected-applications/affected-applications.tsx
@@ -37,7 +37,7 @@ import { FilterToolbar } from "@app/shared/components/FilterToolbar";
 import { useSelectionState } from "@migtools/lib-ui";
 import {
   getBackToAllIssuesUrl,
-  useSharedFilterCategoriesForIssuesAndAffectedApps,
+  useSharedAffectedApplicationFilterCategories,
 } from "../helpers";
 import { IssueDetailDrawer } from "../issue-detail-drawer";
 import { TableURLParamKeyPrefix } from "@app/Constants";
@@ -66,7 +66,7 @@ export const AffectedApplications: React.FC = () => {
     },
     sortableColumns: ["name", "businessService", "effort", "incidents"],
     initialSort: { columnKey: "name", direction: "asc" },
-    filterCategories: useSharedFilterCategoriesForIssuesAndAffectedApps(),
+    filterCategories: useSharedAffectedApplicationFilterCategories(),
     initialItemsPerPage: 10,
     hasClickableRows: true,
   });

diff --git a/client/src/app/pages/issues/helpers.ts b/client/src/app/pages/issues/helpers.ts
@@ -31,62 +31,64 @@ export type IssuesFilterValuesToCarry = Partial<
   Record<IssuesFilterKeyToCarry, FilterValue>
 >;
 
-export const useSharedFilterCategoriesForIssuesAndAffectedApps =
-  (): FilterCategory<unknown, IssuesFilterKeyToCarry>[] => {
-    const { t } = useTranslation();
-    const { tags } = useFetchTags();
-    const { businessServices } = useFetchBusinessServices();
+export const useSharedAffectedApplicationFilterCategories = (): FilterCategory<
+  unknown,
+  IssuesFilterKeyToCarry
+>[] => {
+  const { t } = useTranslation();
+  const { tags } = useFetchTags();
+  const { businessServices } = useFetchBusinessServices();
 
-    return [
-      {
-        key: "application.name",
-        title: t("terms.applicationName"),
-        filterGroup: IssueFilterGroups.ApplicationInventory,
-        type: FilterType.search,
-        placeholderText:
-          t("actions.filterBy", {
-            what: t("terms.applicationName").toLowerCase(),
-          }) + "...",
-        getServerFilterValue: (value) => (value ? [`*${value[0]}*`] : []),
-      },
-      {
-        key: "businessService.name",
-        title: t("terms.businessService"),
-        filterGroup: IssueFilterGroups.ApplicationInventory,
-        placeholderText:
-          t("actions.filterBy", {
-            what: t("terms.businessService").toLowerCase(),
-          }) + "...",
-        type: FilterType.select,
-        selectOptions: businessServices
-          .map((businessService) => businessService.name)
-          .map((name) => ({ key: name, value: name })),
-      },
-      {
-        key: "tag.id",
-        title: t("terms.tags"),
-        filterGroup: IssueFilterGroups.ApplicationInventory,
-        type: FilterType.multiselect,
-        placeholderText:
-          t("actions.filterBy", {
-            what: t("terms.tagName").toLowerCase(),
-          }) + "...",
-        selectOptions: [...new Set(tags.map((tag) => tag.name))].map(
-          (tagName) => ({ key: tagName, value: tagName })
+  return [
+    {
+      key: "application.name",
+      title: t("terms.applicationName"),
+      filterGroup: IssueFilterGroups.ApplicationInventory,
+      type: FilterType.search,
+      placeholderText:
+        t("actions.filterBy", {
+          what: t("terms.applicationName").toLowerCase(),
+        }) + "...",
+      getServerFilterValue: (value) => (value ? [`*${value[0]}*`] : []),
+    },
+    {
+      key: "businessService.name",
+      title: t("terms.businessService"),
+      filterGroup: IssueFilterGroups.ApplicationInventory,
+      placeholderText:
+        t("actions.filterBy", {
+          what: t("terms.businessService").toLowerCase(),
+        }) + "...",
+      type: FilterType.select,
+      selectOptions: businessServices
+        .map((businessService) => businessService.name)
+        .map((name) => ({ key: name, value: name })),
+    },
+    {
+      key: "tag.id",
+      title: t("terms.tags"),
+      filterGroup: IssueFilterGroups.ApplicationInventory,
+      type: FilterType.multiselect,
+      placeholderText:
+        t("actions.filterBy", {
+          what: t("terms.tagName").toLowerCase(),
+        }) + "...",
+      selectOptions: [...new Set(tags.map((tag) => tag.name))].map(
+        (tagName) => ({ key: tagName, value: tagName })
+      ),
+      // NOTE: The same tag name can appear in multiple tag categories.
+      //       To replicate the behavior of the app inventory page, selecting a tag name
+      //       will perform an OR filter matching all tags with that name across tag categories.
+      //       In the future we may instead want to present the tag select options to the user in category sections.
+      getServerFilterValue: (tagNames) =>
+        tagNames?.flatMap((tagName) =>
+          tags
+            .filter((tag) => tag.name === tagName)
+            .map((tag) => String(tag.id))
         ),
-        // NOTE: The same tag name can appear in multiple tag categories.
-        //       To replicate the behavior of the app inventory page, selecting a tag name
-        //       will perform an OR filter matching all tags with that name across tag categories.
-        //       In the future we may instead want to present the tag select options to the user in category sections.
-        getServerFilterValue: (tagNames) =>
-          tagNames?.flatMap((tagName) =>
-            tags
-              .filter((tag) => tag.name === tagName)
-              .map((tag) => String(tag.id))
-          ),
-      },
-    ];
-  };
+    },
+  ];
+};
 
 const FROM_ISSUES_PARAMS_KEY = "~fromIssuesParams"; // ~ prefix sorts it at the end of the URL for readability
 

diff --git a/client/src/app/pages/issues/issues-table.tsx b/client/src/app/pages/issues/issues-table.tsx
@@ -56,9 +56,9 @@ import {
 } from "@app/shared/hooks/table-controls";
 
 import {
-  useSharedFilterCategoriesForIssuesAndAffectedApps,
   parseReportLabels,
   getIssuesSingleAppSelectedLocation,
+  useSharedAffectedApplicationFilterCategories,
 } from "./helpers";
 import { IssueFilterGroups } from "./issues";
 import {
@@ -94,7 +94,7 @@ export const IssuesTable: React.FC<IIssuesTableProps> = ({ mode }) => {
   };
 
   const allIssuesSpecificFilterCategories =
-    useSharedFilterCategoriesForIssuesAndAffectedApps();
+    useSharedAffectedApplicationFilterCategories();
 
   const tableControlState = useTableControlUrlParams({
     urlParamKeyPrefix: TableURLParamKeyPrefix.issues,