add vulnerability reports UI (#1663)

Co-authored-by: michaeljguarino <[email protected]>

AGENT_VERSION

@@ -1 +1 @@
-v0.4.54
+v0.4.55

Dockerfile

@@ -1,6 +1,6 @@
 ARG ELIXIR_VERSION=1.16.3
 ARG OTP_VERSION=26.2.5.5
-ARG DEBIAN_VERSION=bullseye-20241111
+ARG DEBIAN_VERSION=bullseye-20241202
 ARG RUNNER_IMAGE=debian:${DEBIAN_VERSION}-slim
 
 FROM node:16.16-alpine3.15 as node

assets/src/components/cd/ContinuousDeployment.tsx

@@ -82,8 +82,18 @@ export const PageHeaderContext = createContext<HeaderContext | undefined>(
   undefined
 )
 
-export function PageHeaderProvider(props) {
-  return <PageHeaderContext.Provider {...props} />
+export function PageHeaderProvider({
+  value,
+  children,
+}: {
+  value: HeaderContext
+  children: ReactNode
+}) {
+  return (
+    <PageHeaderContext.Provider value={value}>
+      {children}
+    </PageHeaderContext.Provider>
+  )
 }
 
 export const usePageHeaderContext = (): HeaderContext => {

assets/src/components/cd/cluster/pod/PodContainers.tsx

@@ -70,6 +70,7 @@ export const ColStatus = columnHelper.accessor(
 export const ColExpander = {
   id: 'expander',
   header: () => {},
+  meta: { gridTemplate: 'min-content' },
   cell: ({ row }) =>
     row.getCanExpand() && (
       <CollapseIcon

assets/src/components/cd/services/service/component/Components.tsx

@@ -17,7 +17,7 @@ const FilterFooterInner = styled(ListBoxFooter)(({ theme }) => ({
   color: theme.colors['text-primary-accent'],
 }))
 
-function FilterFooter({ allSelected = true, ...props }) {
+export function FilterFooter({ allSelected = true, ...props }) {
   return (
     <FilterFooterInner
       leftContent={<ComponentsIcon />}

assets/src/components/commandpalette/commands.ts

@@ -1,12 +1,15 @@
 import {
+  AiSparkleOutlineIcon,
   ArrowTopRightIcon,
+  CatalogIcon,
   ClusterIcon,
   DocumentIcon,
   EyeIcon,
   GearTrainIcon,
   GitPullIcon,
   HistoryIcon,
   HomeIcon,
+  IconProps,
   KubernetesAltIcon,
   PeopleIcon,
   PodContainerIcon,
@@ -18,17 +21,16 @@ import {
   WarningShieldIcon,
   setThemeColorMode,
   useThemeColorMode,
-  IconProps,
-  CatalogIcon,
-  AiSparkleOutlineIcon,
 } from '@pluralsh/design-system'
 import { UseHotkeysOptions } from '@saas-ui/use-hotkeys'
 import { isEmpty } from 'lodash'
 import { ComponentType, useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import { useClustersTinyQuery } from '../../generated/graphql'
+import { AI_ABS_PATH } from '../../routes/aiRoutes.tsx'
 import { BACKUPS_ABS_PATH } from '../../routes/backupRoutesConsts'
+import { CATALOGS_ABS_PATH } from '../../routes/catalogRoutesConsts.tsx'
 import {
   CD_ABS_PATH,
   CLUSTERS_REL_PATH,
@@ -37,11 +39,11 @@ import {
   getClusterDetailsPath,
 } from '../../routes/cdRoutesConsts'
 import { KUBERNETES_ROOT_PATH } from '../../routes/kubernetesRoutesConsts'
-import { POLICIES_ABS_PATH } from '../../routes/policiesRoutesConsts'
 import {
   PR_ABS_PATH,
   PR_AUTOMATIONS_ABS_PATH,
 } from '../../routes/prRoutesConsts'
+import { SECURITY_ABS_PATH } from '../../routes/securityRoutesConsts.tsx'
 import {
   SETTINGS_ABS_PATH,
   USER_MANAGEMENT_ABS_PATH,
@@ -50,8 +52,6 @@ import { STACKS_ROOT_PATH } from '../../routes/stacksRoutesConsts'
 import { mapExistingNodes } from '../../utils/graphql'
 import { useProjectId } from '../contexts/ProjectsContext'
 import { useShareSecretOpen } from '../sharesecret/ShareSecretContext'
-import { CATALOGS_ABS_PATH } from '../../routes/catalogRoutesConsts.tsx'
-import { AI_ABS_PATH } from '../../routes/aiRoutes.tsx'
 
 type CommandGroup = {
   commands: Command[]
@@ -184,11 +184,11 @@ export function useCommands(): CommandGroup[] {
             hotkeys: ['shift P', '7'],
           },
           {
-            label: 'Policies',
+            label: 'Security',
             icon: WarningShieldIcon,
-            callback: () => navigate(POLICIES_ABS_PATH),
+            callback: () => navigate(SECURITY_ABS_PATH),
             deps: [navigate],
-            hotkeys: ['shift L', '8'],
+            hotkeys: ['8'],
           },
           {
             label: 'Backups',

assets/src/components/home/violations/ConstraintViolationsCard.tsx

@@ -9,7 +9,7 @@ import { useTheme } from 'styled-components'
 
 import { POLL_INTERVAL } from 'components/cd/ContinuousDeployment'
 
-import { PoliciesTable } from 'components/policies/PoliciesTable'
+import { PoliciesTable } from 'components/security/policies/PoliciesTable'
 
 import { HOME_CARD_MAX_HEIGHT } from '../HomeCard'
 

assets/src/components/home/violations/ConstraintViolationsChart.tsx

@@ -13,7 +13,7 @@ import { ChartSkeleton } from 'components/utils/SkeletonLoaders'
 import { CustomLegend } from '../CustomLegend'
 import { HomeCard } from '../HomeCard.tsx'
 import { WarningShieldIcon } from '@pluralsh/design-system'
-import { POLICIES_ABS_PATH } from '../../../routes/policiesRoutesConsts.tsx'
+import { POLICIES_ABS_PATH } from '../../../routes/securityRoutesConsts.tsx'
 
 const CHART_SIZE = 240
 

assets/src/components/kubernetes/Cluster.tsx

@@ -1,6 +1,6 @@
+import { isEmpty } from 'lodash'
 import { createContext, useContext, useEffect, useMemo } from 'react'
 import { Outlet, useLocation, useNavigate, useParams } from 'react-router-dom'
-import { isEmpty } from 'lodash'
 
 import { useTheme } from 'styled-components'
 
@@ -12,13 +12,12 @@ import {
   PinnedCustomResourceFragment,
   useKubernetesClustersQuery,
 } from '../../generated/graphql'
-import { mapExistingNodes } from '../../utils/graphql'
-import { getWorkloadsAbsPath } from '../../routes/kubernetesRoutesConsts'
 import { useNamespacesQuery } from '../../generated/graphql-kubernetes'
 import { KubernetesClient } from '../../helpers/kubernetes.client'
-import LoadingIndicator from '../utils/LoadingIndicator'
-import { GqlError } from '../utils/Alert'
+import { mapExistingNodes } from '../../utils/graphql'
 import { useProjectId } from '../contexts/ProjectsContext'
+import { GqlError } from '../utils/Alert'
+import LoadingIndicator from '../utils/LoadingIndicator'
 
 import { LAST_SELECTED_CLUSTER_KEY } from './Navigation'
 
@@ -144,7 +143,7 @@ export default function Cluster() {
           ? mgmtCluster?.id
           : clusters[0].id
 
-      navigate(getWorkloadsAbsPath(redirectId) + search, {
+      navigate(`${redirectId}${search}`, {
         replace: true,
       })
     }

assets/src/components/kubernetes/common/NamespaceMultiSelect.tsx

@@ -0,0 +1,56 @@
+import { ListBoxItem, NamespaceIcon, Select } from '@pluralsh/design-system'
+import {
+  FilterFooter,
+  FilterTrigger,
+} from 'components/cd/services/service/component/Components'
+
+export function NamespaceMultiSelect({
+  allNamespaces,
+  selectedNamespaces,
+  setSelectedNamespaces,
+}: {
+  allNamespaces: string[]
+  selectedNamespaces: string[]
+  setSelectedNamespaces: (selectedNamespaces: string[]) => void
+}) {
+  const allSelected =
+    Array.from(selectedNamespaces).length >= allNamespaces.length
+  const sortedSelectedNamespaces = Array.from(selectedNamespaces).sort()
+
+  return (
+    <Select
+      label="All namespaces"
+      triggerButton={
+        <FilterTrigger $width={280}>
+          {sortedSelectedNamespaces.length === 0
+            ? 'Select namespaces'
+            : allSelected
+              ? 'All namespaces'
+              : sortedSelectedNamespaces.join(', ')}
+        </FilterTrigger>
+      }
+      selectionMode="multiple"
+      selectedKeys={selectedNamespaces}
+      onSelectionChange={(keys) => {
+        setSelectedNamespaces(Array.from(keys) as string[])
+      }}
+      placement="right"
+      dropdownFooterFixed={
+        <FilterFooter
+          allSelected={allSelected}
+          onClick={() =>
+            setSelectedNamespaces(allSelected ? [] : allNamespaces)
+          }
+        />
+      }
+    >
+      {allNamespaces.map((namespace) => (
+        <ListBoxItem
+          key={namespace}
+          leftContent={<NamespaceIcon />}
+          label={namespace}
+        />
+      ))}
+    </Select>
+  )
+}

assets/src/components/layout/Sidebar.tsx

@@ -1,8 +1,11 @@
 import { GITHUB_LINK } from 'utils/constants'
 
+import { useMutation } from '@apollo/client'
 import {
+  AiSparkleOutlineIcon,
   ArrowTopRightIcon,
   BellIcon,
+  CatalogIcon,
   Sidebar as DSSidebar,
   GearTrainIcon,
   GitHubLogoIcon,
@@ -19,39 +22,36 @@ import {
   SidebarItem,
   SidebarSection,
   StackIcon,
-  WarningShieldIcon,
-  AiSparkleOutlineIcon,
-  CatalogIcon,
   Tooltip,
+  WarningShieldIcon,
 } from '@pluralsh/design-system'
-import { Link, useLocation } from 'react-router-dom'
-import { ReactElement, useCallback, useMemo, useRef, useState } from 'react'
-import { Avatar, Flex, Menu, MenuItem, useOutsideClick } from 'honorable'
 import { ME_Q } from 'components/graphql/users'
-import { useMutation } from '@apollo/client'
-import { updateCache } from 'utils/graphql'
+import { Avatar, Flex, Menu, MenuItem, useOutsideClick } from 'honorable'
+import { ReactElement, useCallback, useMemo, useRef, useState } from 'react'
+import { Link, useLocation } from 'react-router-dom'
 import styled, { useTheme } from 'styled-components'
+import { updateCache } from 'utils/graphql'
 
+import { useDefaultCDPath } from 'components/cd/ContinuousDeployment'
+import { useCDEnabled } from 'components/cd/utils/useCDEnabled'
 import { PersonaConfigurationFragment } from 'generated/graphql'
 import { PR_DEFAULT_ABS_PATH } from 'routes/prRoutesConsts'
-import { useCDEnabled } from 'components/cd/utils/useCDEnabled'
-import { useDefaultCDPath } from 'components/cd/ContinuousDeployment'
 
-import { POLICIES_ABS_PATH } from 'routes/policiesRoutesConsts'
+import { SECURITY_ABS_PATH } from 'routes/securityRoutesConsts'
 
 import { SETTINGS_ABS_PATH } from 'routes/settingsRoutesConst'
 import { AI_ABS_PATH } from '../../routes/aiRoutes.tsx'
 
-import { useLogin } from '../contexts'
 import { KUBERNETES_ROOT_PATH } from '../../routes/kubernetesRoutesConsts'
 import { getStacksAbsPath } from '../../routes/stacksRoutesConsts'
+import { useLogin } from '../contexts'
 
 import HelpLauncher from '../help/HelpLauncher'
 
-import { MARK_READ } from './queries'
-import { NotificationsPanelOverlay } from './NotificationsPanelOverlay'
 import { CATALOGS_ABS_PATH } from '../../routes/catalogRoutesConsts.tsx'
 import CommandPaletteShortcuts from '../commandpalette/CommandPaletteShortcuts.tsx'
+import { NotificationsPanelOverlay } from './NotificationsPanelOverlay'
+import { MARK_READ } from './queries'
 
 type MenuItem = {
   text: string
@@ -133,12 +133,12 @@ function getMenuItems({
       hotkeys: ['shift P', '7'],
     },
     {
-      text: 'Policies',
-      expandedLabel: 'Policies',
+      text: 'Security',
+      expandedLabel: 'Security',
       icon: <WarningShieldIcon />,
-      path: POLICIES_ABS_PATH,
+      path: SECURITY_ABS_PATH,
       enabled: !!(personaConfig?.all || personaConfig?.sidebar?.kubernetes),
-      hotkeys: ['shift L', '8'],
+      hotkeys: ['8'],
     },
     {
       text: 'Backups',