Skip to content

Commit

Permalink
Add GCP scope for microsegmentation policy (#2480)
Browse files Browse the repository at this point in the history
  • Loading branch information
@chandrasekhar1996
chandrasekhar1996 authored Jan 12, 2024
1 parent b429138 commit 90f37c4
Show file tree
Hide file tree
Showing 6 changed files with 197 additions and 153 deletions.
80 changes: 48 additions & 32 deletions ui/src/__tests__/components/microsegmentation/__snapshots__/AddSegmentation.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -495,7 +495,7 @@ exports[`AddSegmentation should render fail to submit add-segmentation: destinat
width: 4.5px;
}
.emotion-53 {
.emotion-56 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
Expand All @@ -506,18 +506,18 @@ exports[`AddSegmentation should render fail to submit add-segmentation: destinat
flex-flow: row nowrap;
}
.emotion-53>* {
.emotion-56>* {
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
.emotion-54 {
.emotion-57 {
padding-top: 18px;
width: 26%;
}
.emotion-56 {
.emotion-59 {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
box-sizing: border-box;
Expand All @@ -530,7 +530,7 @@ exports[`AddSegmentation should render fail to submit add-segmentation: destinat
vertical-align: bottom;
}
.emotion-56>input[type='radio'] {
.emotion-59>input[type='radio'] {
box-sizing: border-box;
cursor: pointer;
display: inline-block;
Expand All @@ -539,7 +539,7 @@ exports[`AddSegmentation should render fail to submit add-segmentation: destinat
visibility: hidden;
}
.emotion-56>input[type='radio']+label {
.emotion-59>input[type='radio']+label {
box-sizing: border-box;
cursor: pointer;
font-family: Helvetica,Arial,sans-serif;
Expand All @@ -552,7 +552,7 @@ exports[`AddSegmentation should render fail to submit add-segmentation: destinat
white-space: nowrap;
}
.emotion-56>input[type='radio']+label:before {
.emotion-59>input[type='radio']+label:before {
background: #fff;
border: 2px solid rgba(54,151,242,0.5);
border-radius: 50%;
Expand All @@ -568,29 +568,29 @@ exports[`AddSegmentation should render fail to submit add-segmentation: destinat
width: 16px;
}
.emotion-56>input[type='radio']:hover+label:before {
.emotion-59>input[type='radio']:hover+label:before {
border: 2px solid #3697f2;
}
.emotion-56>input[type='radio']:focus+label:before {
.emotion-59>input[type='radio']:focus+label:before {
border: 2px solid rgba(54,151,242,0.5);
}
.emotion-56>input[type='radio']:checked+label:before {
.emotion-59>input[type='radio']:checked+label:before {
border: 2px solid #3697f2;
}
.emotion-56>input[type='radio']:disabled+label {
.emotion-59>input[type='radio']:disabled+label {
color: #d5d5d5;
cursor: not-allowed;
}
.emotion-56>input[type='radio']:disabled+label:before {
.emotion-59>input[type='radio']:disabled+label:before {
border: 2px solid #d5d5d5;
cursor: not-allowed;
}
.emotion-56>input[type='radio']:checked+label:after {
.emotion-59>input[type='radio']:checked+label:after {
background-color: #3697f2;
border-radius: 50%;
box-sizing: border-box;
Expand All @@ -605,50 +605,50 @@ exports[`AddSegmentation should render fail to submit add-segmentation: destinat
width: 8px;
}
.emotion-56>input[type='radio']:disabled:checked+label:after {
.emotion-59>input[type='radio']:disabled:checked+label:after {
color: #d5d5d5;
border: 2px solid #d5d5d5;
background-color: #d5d5d5;
cursor: not-allowed;
}
.emotion-59 {
.emotion-62 {
float: left;
font-size: 14px;
font-weight: 700;
padding-top: 12px;
width: 8%;
}
.emotion-62 {
.emotion-65 {
width: 415px;
padding-top: 12px;
}
.emotion-64 {
.emotion-67 {
margin-top: 5px;
margin-left: 10px;
padding-top: 12px;
}
.emotion-66 {
.emotion-69 {
fill: #188fff;
cursor: pointer;
vertical-align: text-bottom;
}
.emotion-72 {
.emotion-75 {
-webkit-flex: 1 1;
-ms-flex: 1 1;
flex: 1 1;
margin-right: 1px;
}
.emotion-90 {
.emotion-93 {
width: 65%;
}
.emotion-99 {
.emotion-102 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
Expand Down Expand Up @@ -832,6 +832,22 @@ exports[`AddSegmentation should render fail to submit add-segmentation: destinat
AWS
</label>
</div>
<div
class="emotion-39 denali-checkbox emotion-40 emotion-41"
data-testid="checkbox-wrapper"
>
<input
data-partial="false"
id="scopegcpCheckBox0"
name="scopegcpCheckBox0"
type="checkbox"
/>
<label
for="scopegcpCheckBox0"
>
GCP
</label>
</div>
</div>
</div>
<div
Expand All @@ -843,11 +859,11 @@ exports[`AddSegmentation should render fail to submit add-segmentation: destinat
Policy Enforcement State
</label>
<div
class="emotion-53 denali-radiobutton-group emotion-54 emotion-55"
class="emotion-56 denali-radiobutton-group emotion-57 emotion-58"
data-testid="radiobuttongroup"
>
<div
class="emotion-56 denali-radiobutton"
class="emotion-59 denali-radiobutton"
data-testid="radiobutton-wrapper"
>
<input
Expand All @@ -864,7 +880,7 @@ exports[`AddSegmentation should render fail to submit add-segmentation: destinat
</label>
</div>
<div
class="emotion-56 denali-radiobutton"
class="emotion-59 denali-radiobutton"
data-testid="radiobutton-wrapper"
>
<input
Expand All @@ -881,12 +897,12 @@ exports[`AddSegmentation should render fail to submit add-segmentation: destinat
</div>
</div>
<label
class="emotion-6 denali-input-label emotion-59 emotion-295"
class="emotion-6 denali-input-label emotion-62 emotion-295"
>
Hosts
</label>
<div
class="emotion-19 denali-input emotion-62 emotion-292"
class="emotion-19 denali-input emotion-65 emotion-292"
data-testid="input-wrapper"
>
<input
Expand All @@ -902,10 +918,10 @@ exports[`AddSegmentation should render fail to submit add-segmentation: destinat
/>
</div>
<div
class="emotion-64 emotion-291"
class="emotion-67 emotion-291"
>
<svg
class="emotion-66"
class="emotion-69"
data-testid="icon"
height="1.75em"
id=""
Expand Down Expand Up @@ -934,7 +950,7 @@ exports[`AddSegmentation should render fail to submit add-segmentation: destinat
Destination Port(s)
</label>
<div
class="emotion-72 emotion-73"
class="emotion-75 emotion-76"
>
<div
class="emotion-19 denali-input emotion-20 emotion-21"
Expand Down Expand Up @@ -984,7 +1000,7 @@ exports[`AddSegmentation should render fail to submit add-segmentation: destinat
class="emotion-6 denali-input-label emotion-7 emotion-8"
/>
<div
class="emotion-90 emotion-91"
class="emotion-93 emotion-94"
/>
</div>
<div
Expand All @@ -996,10 +1012,10 @@ exports[`AddSegmentation should render fail to submit add-segmentation: destinat
Source Port(s)
</label>
<div
class="emotion-72 emotion-73"
class="emotion-75 emotion-76"
>
<div
class="emotion-99 emotion-100"
class="emotion-102 emotion-103"
>
<div
class="emotion-19 denali-input emotion-20 emotion-21"
Expand Down
58 changes: 39 additions & 19 deletions ui/src/components/microsegmentation/AddSegmentation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,7 @@ class AddSegmentation extends React.Component {
instances: '',
scopeonprem: 'true',
scopeaws: 'false',
scopegcp: 'false',
scopeall: 'false',
id: 1,
},
Expand All @@ -196,6 +197,7 @@ class AddSegmentation extends React.Component {
if (
pesList[i].scopeonprem !== 'true' &&
pesList[i].scopeaws !== 'true' &&
pesList[i].scopegcp !== 'true' &&
pesList[i].scopeall !== 'true'
) {
pesList[i].scopeonprem = 'true';
Expand Down Expand Up @@ -236,13 +238,13 @@ class AddSegmentation extends React.Component {
members: this.props.editMode
? this.props.data['category'] === 'inbound'
? this.props.data['source_services'].map((str) => ({
memberName: str,
approved: true,
}))
memberName: str,
approved: true,
}))
: this.props.data['destination_services'].map((str) => ({
memberName: str,
approved: true,
}))
memberName: str,
approved: true,
}))
: [],
protocolValid: true,
action: '',
Expand Down Expand Up @@ -356,6 +358,7 @@ class AddSegmentation extends React.Component {
if (
pesList[i].scopeonprem != 'true' &&
pesList[i].scopeaws != 'true' &&
pesList[i].scopegcp !== 'true' &&
pesList[i].scopeall != 'true'
) {
return false;
Expand Down Expand Up @@ -1063,6 +1066,7 @@ class AddSegmentation extends React.Component {
other.scopeall == current.scopeall &&
other.scopeonprem == current.scopeonprem &&
other.scopeaws == current.scopeaws &&
other.scopegcp == current.scopegcp &&
other.id == current.id
).length == 0;

Expand Down Expand Up @@ -1231,13 +1235,17 @@ class AddSegmentation extends React.Component {
} else if (name.includes('scopeall')) {
list[index]['scopeall'] = checkedStr;
list[index]['scopeaws'] = 'false';
list[index]['scopegcp'] = 'false';
list[index]['scopeonprem'] = 'false';
this.toggleDisableRadioButton(checked, list, index, inputs);
} else if (name.includes('scopeonprem')) {
list[index]['scopeonprem'] = checkedStr;
} else if (name.includes('scopeaws')) {
list[index]['scopeaws'] = checkedStr;
this.toggleDisableRadioButton(checked, list, index, inputs);
} else if (name.includes('scopegcp')) {
list[index]['scopegcp'] = checkedStr;
this.toggleDisableRadioButton(checked, list, index, inputs);
}
this.setState({
PESList: list,
Expand All @@ -1260,6 +1268,7 @@ class AddSegmentation extends React.Component {
scopeonprem: 'true',
scopeaws: 'false',
scopeall: 'false',
scopegcp: 'false',
},
],
});
Expand All @@ -1277,19 +1286,19 @@ class AddSegmentation extends React.Component {
render() {
let members = this.state.members
? this.state.members.map((item, idx) => {
// dummy place holder so that it can be be used in the form
const newItem = { ...item };
newItem.approved = true;
let remove = this.deleteMember.bind(this, idx);
return (
<Member
key={idx}
item={newItem}
onClickRemove={remove}
noanim
/>
);
})
// dummy place holder so that it can be be used in the form
const newItem = { ...item };
newItem.approved = true;
let remove = this.deleteMember.bind(this, idx);
return (
<Member
key={idx}
item={newItem}
onClickRemove={remove}
noanim
/>
);
})
: '';

let sections = (
Expand Down Expand Up @@ -1392,6 +1401,17 @@ class AddSegmentation extends React.Component {
this.handleInputChange(e, i)
}
/>
<StyledCheckBox
checked={x.scopegcp === 'true'}
disabled={x.scopeall === 'true'}
name={'scopegcpCheckBox' + i}
id={'scopegcpCheckBox' + i}
key={'scopegcpCheckBox' + i}
label='GCP'
onChange={(e) =>
this.handleInputChange(e, i)
}
/>
</CheckBoxSectionDiv>
</SectionDiv>
<SectionDiv>
Expand Down
Loading

0 comments on commit 90f37c4

Please sign in to comment.