Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

45 add relationship dialog needs improvement #230

Open
wants to merge 6 commits into
base: dev
Choose a base branch
from
Open

45 add relationship dialog needs improvement #230

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7a9ff6d
#45: Swamp the selection dropdowns for relation type and asset, so we…
kenmeacham Jan 16, 2025
a539bae
#45: Relocate getValidStartpoints and getValidEndpoints methods from …
kenmeacham Jan 23, 2025
c626091
#45: Refactor AddRelationModal, so that the destination asset is sele…
kenmeacham Jan 23, 2025
03a645e
#45: Ensure that assets and relations lists are sorted correctly
kenmeacham Jan 23, 2025
51fd623
#45: Tidied
kenmeacham Jan 27, 2025
0479008
#45: Improved relations dropdown, etc. Added tooltips. Adjusted z-ind…
kenmeacham Jan 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 82 additions & 0 deletions src/main/webapp/app/modeller/components/Modeller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,8 @@ class Modeller extends React.Component {
this.getAssetTypeById = this.getAssetTypeById.bind(this);
this.isAssetDisplayed = this.isAssetDisplayed.bind(this);
this.isRelationDisplayed = this.isRelationDisplayed.bind(this);
this.getValidStartpoints = this.getValidStartpoints.bind(this);
this.getValidEndpoints = this.getValidEndpoints.bind(this);
this.getLink = this.getLink.bind(this);
this.getMisbehaviour = this.getMisbehaviour.bind(this);
this.getTwasForMisbehaviourSet = this.getTwasForMisbehaviourSet.bind(this);
Expand Down Expand Up @@ -307,6 +309,8 @@ class Modeller extends React.Component {
loading={this.props.loading}
isAssetDisplayed={this.isAssetDisplayed}
isRelationDisplayed={this.isRelationDisplayed}
linkFromTypes={this.getValidStartpoints}
linkToTypes={this.getValidEndpoints}
selectedLayers={this.props.selectedLayers}
selectedAsset={this.props.selectedAsset}
selectedThreat={this.props.selectedThreat}
Expand Down Expand Up @@ -340,6 +344,8 @@ class Modeller extends React.Component {
expanded={this.props.expanded}
filters={this.props.filters}
loading={this.props.loading}
linkFromTypes={this.getValidStartpoints}
linkToTypes={this.getValidEndpoints}
getAssetType={this.getAssetType}
getAssetsForType={this.getAssetsForType}
getLink={this.getLink}
Expand Down Expand Up @@ -912,6 +918,82 @@ class Modeller extends React.Component {
return false;*/
}

/**
* Get all assets from which a connection could be made
*
* @param {type} assetType the type of the asset for which to check for incoming connections
* @returns {unresolved} the valid startpoints in the asset model on the canvas
*/
getValidStartpoints(assetType) {
let self = this;
let linkTypes = this.props.model["palette"]["links"][assetType];
let validStartpoints = {};

if (linkTypes === undefined || linkTypes["linksTo"] === undefined) {
return validStartpoints;
}

//iterate over all allowed links
for (let conn of linkTypes["linksTo"]) {

//this is a new relationship type
if (validStartpoints[conn["type"]] === undefined) {
validStartpoints[conn["type"]] = {label: conn["label"], comment: conn["comment"],
assets: []};

//check all existing assets to see if they're of the allowed type
for (let asset of self.props.model["assets"]) {
//if they are add them to the list of allowed endpoints
if (conn["options"].indexOf(asset["type"]) >= 0) {
validStartpoints[conn["type"]]["assets"].push(asset["id"]);
}
}
} else {
console.warn("duplicate entry for for connection type " + conn["type"] + ", ignoring");
}
}

return validStartpoints;
}

/**
* Get all assets to which a connection could be made
*
* @param {type} assetType the type of the asset for which to check for outgoing connections
* @returns {unresolved} the valid endpoints in the asset model on the canvas
*/
getValidEndpoints(assetType) {
let self = this;
let linkTypes = this.props.model["palette"]["links"][assetType];
let validEndpoints = {};

if (linkTypes === undefined || linkTypes["linksFrom"] === undefined) {
return validEndpoints;
}

//iterate over all allowed links
for (let conn of linkTypes["linksFrom"]) {

//this is a new relationship type
if (validEndpoints[conn["type"]] === undefined) {
validEndpoints[conn["type"]] = {label: conn["label"], comment: conn["comment"],
assets: []};

//check all existing assets to see if they're of the allowed type
for (let asset of self.props.model["assets"]) {
//if they are add them to the list of allowed endpoints
if (conn["options"].indexOf(asset["type"]) >= 0) {
validEndpoints[conn["type"]]["assets"].push(asset["id"]);
}
}
} else {
console.warn("duplicate entry for for connection type " + conn["type"] + ", ignoring");
}
}

return validEndpoints;
}

getLink(assetType, relType, direction) {
let link = undefined;
//console.log("getLink for ", assetType, relType, direction);
Expand Down
94 changes: 5 additions & 89 deletions src/main/webapp/app/modeller/components/canvas/Canvas.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,8 +110,6 @@ class Canvas extends React.Component {
this.handleAssetMouseOver = this.handleAssetMouseOver.bind(this);
this.handleAssetMouseOut = this.handleAssetMouseOut.bind(this);
this.handleRelationClick = this.handleRelationClick.bind(this);
this.getValidStartpoints = this.getValidStartpoints.bind(this);
this.getValidEndpoints = this.getValidEndpoints.bind(this);
this.getPaletteLink = this.getPaletteLink.bind(this);
this.getPalette = this.getPalette.bind(this);
this.isSelectedAsset = this.isSelectedAsset.bind(this);
Expand Down Expand Up @@ -885,8 +883,8 @@ class Canvas extends React.Component {
assetType={assetType}
getPalette={this.getPalette}
canvasZoom={this.props.canvas.zoom}
linkFromTypes={self.getValidStartpoints}
linkToTypes={self.getValidEndpoints}
linkFromTypes={this.props.linkFromTypes}
linkToTypes={this.props.linkToTypes}
loading={this.props.loading["asset"]}
handleAssetDrag={ self.handleAssetDrag }
handleAssetMouseDown={ self.handleAssetMouseDown }
Expand Down Expand Up @@ -2189,95 +2187,11 @@ class Canvas extends React.Component {
this.canvasContextTriggerVar = c;
}

/**
* Get all assets from which a connection could be made
*
* @param {type} assetType the type of the asset for which to check for incoming connections
* @returns {unresolved} the valid startpoints in the asset model on the canvas
*/
getValidStartpoints(assetType) {
var self = this;
//console.log("Finding valid startpoints for asset type " + assetType);

var linkTypes = this.props.model["palette"]["links"][assetType];
//console.log(linkTypes["linksTo"]);

var validStartpoints = {};
if (linkTypes === undefined || linkTypes["linksTo"] === undefined) {
return validStartpoints;
}

//iterate over all allowed links
for (var conn of linkTypes["linksTo"]) {

//this is a new relationship type
if (validStartpoints[conn["type"]] === undefined) {
validStartpoints[conn["type"]] = {label: conn["label"], comment: conn["comment"],
assets: []};

//check all existing assets to see if they're of the allowed type
for (var asset of self.props.model["assets"]) {
//if they are add them to the list of allowed endpoints
if (conn["options"].indexOf(asset["type"]) >= 0) {
validStartpoints[conn["type"]]["assets"].push(asset["id"]);
}
}
} else {
console.warn("duplicate entry for for connection type " + conn["type"] + ", ignoring");
}
}
//console.log("valid startpoints:");
//console.log(validStartpoints);
return validStartpoints;
}

/**
* Get all assets to which a connection could be made
*
* @param {type} assetType the type of the asset for which to check for outgoing connections
* @returns {unresolved} the valid endpoints in the asset model on the canvas
*/
getValidEndpoints(assetType) {
var self = this;
//console.log("Finding valid endpoints for asset type " + assetType);

var linkTypes = this.props.model["palette"]["links"][assetType];
//console.log(linkTypes["linksFrom"]);

var validEndpoints = {};
if (linkTypes === undefined || linkTypes["linksFrom"] === undefined) {
return validEndpoints;
}

//iterate over all allowed links
for (var conn of linkTypes["linksFrom"]) {

//this is a new relationship type
if (validEndpoints[conn["type"]] === undefined) {
validEndpoints[conn["type"]] = {label: conn["label"], comment: conn["comment"],
assets: []};

//check all existing assets to see if they're of the allowed type
for (var asset of self.props.model["assets"]) {
//if they are add them to the list of allowed endpoints
if (conn["options"].indexOf(asset["type"]) >= 0) {
validEndpoints[conn["type"]]["assets"].push(asset["id"]);
}
}
} else {
console.warn("duplicate entry for for connection type " + conn["type"] + ", ignoring");
}
}
//console.log("valid endpoints:");
//console.log(validEndpoints);
return validEndpoints;
}

getPaletteLink(fromAssetType, linkType) {
//console.log("getPaletteLink from " + fromAssetType + " linkType: " + linkType);
let fromPaletteAssetType = this.props.getAssetType(fromAssetType);
//console.log("fromPaletteAssetType:", fromPaletteAssetType);
let validEndpoints = this.getValidEndpoints(fromPaletteAssetType["id"]);
let validEndpoints = this.props.linkToTypes(fromPaletteAssetType["id"]);
let link = validEndpoints[linkType];
//console.log("link:", link);
return link;
Expand Down Expand Up @@ -2373,6 +2287,8 @@ Canvas.propTypes = {
loading: PropTypes.object,
isAssetDisplayed: PropTypes.func,
isRelationDisplayed: PropTypes.func,
linkFromTypes: PropTypes.func,
linkToTypes: PropTypes.func,
selectedLayers: PropTypes.array,
selectedAsset: PropTypes.object,
selectedThreat: PropTypes.object,
Expand Down
2 changes: 0 additions & 2 deletions src/main/webapp/app/modeller/components/canvas/popups/RelationSelectionMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,9 +86,7 @@ class RelationSelectionMenu extends React.Component {
}

renderOption(option, index) {
//let label = option["label"] + " (" + option["direction"] + ")"; //show label with direction
let label = option["from"] + " " + option["label"] + " " + option["to"]; //show label with asset names (labels)
//console.log(index, option);
let value = index;
if (option["comment"].length && option["comment"].length > 0) {
let props = {
Expand Down
8 changes: 6 additions & 2 deletions src/main/webapp/app/modeller/components/panes/details/DetailPane.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -284,6 +284,8 @@ class DetailPane extends React.Component {
assets={this.props.model.assets}
host={this.state.addRelationModal.host}
links={this.state.addRelationModal.links}
linkFromTypes={this.props.linkFromTypes}
linkToTypes={this.props.linkToTypes}
isIncoming={this.state.addRelationModal.isIncoming}
isRelationExists={this.isRelationExists}
submit={this.submitAddRelationModal}
Expand Down Expand Up @@ -367,8 +369,8 @@ class DetailPane extends React.Component {
}

handleAdd(asset, isIncoming) {
var linkTypes = this.props.model.palette["links"];
var assetType = this.props.getAssetType(asset["type"]);
let linkTypes = this.props.model.palette["links"];
let assetType = this.props.getAssetType(asset["type"]);
this.openAddRelationModal(asset, isIncoming ? linkTypes[assetType["id"]]["linksTo"] : linkTypes[assetType["id"]]["linksFrom"], isIncoming);
}

Expand Down Expand Up @@ -481,6 +483,8 @@ DetailPane.propTypes = {
getAssetType: PropTypes.func,
getAssetsForType: PropTypes.func,
getLink: PropTypes.func,
linkFromTypes: PropTypes.func,
linkToTypes: PropTypes.func,
model: PropTypes.object,
threats: PropTypes.array,
complianceSetsData: PropTypes.object,
Expand Down
Loading