diff options
Diffstat (limited to 'dashboard/src/components/pdp')
-rw-r--r-- | dashboard/src/components/pdp/AddPolicy.vue | 64 | ||||
-rw-r--r-- | dashboard/src/components/pdp/CreatePdp.vue | 83 | ||||
-rw-r--r-- | dashboard/src/components/pdp/Pdp.vue | 173 | ||||
-rw-r--r-- | dashboard/src/components/pdp/UpdatePolicy.vue | 64 |
4 files changed, 384 insertions, 0 deletions
diff --git a/dashboard/src/components/pdp/AddPolicy.vue b/dashboard/src/components/pdp/AddPolicy.vue new file mode 100644 index 00000000..82ad07e2 --- /dev/null +++ b/dashboard/src/components/pdp/AddPolicy.vue @@ -0,0 +1,64 @@ +<template> + <div> + <hr> + <h4>Select policy:</h4> + <form data-vv-scope="select"> + <div class="form-group"> + <select v-model="selectedPolicyId" v-validate.initial="'required'"> + <option disabled value>Please select one</option> + <option + v-for="policy in policies" + :value="policy.id" + :key="policy.id" + >{{policy.name}}</option> + </select> + </div> + <button type="button" class="btn btn-secondary" @click="close()">Cancel</button> + <span> </span> + <button + type="button" + :disabled="errors.any('select')" + class="btn btn-primary" + @click="addPolicy()" + >Add</button> + </form> + <br> + <br> + </div> +</template> + +<script> +import PdpService from "./../../services/Pdp.service.js"; +import util from "./../../services/Util.service.js"; + +export default { + name: "addPolicy", + data: function() { + return { + selectedPolicyId: null, + }; + }, + props: { + pdp: Object + }, + methods: { + addPolicy() { + var policy = PdpService.getPolicy(this.selectedPolicyId); + var pdpCopy = util.clone(this.pdp); + pdpCopy.security_pipeline.push(policy); + PdpService.updatePdp(pdpCopy); + this.close(); + }, + close() { + this.$emit("close"); + } + }, + computed: { + policies() { + return PdpService.policies.filter( + el => !this.pdp.security_pipeline.includes(el) + ); + } + } +}; +</script> diff --git a/dashboard/src/components/pdp/CreatePdp.vue b/dashboard/src/components/pdp/CreatePdp.vue new file mode 100644 index 00000000..aca46413 --- /dev/null +++ b/dashboard/src/components/pdp/CreatePdp.vue @@ -0,0 +1,83 @@ +<template> + <div class="list-group-item row"> + <form> + <div class="form-group"> + <label for="modelName">Name</label> + <input + type="text" + name="name" + v-model="pdpCreate.name" + v-validate.initial="'alpha_dash|required|min:3'" + class="form-control" + id="modelName" + > + </div> + <div class="form-group"> + <label for="modelDescription">Description</label> + <textarea + name="description" + v-model="pdpCreate.description" + v-validate.initial="'required|min:3'" + class="form-control" + ></textarea> + </div> + <div class="form-group"> + <label for="pdpVpi">Vim project id</label> + <input + type="text" + name="vim_project_id" + v-model="pdpCreate.vim_project_id" + class="form-control" + id="pdpVpi" + > + </div> + <div class="form-group"> + <label for="pdpPolicy">Policy</label> + <select v-model="selectedPolicy" class="form-control" id="pdpPolicy" v-validate.initial="'required'" name="policy"> + <option v-for="policy in policies" :key="policy.id" :value="policy.id">{{ policy.name }}</option> + </select> + </div> + <ul> + <li v-for="error in errors.all()" :key="error.id">{{ error }}</li> + </ul> + <button type="button" class="btn btn-secondary" @click="close()">Cancel</button> + <span> </span> + <button type="button" :disabled="errors.any()" class="btn btn-primary" @click="createModel()">Create</button> + </form> + </div> +</template> + +<script> +import PdpService from "./../../services/Pdp.service.js"; +import PolicyService from "../../services/Policy.service"; +import util from "../../services/Util.service"; + +export default { + data: function() { + return { + selectedPolicy: null, + pdpCreate: { + name: "", + description: "", + security_pipeline: [], + vim_project_id: "" + } + }; + }, + computed:{ + policies() { + return util.sortByName(PolicyService.policies); + } + }, + methods: { + createModel() { + this.pdpCreate.security_pipeline.push(this.selectedPolicy); + PdpService.createPdp(this.pdpCreate); + this.close(); + }, + close() { + this.$emit("close") + } + } +}; +</script> diff --git a/dashboard/src/components/pdp/Pdp.vue b/dashboard/src/components/pdp/Pdp.vue new file mode 100644 index 00000000..3aba3fed --- /dev/null +++ b/dashboard/src/components/pdp/Pdp.vue @@ -0,0 +1,173 @@ +<template> + <div class=""> + <template v-if="edit"> + <form> + <div class="form-group"> + <label for="pdpName">Name</label> + <input + type="text" + name="name" + v-model="pdpEdit.name" + v-validate="'alpha_dash|required|min:3'" + class="form-control" + id="pdpName" + > + </div> + <div class="form-group"> + <label for="pdpDescription">Description</label> + <textarea + name="description" + v-model="pdpEdit.description" + v-validate="'required|min:3'" + class="form-control" + id="pdpDescription" + ></textarea> + </div> + <ul> + <li v-for="error in errors.all()" :key="error.id">{{ error }}</li> + </ul> + <button type="button" class="btn btn-secondary" @click="edit = false">Cancel</button> + <span> </span> + <button type="button" :disabled="errors.any()" class="btn btn-primary" @click="updatePdp()">Update</button> + </form> + </template> + <template v-else> + <div> + <h3 class="list-group-item-heading inline">{{ pdp.name }}</h3> + <div class="pull-right"> + <button + type="button" + class="fa fa-trash btn btn-dark btn-sm" + @click="removePdp(pdp)" + title="Remove PDP" + ></button> + <button + type="button" + class="fa fa-edit btn btn-dark btn-sm" + @click="updatingPdp(pdp)" + title="Edit PDP" + ></button> + </div> + <p class="list-group-item-text">{{ pdp.description }}</p> + <h4 class="list-group-item-text"> + <div v-if="!changeProject"> + Project: {{ pdp.project ? pdp.project : 'none' }} + <button + type="button" + class="fa fa-edit btn btn-dark btn-sm" + @click="changingProject()" + title="Change project" + ></button> + </div> + <form class="form-inline" v-else> + <label for="projectId">Project ID: </label> + + <input + type="text" + name="id" + v-model="project" + class="form-control" + id="projectId" + > + + <button type="button" class="btn btn-secondary" @click="changeProject = false">Cancel</button> + <span> </span> + <button + type="button" + class="btn btn-primary" + @click="setProject()" + >OK</button> + </form> + </h4> + + <UpdatePolicy v-if="updatePolicy" :pdp="pdp" @close="updatePolicy = false"></UpdatePolicy> + <details class="list-group-item-text" v-else> + <summary> + <h4 class="inline"> + {{ pdp.security_pipeline.length }} {{ (pdp.security_pipeline.length > 1) ? "policies" : "policy"}} + </h4> + <button + type="button" + class="fa fa-edit btn btn-dark btn-sm" + @click="updatePolicy = true" + title="Change Policy" + ></button> + </summary> + <div class="list-group"> + <div + v-for="policy in pdp.security_pipeline" :key="policy.id" + > + <h3 class="list-group-item-heading inline">{{ policy.name }}</h3> + <!--<button + type="button" + class="fa fa-trash pull-right btn btn-dark btn-sm" + @click="removePolicyFromPdp(policy)" + title="Remove Policy" + ></button>--> + <p class="list-group-item-text">{{ policy.description }}</p> + </div> + </div> + </details> + </div> + </template> + <hr> + </div> +</template> + +<script> +import PdpService from './../../services/Pdp.service.js'; +//import AddPolicy from "./AddPolicy.vue"; +import UpdatePolicy from "./UpdatePolicy"; +import util from "./../../services/Util.service.js"; + +export default { + name: "pdp", + data: function() { + return { + edit: false, + updatePolicy: false, + changeProject: false, + project: "", + pdpEdit: {} + }; + }, + props: { + pdp: Object + }, + components: { + //AddPolicy + UpdatePolicy + }, + methods: { + changingProject() { + this.project = this.pdp.project; + this.changeProject = true; + }, + removePdp() { + if (confirm('Are you sure to delete this PDP?')) + PdpService.removePdp(this.pdp); + }, + updatingPdp() { + this.pdpEdit = util.clone(this.pdp); + this.edit = true; + }, + updatePdp() { + this.edit = false; + PdpService.updatePdp(this.pdpEdit); + }, + removePolicyFromPdp(policy) { + if (confirm('Are you sure to remove this Policy from PDP?')) { + //var pdpCopy = util.clone(this.pdp); + this.pdp.security_pipeline.splice(this.pdp.security_pipeline.indexOf(policy), 1); + PdpService.updatePdp(this.pdp); + } + }, + setProject() { + var pdpCopy = util.clone(this.pdp); + pdpCopy.project = this.project; + PdpService.updatePdp(pdpCopy); + this.changeProject = false; + } + } +}; +</script> diff --git a/dashboard/src/components/pdp/UpdatePolicy.vue b/dashboard/src/components/pdp/UpdatePolicy.vue new file mode 100644 index 00000000..f84cf37e --- /dev/null +++ b/dashboard/src/components/pdp/UpdatePolicy.vue @@ -0,0 +1,64 @@ +<template> + <div> + <hr> + <h4>Select policy:</h4> + <form data-vv-scope="select"> + <div class="form-group"> + <select v-model="selectedPolicyId" v-validate.initial="'required'"> + <option disabled value>Please select one</option> + <option + v-for="policy in policies" + :value="policy.id" + :key="policy.id" + >{{policy.name}}</option> + </select> + </div> + <button type="button" class="btn btn-secondary" @click="close()">Cancel</button> + <span> </span> + <button + type="button" + :disabled="errors.any('select')" + class="btn btn-primary" + @click="updatePolicy()" + >Update</button> + </form> + <br> + <br> + </div> +</template> + +<script> +import PdpService from "./../../services/Pdp.service.js"; +import util from "./../../services/Util.service.js"; + +export default { + name: "updatePolicy", + data: function() { + return { + selectedPolicyId: null, + }; + }, + props: { + pdp: Object + }, + methods: { + updatePolicy() { + var policy = PdpService.getPolicy(this.selectedPolicyId); + var pdpCopy = util.clone(this.pdp); + pdpCopy.security_pipeline = [policy]; + PdpService.updatePdp(pdpCopy); + this.close(); + }, + close() { + this.$emit("close"); + } + }, + computed: { + policies() { + return PdpService.policies.filter( + el => !this.pdp.security_pipeline.includes(el) + ); + } + } +}; +</script> |