ROX-10987: Splitting Components into Node and Image Components #2163
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -45,6 +45,7 @@ const TileLink = ({ | |
| icon={icon} | ||
| subText={subText} | ||
| short={short} | ||
| textWrap | ||
| /> | ||
| ); | ||
| let classes = ''; | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -7,7 +7,7 @@ import TopCvssLabel from 'Components/TopCvssLabel'; | |
| import RiskScore from 'Components/RiskScore'; | ||
| import Metadata from 'Components/Metadata'; | ||
| import CvesByCvssScore from 'Containers/VulnMgmt/widgets/CvesByCvssScore'; | ||
| import { entityGridContainerBaseClassName } from 'Containers/Workflow/WorkflowEntityPage'; | ||
|
|
||
| import RelatedEntitiesSideList from '../RelatedEntitiesSideList'; | ||
| import TableWidgetFixableCves from '../TableWidgetFixableCves'; | ||
|
|
@@ -28,6 +28,8 @@ const emptyComponent = { | |
| function VulnMgmtComponentOverview({ data, entityContext }) { | ||
| const workflowState = useContext(workflowStateContext); | ||
|
|
||
| const currentEntityType = workflowState.getCurrentEntityType(); | ||
|
|
||
| // guard against incomplete GraphQL-cached data | ||
| const safeData = { ...emptyComponent, ...data }; | ||
|
|
||
|
|
@@ -73,9 +75,11 @@ function VulnMgmtComponentOverview({ data, entityContext }) { | |
| ); | ||
| } | ||
|
|
||
| const currentEntity = { [currentEntityType]: id }; | ||
| const newEntityContext = { ...entityContext, ...currentEntity }; | ||
|
|
||
| const entityGridContainerClassName = `${entityGridContainerBaseClassName} grid-columns-1 md:grid-columns-2 lg:grid-columns-2`; | ||
|
Contributor
There was a problem hiding this comment. Why did you switch to the other exported class and re-concatenate?
Contributor
Author
There was a problem hiding this comment. So this is the before and after of this change Before: After: I noticed that we were only showing two columns in the component overview so it differed from the class we were using in general, which was for 3 columns. So this change will instead use the base class and then append specific classes for this view
Contributor
There was a problem hiding this comment. ^ That's probably a side-effect of widening the tiles right sidebar. I'm fine with your fix for it, but I'm afraid this may turn into whack-a-mole. Let's get UX suggestion on this. cc: @alanonthegit
Contributor
Author
There was a problem hiding this comment. Oh no, that wasn't the issue. We're using grid columns for the overview and it was using a 3 column grid before. If you look at the first image you'll see it looks like you can add another third element to the right. It was on master as well. It's not really related to splitting the components but I just did it anyway. |
||
|
|
||
| return ( | ||
| <div className="flex h-full"> | ||
| <div className="flex flex-col flex-grow min-w-0"> | ||
|
|
@@ -102,15 +106,15 @@ function VulnMgmtComponentOverview({ data, entityContext }) { | |
| <TableWidgetFixableCves | ||
| workflowState={workflowState} | ||
| entityContext={entityContext} | ||
| entityType={currentEntityType} | ||
| name={safeData?.name} | ||
| id={safeData?.id} | ||
| /> | ||
| </div> | ||
| </CollapsibleSection> | ||
| </div> | ||
| <RelatedEntitiesSideList | ||
| entityType={currentEntityType} | ||
| entityContext={newEntityContext} | ||
| data={safeData} | ||
| /> | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| import React, { useContext } from 'react'; | ||
| import { gql } from '@apollo/client'; | ||
|
|
||
| import useCases from 'constants/useCaseTypes'; | ||
| import entityTypes from 'constants/entityTypes'; | ||
| import { defaultCountKeyMap } from 'constants/workflowPages.constants'; | ||
| import workflowStateContext from 'Containers/workflowStateContext'; | ||
| import WorkflowEntityPage from 'Containers/Workflow/WorkflowEntityPage'; | ||
| import EntityList from '../../List/VulnMgmtList'; | ||
| import VulnMgmtComponentOverview from './VulnMgmtComponentOverview'; | ||
| import { | ||
| vulMgmtPolicyQuery, | ||
| tryUpdateQueryWithVulMgmtPolicyClause, | ||
| getScopeQuery, | ||
| } from '../VulnMgmtPolicyQueryUtil'; | ||
|
|
||
| // We want to override some values because the imageComponent object has different field names | ||
| export const imageComponentCountKeyMap = { | ||
| ...defaultCountKeyMap, | ||
| [entityTypes.CVE]: 'vulnCount: imageVulnerabilityCount', | ||
| }; | ||
|
|
||
| const VulnMgmtImageComponent = ({ | ||
| entityId, | ||
| entityListType, | ||
| search, | ||
| entityContext, | ||
| sort, | ||
| page, | ||
| refreshTrigger, | ||
| setRefreshTrigger, | ||
| }) => { | ||
| const workflowState = useContext(workflowStateContext); | ||
|
|
||
| const overviewQuery = gql` | ||
| query getComponent($id: ID!, $query: String, $scopeQuery: String) { | ||
| result: imageComponent(id: $id) { | ||
| id | ||
| name | ||
| version | ||
| fixedIn | ||
| location(query: $scopeQuery) | ||
| priority | ||
| vulnCount: imageVulnerabilityCount(query: $query, scopeQuery: $scopeQuery) | ||
| imageCount(query: $query) | ||
| topVuln: topImageVulnerability { | ||
| cvss | ||
| scoreVersion | ||
| } | ||
| } | ||
| } | ||
| `; | ||
|
|
||
| function getListQuery(listFieldName, fragmentName, fragment) { | ||
| return gql` | ||
| query getComponentSubEntity${entityListType}($id: ID!, $pagination: Pagination, $query: String, $policyQuery: String, $scopeQuery: String) { | ||
| result: imageComponent(id: $id) { | ||
| id | ||
| ${imageComponentCountKeyMap[entityListType]}(query: $query, scopeQuery: $scopeQuery) | ||
| ${listFieldName}(query: $query, scopeQuery: $scopeQuery, pagination: $pagination) { ...${fragmentName} } | ||
| unusedVarSink(query: $policyQuery) | ||
| unusedVarSink(query: $scopeQuery) | ||
| } | ||
| } | ||
| ${fragment} | ||
| `; | ||
| } | ||
|
|
||
| const fullEntityContext = workflowState.getEntityContext(); | ||
| const queryOptions = { | ||
| variables: { | ||
| id: entityId, | ||
| query: tryUpdateQueryWithVulMgmtPolicyClause(entityListType, search, entityContext), | ||
| ...vulMgmtPolicyQuery, | ||
| cachebuster: refreshTrigger, | ||
| scopeQuery: getScopeQuery(fullEntityContext), | ||
| }, | ||
| }; | ||
|
|
||
| return ( | ||
| <WorkflowEntityPage | ||
| entityId={entityId} | ||
| entityType={entityTypes.IMAGE_COMPONENT} | ||
| entityListType={entityListType} | ||
| useCase={useCases.VULN_MANAGEMENT} | ||
| ListComponent={EntityList} | ||
| OverviewComponent={VulnMgmtComponentOverview} | ||
| overviewQuery={overviewQuery} | ||
| getListQuery={getListQuery} | ||
| search={search} | ||
| sort={sort} | ||
| page={page} | ||
| queryOptions={queryOptions} | ||
| entityContext={entityContext} | ||
| setRefreshTrigger={setRefreshTrigger} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default VulnMgmtImageComponent; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| import React, { useContext } from 'react'; | ||
| import { gql } from '@apollo/client'; | ||
|
|
||
| import useCases from 'constants/useCaseTypes'; | ||
| import entityTypes from 'constants/entityTypes'; | ||
| import { defaultCountKeyMap } from 'constants/workflowPages.constants'; | ||
| import workflowStateContext from 'Containers/workflowStateContext'; | ||
| import WorkflowEntityPage from 'Containers/Workflow/WorkflowEntityPage'; | ||
| import EntityList from '../../List/VulnMgmtList'; | ||
| import VulnMgmtComponentOverview from './VulnMgmtComponentOverview'; | ||
| import { | ||
| vulMgmtPolicyQuery, | ||
| tryUpdateQueryWithVulMgmtPolicyClause, | ||
| getScopeQuery, | ||
| } from '../VulnMgmtPolicyQueryUtil'; | ||
|
|
||
| // We want to override some values because the nodeComponent object has different field names | ||
| export const nodeComponentCountKeyMap = { | ||
| ...defaultCountKeyMap, | ||
| [entityTypes.CVE]: 'vulnCount: nodeVulnerabilityCount', | ||
| }; | ||
|
|
||
| const VulnMgmtNodeComponent = ({ | ||
| entityId, | ||
| entityListType, | ||
| search, | ||
| entityContext, | ||
| sort, | ||
| page, | ||
| refreshTrigger, | ||
| setRefreshTrigger, | ||
| }) => { | ||
| const workflowState = useContext(workflowStateContext); | ||
|
|
||
| const overviewQuery = gql` | ||
| query getComponent($id: ID!, $query: String, $scopeQuery: String) { | ||
| result: nodeComponent(id: $id) { | ||
| id | ||
| name | ||
| version | ||
| fixedIn | ||
| location(query: $scopeQuery) | ||
| priority | ||
| vulnCount: nodeVulnerabilityCount(query: $query, scopeQuery: $scopeQuery) | ||
| nodeCount(query: $query) | ||
| topVuln: topNodeVulnerability { | ||
| cvss | ||
| scoreVersion | ||
| } | ||
| } | ||
| } | ||
| `; | ||
|
|
||
| function getListQuery(listFieldName, fragmentName, fragment) { | ||
| return gql` | ||
| query getNodeComponentSubEntity${entityListType}($id: ID!, $pagination: Pagination, $query: String, $policyQuery: String, $scopeQuery: String) { | ||
| result: nodeComponent(id: $id) { | ||
| id | ||
| ${nodeComponentCountKeyMap[entityListType]}(query: $query, scopeQuery: $scopeQuery) | ||
| ${listFieldName}(query: $query, scopeQuery: $scopeQuery, pagination: $pagination) { ...${fragmentName} } | ||
| unusedVarSink(query: $policyQuery) | ||
| unusedVarSink(query: $scopeQuery) | ||
| } | ||
| } | ||
| ${fragment} | ||
| `; | ||
| } | ||
|
|
||
| const fullEntityContext = workflowState.getEntityContext(); | ||
| const queryOptions = { | ||
| variables: { | ||
| id: entityId, | ||
| query: tryUpdateQueryWithVulMgmtPolicyClause(entityListType, search, entityContext), | ||
| ...vulMgmtPolicyQuery, | ||
| cachebuster: refreshTrigger, | ||
| scopeQuery: getScopeQuery(fullEntityContext), | ||
| }, | ||
| }; | ||
|
|
||
| return ( | ||
| <WorkflowEntityPage | ||
| entityId={entityId} | ||
| entityType={entityTypes.NODE_COMPONENT} | ||
| entityListType={entityListType} | ||
| useCase={useCases.VULN_MANAGEMENT} | ||
| ListComponent={EntityList} | ||
| OverviewComponent={VulnMgmtComponentOverview} | ||
| overviewQuery={overviewQuery} | ||
| getListQuery={getListQuery} | ||
| search={search} | ||
| sort={sort} | ||
| page={page} | ||
| queryOptions={queryOptions} | ||
| entityContext={entityContext} | ||
| setRefreshTrigger={setRefreshTrigger} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default VulnMgmtNodeComponent; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Feature flagged the entities we show in the VM dashboard menu dropdown