Skip to content

G
gitlab-ce
Commit 7a5de1cd authored by Kushal Pandya's avatar Kushal Pandya
Browse files
Options

Merge branch 'network-policy-editor-layout' into 'master' 

Network policy editor layout

See merge request gitlab-org/gitlab!37525
parents e650a4d4 80dab7bb
Hide whitespace changes
Inline Side-by-side
Showing with 481 additions and 16 deletions
ee/app/assets/javascripts/threat_monitoring/components/policy_editor/app.vue deleted 100644 → 0
View file @ e650a4d4
<script>
export default {
name: 'PolicyEditor',
};
</script>
<template>
<section>
<header class="my-3">
<h2 class="h3 mb-1">
{{ s__('NetworkPolicies|Policy description') }}
</h2>
</header>
</section>
</template>
ee/app/assets/javascripts/threat_monitoring/components/policy_editor/constants.js 0 → 100644
View file @ 7a5de1cd
export const EditorModeRule = 'rule';
export const EditorModeYAML = 'yaml';
ee/app/assets/javascripts/threat_monitoring/components/policy_editor/policy_action_picker.vue 0 → 100644
View file @ 7a5de1cd
<script>
export default {};
</script>
<template>
<div class="gl-bg-gray-100 p-2"></div>
</template>
ee/app/assets/javascripts/threat_monitoring/components/policy_editor/policy_editor.vue 0 → 100644
View file @ 7a5de1cd
<script>
import {
GlFormGroup,
GlFormSelect,
GlFormInput,
GlFormTextarea,
GlToggle,
GlSegmentedControl,
GlLink,
GlButton,
} from '@gitlab/ui';
import { s__ } from '~/locale';
import EnvironmentPicker from '../environment_picker.vue';
import NetworkPolicyEditor from '../network_policy_editor.vue';
import PolicyRuleBuilder from './policy_rule_builder.vue';
import PolicyPreview from './policy_preview.vue';
import PolicyActionPicker from './policy_action_picker.vue';
import { EditorModeRule, EditorModeYAML } from './constants';
export default {
components: {
GlFormGroup,
GlFormSelect,
GlFormInput,
GlFormTextarea,
GlToggle,
GlSegmentedControl,
GlLink,
GlButton,
EnvironmentPicker,
NetworkPolicyEditor,
PolicyRuleBuilder,
PolicyPreview,
PolicyActionPicker,
},
data() {
return { editorMode: EditorModeRule };
},
computed: {
shouldShowRuleEditor() {
return this.editorMode === EditorModeRule;
},
shouldShowYamlEditor() {
return this.editorMode === EditorModeYAML;
},
},
policyTypes: [{ value: 'networkPolicy', text: s__('NetworkPolicies|Network Policy') }],
editorModes: [
{ value: EditorModeRule, text: s__('NetworkPolicies|Rule mode') },
{ value: EditorModeYAML, text: s__('NetworkPolicies|.yaml mode') },
],
};
</script>
<template>
<section>
<header class="my-3">
<h2 class="h3 mb-1">
{{ s__('NetworkPolicies|Policy description') }}
</h2>
</header>
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2">
<gl-form-group :label="s__('NetworkPolicies|Policy type')" label-for="policyType">
<gl-form-select
id="policyType"
value="networkPolicy"
:options="$options.policyTypes"
disabled
/>
</gl-form-group>
</div>
<div class="col-sm-6 col-md-6 col-lg-5 col-xl-4">
<gl-form-group :label="s__('NetworkPolicies|Name')" label-for="policyName">
<gl-form-input id="policyName" />
</gl-form-group>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-10 col-lg-8 col-xl-6">
<gl-form-group :label="s__('NetworkPolicies|Description')" label-for="policyDescription">
<gl-form-textarea id="policyDescription" />
</gl-form-group>
</div>
</div>
<div class="row">
<environment-picker />
</div>
<div class="row">
<div class="col-md-auto">
<gl-form-group :label="s__('NetworkPolicies|Policy status')" label-for="policyStatus">
<gl-toggle id="policyStatus" />
</gl-form-group>
</div>
</div>
<div class="row">
<div class="col-md-auto">
<gl-form-group :label="s__('NetworkPolicies|Editor mode')" label-for="editorMode">
<gl-segmented-control v-model="editorMode" :options="$options.editorModes" />
</gl-form-group>
</div>
</div>
<hr />
<div v-if="shouldShowRuleEditor" class="row" data-testid="rule-editor">
<div class="col-sm-12 col-md-6 col-lg-7 col-xl-8">
<h4>{{ s__('NetworkPolicies|Rules') }}</h4>
<policy-rule-builder />
<div class="gl-my-2 gl-p-3 gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100">
<gl-link href="#">{{ s__('Network Policy|New rule') }}</gl-link>
</div>
<h4>{{ s__('NetworkPolicies|Actions') }}</h4>
<policy-action-picker />
</div>
<div class="col-sm-12 col-md-6 col-lg-5 col-xl-4">
<h5>{{ s__('NetworkPolicies|Policy preview') }}</h5>
<policy-preview />
</div>
</div>
<div v-if="shouldShowYamlEditor" class="row" data-testid="yaml-editor">
<div class="col-sm-12 col-md-12 col-lg-10 col-xl-8">
<div class="gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100">
<h5 class="gl-m-0 gl-p-3 gl-bg-gray-10 gl-border-b-gray-100">
{{ s__('NetworkPolicies|YAML editor') }}
</h5>
<network-policy-editor id="yamlEditor" value="" />
</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-auto">
<gl-button type="submit" category="primary" variant="success">{{
s__('NetworkPolicies|Create policy')
}}</gl-button>
<gl-button category="secondary" variant="default">{{ __('Cancel') }}</gl-button>
</div>
</div>
</section>
</template>
ee/app/assets/javascripts/threat_monitoring/components/policy_editor/policy_preview.vue 0 → 100644
View file @ 7a5de1cd
<script>
export default {};
</script>
<template>
<div class="gl-bg-gray-100 p-9"></div>
</template>
ee/app/assets/javascripts/threat_monitoring/components/policy_editor/policy_rule_builder.vue 0 → 100644
View file @ 7a5de1cd
<script>
export default {};
</script>
<template>
<div class="gl-bg-gray-100 p-7"></div>
</template>
ee/app/assets/javascripts/threat_monitoring/policy_editor.js
View file @ 7a5de1cd
import Vue from 'vue';
import PolicyEditorApp from './components/policy_editor/app.vue';
import PolicyEditorApp from './components/policy_editor/policy_editor.vue';
import createStore from './store';
export default () => {
......
ee/spec/frontend/threat_monitoring/components/policy_editor/__snapshots__/policy_editor_spec.js.snap 0 → 100644
View file @ 7a5de1cd
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`PolicyEditorApp component given .yaml editor mode is enabled renders yaml editor 1`] = `
<div
class="row"
data-testid="yaml-editor"
>
<div
class="col-sm-12 col-md-12 col-lg-10 col-xl-8"
>
<div
class="gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100"
>
<h5
class="gl-m-0 gl-p-3 gl-bg-gray-10 gl-border-b-gray-100"
>
YAML editor
</h5>
<network-policy-editor-stub
id="yamlEditor"
value=""
/>
</div>
</div>
</div>
`;
exports[`PolicyEditorApp component renders the policy editor layout 1`] = `
<section>
<header
class="my-3"
>
<h2
class="h3 mb-1"
>
Policy description
</h2>
</header>
<div
class="row"
>
<div
class="col-sm-6 col-md-4 col-lg-3 col-xl-2"
>
<gl-form-group-stub
label="Policy type"
label-for="policyType"
>
<gl-form-select-stub
disabled=""
id="policyType"
options="[object Object]"
value="networkPolicy"
/>
</gl-form-group-stub>
</div>
<div
class="col-sm-6 col-md-6 col-lg-5 col-xl-4"
>
<gl-form-group-stub
label="Name"
label-for="policyName"
>
<gl-form-input-stub
id="policyName"
/>
</gl-form-group-stub>
</div>
</div>
<div
class="row"
>
<div
class="col-sm-12 col-md-10 col-lg-8 col-xl-6"
>
<gl-form-group-stub
label="Description"
label-for="policyDescription"
>
<gl-form-textarea-stub
id="policyDescription"
noresize="true"
value=""
/>
</gl-form-group-stub>
</div>
</div>
<div
class="row"
>
<environment-picker-stub />
</div>
<div
class="row"
>
<div
class="col-md-auto"
>
<gl-form-group-stub
label="Policy status"
label-for="policyStatus"
>
<gl-toggle-stub
id="policyStatus"
labelposition="top"
/>
</gl-form-group-stub>
</div>
</div>
<div
class="row"
>
<div
class="col-md-auto"
>
<gl-form-group-stub
label="Editor mode"
label-for="editorMode"
>
<gl-segmented-control-stub
checked="rule"
options="[object Object],[object Object]"
/>
</gl-form-group-stub>
</div>
</div>
<hr />
<div
class="row"
data-testid="rule-editor"
>
<div
class="col-sm-12 col-md-6 col-lg-7 col-xl-8"
>
<h4>
Rules
</h4>
<policy-rule-builder-stub />
<div
class="gl-my-2 gl-p-3 gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100"
>
<gl-link-stub
href="#"
>
New rule
</gl-link-stub>
</div>
<h4>
Actions
</h4>
<policy-action-picker-stub />
</div>
<div
class="col-sm-12 col-md-6 col-lg-5 col-xl-4"
>
<h5>
Policy preview
</h5>
<policy-preview-stub />
</div>
</div>
<!---->
<hr />
<div
class="row"
>
<div
class="col-md-auto"
>
<gl-button-stub
category="primary"
icon=""
size="medium"
type="submit"
variant="success"
>
Create policy
</gl-button-stub>
<gl-button-stub
category="secondary"
icon=""
size="medium"
variant="default"
>
Cancel
</gl-button-stub>
</div>
</div>
</section>
`;
ee/spec/frontend/threat_monitoring/components/policy_editor/app_spec.js → ee/spec/frontend/threat_monitoring/components/policy_editor/policy_editor_spec.js
View file @ 7a5de1cd
import { shallowMount } from '@vue/test-utils';
import PolicyEditorApp from 'ee/threat_monitoring/components/policy_editor/app.vue';
import PolicyEditorApp from 'ee/threat_monitoring/components/policy_editor/policy_editor.vue';
import createStore from 'ee/threat_monitoring/store';
describe('PolicyEditorApp component', () => {
let store;
let wrapper;
const factory = ({ propsData, state, options } = {}) => {
const factory = ({ propsData, state, data } = {}) => {
store = createStore();
Object.assign(store.state.threatMonitoring, {
...state,
......@@ -17,17 +17,47 @@ describe('PolicyEditorApp component', () => {
...propsData,
},
store,
...options,
data,
});
};
const findRuleEditor = () => wrapper.find('[data-testid="rule-editor"]');
const findYamlEditor = () => wrapper.find('[data-testid="yaml-editor"]');
beforeEach(() => {
factory({});
});
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
it('renders the header title', () => {
factory({});
expect(wrapper.find('header').exists()).toBe(true);
it('renders the policy editor layout', () => {
expect(wrapper.find('section').element).toMatchSnapshot();
});
it('does not render yaml editor', () => {
expect(findYamlEditor().exists()).toBe(false);
});
describe('given .yaml editor mode is enabled', () => {
beforeEach(() => {
factory({
data: () => ({
editorMode: 'yaml',
}),
});
});
it('does not render rule editor', () => {
expect(findRuleEditor().exists()).toBe(false);
});
it('renders yaml editor', () => {
const editor = findYamlEditor();
expect(editor.exists()).toBe(true);
expect(editor.element).toMatchSnapshot();
});
});
});
locale/gitlab.pot
View file @ 7a5de1cd
......@@ -15615,12 +15615,30 @@ msgstr ""
msgid "Network"
msgstr ""
msgid "Network Policy|New rule"
msgstr ""
msgid "NetworkPolicies|.yaml mode"
msgstr ""
msgid "NetworkPolicies|Actions"
msgstr ""
msgid "NetworkPolicies|Choose whether to enforce this policy."
msgstr ""
msgid "NetworkPolicies|Create policy"
msgstr ""
msgid "NetworkPolicies|Define this policy's location, conditions and actions."
msgstr ""
msgid "NetworkPolicies|Description"
msgstr ""
msgid "NetworkPolicies|Editor mode"
msgstr ""
msgid "NetworkPolicies|Enforcement status"
msgstr ""
......@@ -15642,6 +15660,9 @@ msgstr ""
msgid "NetworkPolicies|Name"
msgstr ""
msgid "NetworkPolicies|Network Policy"
msgstr ""
msgid "NetworkPolicies|New policy"
msgstr ""
......@@ -15663,6 +15684,21 @@ msgstr ""
msgid "NetworkPolicies|Policy editor"
msgstr ""
msgid "NetworkPolicies|Policy preview"
msgstr ""
msgid "NetworkPolicies|Policy status"
msgstr ""
msgid "NetworkPolicies|Policy type"
msgstr ""
msgid "NetworkPolicies|Rule mode"
msgstr ""
msgid "NetworkPolicies|Rules"
msgstr ""
msgid "NetworkPolicies|Something went wrong, failed to update policy"
msgstr ""
......@@ -15672,6 +15708,9 @@ msgstr ""
msgid "NetworkPolicies|Status"
msgstr ""
msgid "NetworkPolicies|YAML editor"
msgstr ""
msgid "Never"
msgstr ""
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7