This is an automated email from the ASF dual-hosted git repository. machristie pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git
commit 35c6da847de2b8d3da74b1a042f2a1a6c861fe57 Author: Marcus Christie <[email protected]> AuthorDate: Fri Sep 21 14:29:52 2018 -0400 AIRAVATA-2876 Removing previous app editor implementation --- .../components/admin/ApplicationDeployments.vue | 272 --------------------- .../src/components/admin/ApplicationDetails.vue | 80 ------ .../src/components/admin/ApplicationInputField.vue | 189 -------------- .../src/components/admin/ApplicationInterface.vue | 105 -------- .../components/admin/ApplicationOutputField.vue | 162 ------------ .../src/components/admin/NewApplication.vue | 69 ------ .../static/django_airavata_admin/src/router.js | 26 -- .../src/store/newapplication/app_deployments.js | 81 ------ .../src/store/newapplication/app_details.js | 67 ----- .../src/store/newapplication/app_interface.js | 225 ----------------- .../src/store/newapplication/new_application.js | 52 ---- .../django_airavata_admin/src/store/store.js | 2 - 12 files changed, 1330 deletions(-) diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/admin/ApplicationDeployments.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/admin/ApplicationDeployments.vue deleted file mode 100644 index 54317b0..0000000 --- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/admin/ApplicationDeployments.vue +++ /dev/null @@ -1,272 +0,0 @@ -<template> - <div class="main_section"> - <div class="new-application-tab-main"> - <h4>Application Deployments</h4> - <div class="entry" v-if="appDeployments.appDeployments && appDeployments.appDeployments.length!=0"> - <div class="heading">Select an Application Deployment to Edit</div> - <select v-model="appDeploymentIndex"> - <option v-for="(appDeployment,index) in appDeployments.appDeployments" v-bind:value="index">{{appDeployment.appDeploymentId}}</option> - </select> - </div> - <div class="entry" v-if="appDeployments.appDeploymentId"> - <share-button v-model="sharedEntity"/> - </div> - <div class="entry"> - <div class="heading">Application module</div> - <input type="text" v-model="appDeployments.appModuleId"/> - </div> - <div class="entry"> - <div class="heading">Application compute host</div> - <select v-model="appDeployments.computeHostId"> - <option v-for="computeHost in computeHosts" v-bind:value="computeHost.host_id">{{computeHost.host}}</option> - </select> - </div> - <div class="entry"> - <div class="heading">Application executable path</div> - <input type="text" v-model="appDeployments.executablePath"/> - </div> - <div class="entry"> - <div class="heading">Application Parallelism type</div> - <select v-model="appDeployments.parallelism"> - <option value="0">SERIAL</option> - <option value="1">MPI</option> - <option value="2">OPENMP</option> - <option value="3">OPENMP MPI</option> - <option value="4">CCM</option> - <option value="5">CRAY MPI</option> - </select> - </div> - <div class="entry"> - <div class="heading">Application deployment description</div> - <textarea style="height: 80px;" type="text" v-model="appDeployments.appDeploymentDescription"/> - </div> - </div> - <div class="new-application-tab-main"> - <h4>Module load commands</h4> - <div class="entry"> - <div class="heading">Module load commands</div> - <div class="entry" v-for="mdlCMD in appDeployments.moduleLoadCmds"> - <input type="text" v-model="mdlCMD.command"/> - </div> - </div> - <div class="deployment-entry"> - <input type="button" class="deployment btn" value="Add command" v-on:click="addCommand('moduleLoadCmds')"/> - </div> - </div> - - <div class="new-application-tab-main"> - <div class="deployment-entry"> - <h4>Library Prepend Paths</h4> - <div class="name_value" v-for="pth in appDeployments.libPrependPaths"> - <input type="text" placeholder="Name" v-model="pth.name"/> - <input type="text" placeholder="Value" v-model="pth.value"/> - </div> - <input type="button" class="deployment btn" value="Add path" v-on:click="addEnvPaths('libPrependPaths')"/> - </div> - </div> - <div class="new-application-tab-main"> - <div class="deployment-entry"> - <h4>Library Append Paths</h4> - <div class="name_value" v-for="pth in appDeployments.libAppendPaths"> - <input type="text" placeholder="Name" v-model="pth.name"/> - <input type="text" placeholder="Value" v-model="pth.value"/> - </div> - <input type="button" class="deployment btn" value="Add path" v-on:click="addEnvPaths('libAppendPaths')"/> - </div> - </div> - <div class="new-application-tab-main"> - <div class="deployment-entry"> - <h4>Environments</h4> - <div class="name_value" v-for="env in appDeployments.setEnvironment"> - <input type="text" placeholder="Name" v-model="env.name"/> - <input type="text" placeholder="Value" v-model="env.value"/> - </div> - <input type="button" class="deployment btn" value="Add environment" v-on:click="addEnvPaths('setEnvironment')"/> - </div> - </div> - <div class="new-application-tab-main"> - <div class="deployment-entry"> - <h4>Pre Job Commands</h4> - <div class="entry" v-for="cmd in appDeployments.preJobCommands"> - <input type="text" v-model="cmd.command"/> - </div> - <input type="button" class="deployment btn" value="Add Pre Job command" - v-on:click="addCommand('preJobCommands')"/> - </div> - </div> - <div class="new-application-tab-main"> - <div class="deployment-entry"> - <h4>Post Job Commands</h4> - <div class="entry" v-for="cmd in appDeployments.postJobCommands"> - <input type="text" v-model="cmd.command"/> - </div> - <input type="button" class="deployment btn" value="Add Post Job command" - v-on:click="addCommand('postJobCommands')"/> - </div> - </div> - <div class="new-application-tab-main"> - <div class="deployment-entry"> - <h4>Defaults</h4> - <div class="entry"> - <div class="heading">Default Node Count</div> - <input type="number" value="1" min="0" v-model="appDeployments.defaultNodeCount"/> - </div> - <div class="entry"> - <div class="heading">Default CPU Count</div> - <input type="number" value="1" min="0" v-model="appDeployments.defaultCPUCount"/> - </div> - <div class="entry"> - <div class="heading">Default Queue Name</div> - <select v-model="appDeployments.defaultQueueName"> - <option v-bind:value="queue" v-for="queue in queues">{{queue}}</option> - </select> - </div> - </div> - </div> - <div class="new-application-tab-main"> - <new-application-buttons v-bind:save="saveApplicationDeployment" v-bind:cancel="cancel" v-bind:sectionName="'Application Deployment'"></new-application-buttons> - </div> - </div> -</template> -<script> - import {createNamespacedHelpers} from 'vuex' - import NewApplicationButtons from './TabActionConsole.vue'; - import Loading from '../Loading.vue' - - import Utils from '../../utils' - import {components as comps} from 'django-airavata-common-ui' - import DjangoAiravataAPI from 'django-airavata-api' - - const {mapGetters, mapActions} = createNamespacedHelpers('newApplication/appDeploymentsTab') - - export default { - components: { - NewApplicationButtons, - Loading, - "share-button": comps.ShareButton, - }, - mounted: function () { - this.initializeAppDeployment(()=>{ - this.appDeployments = this.getCompleteData - this.computeHosts=this.fetchComputeHosts() - }) - }, - data: function () { - return { - "appDeployments": this.getCompleteData ? this.getCompleteData : {}, - "computeHosts":[], - "queues":[], - "appDeploymentIndex":null, - sharedEntity: null, - } - }, - computed: { - ...mapGetters(["getCompleteData", "getAppModule", "getAppComputeHost", "getAppExecutablePath", "getAppParallelismType", "getAppDeploymentDescription", "getModuleLoadCmds", - "getLibPrependPaths", "getLibAppendPaths", "getSetEnvironment", "getPreJobCommands", "getPostJobCommands", "getDefaultNodeCount", "getDefaultCPUCount", "getDefaultQueueName" - ]) - }, - methods: { - addCommand: function (fieldName) { - var cmd = { - "command": "" - } - var ob = Object.assign({}, this.appDeployments) - var fieldValues = ob[fieldName] - fieldValues.push(cmd) - this.appDeployments = ob - }, - addEnvPaths: function (fieldName) { - var envPaths = { - "name": "", - "value": "" - } - var ob = Object.assign({}, this.appDeployments) - var fieldValues = ob[fieldName] - fieldValues.push(envPaths) - this.appDeployments = ob - }, - fetchComputeHosts:function () { - this.computeHosts=[{"host":"Loading...","host_id":""}] - var callable=(value)=>this.computeHosts=value - Utils.get('/api/compute-resources/all_names_list/',{success:callable,failure:(value)=>this.computeHosts=[]}) - }, - saveApplicationDeployment:function ({success=null,failure=null}={}) { - this.syncData() - this.save({success:success,failure:failure}) - }, - cancel:function () { - this.resetState() - this.appDeployments=this.getCompleteData - } - , - syncData:function () { - this.updateAppDeployment(this.appDeployments) - }, - ...mapActions(["updateAppDeployment","save","resetState","initializeAppDeployment"]) - }, - watch: { - '$route'(to, from) { - this.syncData() - }, - "appDeployments.computeHostId":function (value) { - if(value){ - Utils.get("/api/compute-resources/" + encodeURIComponent(value) + "/queues",{success:(value)=>this.queues=value}) - } - }, - "getCompleteData": function (value) { - this.appDeployments=value - }, - "appDeploymentIndex":function (value) { - var temp=this.appDeployments.appDeployments[value] - temp.appDeployments=this.appDeployments.appDeployments - this.appDeployments=temp - }, - "appDeployments.appDeploymentId": function (value) { - DjangoAiravataAPI.services.ServiceFactory.service("SharedEntities") - .retrieve({lookup: value}) - .then(sharedEntity => this.sharedEntity = sharedEntity); - } - } - } - -</script> -<style> - .heading { - font-size: 1.0em; - font-weight: bold; - margin-bottom: 10px; - } - - .deployment.btn { - float: right; - text-align: center; - border-color: #007BFF; - border-style: solid; - border-radius: 3px; - padding-top: 5px; - padding-bottom: 5px; - padding-left: 15px; - padding-right: 15px; - color: #007BFF; - background-color: white; - width: auto; - float: left; - } - - .deployment.btn:hover { - color: white; - background-color: rgba(0, 105, 217, 1); - } - - .deployment-entry { - display: inline-block; - margin-top: 15px; - width: 100%; - } - - - - .deployment-entry .entry { - margin-bottom: 5px; - } -</style> diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/admin/ApplicationDetails.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/admin/ApplicationDetails.vue deleted file mode 100644 index 2f86a2d..0000000 --- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/admin/ApplicationDetails.vue +++ /dev/null @@ -1,80 +0,0 @@ -<template> - - <div class="main_section"> - <div class="new-application-tab-main"> - <h4>Application Details</h4> - <div class="entry"> - <div class="heading">Application Name</div> - <input type="text" v-model="name"/> - </div> - <div class="entry"> - <div class="heading">Application Version</div> - <input type="text" v-model="version"/> - </div> - <div class="entry"> - <div class="heading" >Application Description</div> - <textarea style="height: 80px;" type="text" v-model="description"/> - </div> - <new-application-buttons v-bind:save="registerAppModule" v-bind:cancel="cancelAction" v-bind:sectionName="'Application Details'"></new-application-buttons> - </div> - </div> -</template> -<script> - import NewApplicationButtons from './TabActionConsole.vue'; - import Loading from '../Loading.vue' - import { createNamespacedHelpers } from 'vuex' - - const {mapGetters,mapActions} = createNamespacedHelpers('newApplication/appDetailsTab') - - export default{ - components:{ - NewApplicationButtons,Loading - }, - mounted:function () { - this.mount() - }, - data:function () { - return { - 'name':'', - 'version':'', - 'description':'' - }; - }, - methods:{ - mount:function () { - this.name=this.getAppName() - this.version=this.getAppVersion() - this.description=this.getAppDescription() - }, - updateStore:function (fieldName,newValue) { - var update={} - update[fieldName]=newValue - this.updateAppDetails(update) - }, - cancelAction:function () { - this.resetState() - this.mount() - }, - ...mapGetters(['getAppName','getAppVersion','getAppDescription']), - ...mapActions(['updateAppDetails','registerAppModule','resetState']) - }, - watch:{ - name:function (newValue) { - this.updateStore('name',newValue) - }, - version:function (newValue) { - this.updateStore('version',newValue) - }, - description:function (newValue) { - this.updateStore('description',newValue) - } - } - } - -</script> -<style> - - - - -</style> diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/admin/ApplicationInputField.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/admin/ApplicationInputField.vue deleted file mode 100644 index 31e8e1f..0000000 --- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/admin/ApplicationInputField.vue +++ /dev/null @@ -1,189 +0,0 @@ -<template> - <div class="main_section interface-main"> - <div class="input-field-header"> - Input Fields - <img v-on:click="delete_event_trigger();" src="/static/images/delete.png"/> - </div> - <div class="entry"> - <div class="heading">Name</div> - <input type="text" v-model="name"/> - </div> - <div class="entry"> - <div class="heading">Value</div> - <input type="text" v-model="value"/> - </div> - <div class="entry"> - <div class="heading">Type</div> - <select v-model="type"> - <option value="0">String</option> - <option value="1">Integer</option> - <option value="2">Float</option> - <option value="3">URI</option> - </select> - </div> - <div class="entry"> - <div class="heading">Application argument</div> - <input v-model="appArg" type="text"/> - </div> - <div class="entry boolean-selectors"> - <boolean-radio-button v-bind:heading="'Standard input'" v-bind:selectorId="standardInput.fieldName" - v-bind:def="getAppInputFieldValue(standardInput)" - v-on:bool_selector="boolValueHandler"></boolean-radio-button> - <boolean-radio-button v-bind:heading="'Is read only'" v-bind:selectorId="isReadOnly.fieldName" - v-bind:def="getAppInputFieldValue(isReadOnly)" - v-on:bool_selector="boolValueHandler"></boolean-radio-button> - </div> - <div class="entry"> - <div class="heading">User friendly description</div> - <textarea style="height: 80px;" type="text" v-model="userFriendlyDescr"/> - </div> - <div class="entry"> - <div class="heading">Input order</div> - <input v-model="inpOrder" type="text"/> - </div> - <div class="entry boolean-selectors"> - <boolean-radio-button v-bind:heading="'Data is staged'" v-bind:selectorId="dataStaged.fieldName" - v-bind:def="getAppInputFieldValue(dataStaged)" - v-on:bool_selector="boolValueHandler"></boolean-radio-button> - <boolean-radio-button v-bind:heading="'Required'" v-bind:selectorId="required.fieldName" - v-bind:def="getAppInputFieldValue(required)" - v-on:bool_selector="boolValueHandler"></boolean-radio-button> - </div> - <div class="entry boolean-selectors"> - <boolean-radio-button v-bind:heading="'Required on command line'" v-bind:selectorId="requiredOnCmd.fieldName" - v-bind:def="getAppInputFieldValue(requiredOnCmd)" - v-on:bool_selector="boolValueHandler"></boolean-radio-button> - </div> - </div> -</template> -<script> - import BooleanRadioButton from './BooleanRadioButton.vue' - - import {createNamespacedHelpers} from 'vuex' - - const {mapGetters, mapActions} = createNamespacedHelpers('newApplication/appInterfaceTab') - - export default { - components: { - BooleanRadioButton - }, - created: function () { - this.syncDataFromStore(); - }, - methods: { - delete_event_trigger: function () { - this.$emit('delete_input_field'); - }, - boolValueHandler: function (selectorID, value) { - if (typeof(value) != "boolean"){ - throw "event value not boolean: " - } - this.updateStore(selectorID, value) - }, - syncDataFromStore: function () { - var val = this.getAppInputField(this.input_id) - this.name = val['name'] - this.value = val['value'] - this.type = val['type'] - this.appArg = val['appArg'] - this.userFriendlyDescr = val['userFriendlyDescr'] - this.inpOrder = val['inpOrder'] - - }, - updateStore: function (fieldName, newValue) { - var param = { - 'id': this.input_id, - }; - var update = {} - update[fieldName] = newValue - param['update'] = update - this.updateInputFieldValues(param) - }, - ...mapActions(['updateInputFieldValues']) - }, - mounted: function () { - this.syncDataFromStore() - }, - data: function () { - return { - 'dataStaged': { - 'id': this.input_id, - 'fieldName': 'dataStaged' - }, - 'required': - { - 'id': this.input_id, - 'fieldName': 'isRequired' - }, - 'requiredOnCmd': - { - 'id': this.input_id, - 'fieldName': 'requiredToAddedToCommandLine' - }, - 'standardInput': - { - 'id': this.input_id, - 'fieldName': 'standardInput' - }, - 'isReadOnly': - { - 'id': this.input_id, - 'fieldName': 'isReadOnly' - }, - name: '', - value: '', - type: '', - appArg: '', - userFriendlyDescr: '', - inpOrder: '' - } - }, - props: ['input_id'], - computed: { - ...mapGetters(['getAppInputField', 'getAppInputFieldValue']) - }, - watch: { - inpOrder: function (newValue) { - this.updateStore('inputOrder', newValue) - }, - userFriendlyDescr: function (newValue) { - this.updateStore('userFriendlyDescription', newValue) - }, - name: function (newValue) { - this.updateStore('name', newValue) - }, - value: function (newValue) { - this.updateStore('value', newValue) - - }, - type: function (newValue) { - this.updateStore('type', newValue) - }, - appArg: function (newValue) { - this.updateStore('applicationArgument', newValue) - } - } - } -</script> - -<style> - - - .input-field-header img { - float: right; - } - - .main_section.interface-main .entry { - margin-bottom: 40px; - margin-left: 15px; - margin-right: 15px; - } - - .entry.boolean-selectors { - display: flex; - } - - .entry.boolean-selectors div { - margin-right: 60px; - } -</style> diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/admin/ApplicationInterface.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/admin/ApplicationInterface.vue deleted file mode 100644 index 3fbc626..0000000 --- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/admin/ApplicationInterface.vue +++ /dev/null @@ -1,105 +0,0 @@ -<template> - - <div class="main_section"> - <div class="new-application-tab-main"> - <h4>Application Interface</h4> - <div class="entry boolean-selectors"> - <boolean-radio-button v-bind:heading="'Enable Archiving Working Directory'" v-bind:selectorVal="work_dir" - v-bind:def="isEnableArchiveWorkingDirectory" v-bind:selectorId="booleanSelectorIDs[0]" - v-on:bool_selector="updateStore"></boolean-radio-button> - <boolean-radio-button v-bind:heading="'Enable Optional File Inputs'" v-bind:selectorVal="optional_files" - v-bind:def="isEnableOutputFileInput" v-bind:selectorId="booleanSelectorIDs[1]" - v-on:bool_selector="updateStore"></boolean-radio-button> - </div> - <div> - <application-input-field class="interface-main" v-for="inp_id in getAppInputFieldIds" v-bind:key="inp_id" - v-bind:input_id="inp_id" - v-on:delete_input_field="deleteAppInterfaceInputField(inp_id);"></application-input-field> - </div> - <div class="entry"> - <button class="interface-btn" v-on:click="createAppInterfaceInputField();">Add Application <span>input</span> - </button> - </div> - <div> - <application-output-field class="interface-main" v-for="out_id in getAppOutputFieldIds" v-bind:key="out_id" - v-bind:output_id="out_id" - v-on:delete_output_field="deleteAppInterfaceOutputField(out_id);"></application-output-field> - </div> - <div class="entry"> - <div class="heading">Output fields</div> - <button class="interface-btn" v-on:click="createAppInterfaceOutputField()">Add Application <span>output</span> - </button> - </div> - <new-application-buttons v-bind:save="saveApplicationInterface" v-bind:cancel="cancelAction" - v-bind:sectionName="'Application Interface'"></new-application-buttons> - </div> - </div> -</template> -<script> - import ApplicationInputField from './ApplicationInputField.vue'; - import BooleanRadioButton from './BooleanRadioButton.vue'; - import NewApplicationButtons from './TabActionConsole.vue'; - import ApplicationOutputField from './ApplicationOutputField.vue' - import Loading from '../Loading.vue' - - import {createNamespacedHelpers} from 'vuex' - import Vue from 'vue' - - const {mapGetters, mapActions} = createNamespacedHelpers('newApplication/appInterfaceTab') - - export default { - components: { - ApplicationInputField, BooleanRadioButton, NewApplicationButtons, ApplicationOutputField, Loading - }, - data: function () { - return { - 'id': 0, - work_dir: {'boolValue': null}, - optional_files: {'boolValue': null}, - booleanSelectorIDs: ['archiveWorkingDirectory', 'hasOptionalFileInputs'] - }; - }, - props: {}, - mounted: function () { - this.initializeAppInterface(this.mount) - } - , - computed: { - ... - mapGetters(['getAppInputFieldIds', 'getAppOutputFieldIds', 'isInitialized', 'isEnableArchiveWorkingDirectory', 'isEnableOutputFileInput']) - } - , - methods: { - cancelAction: function () { - this.resetState() - console.log("Cancel called") - this.mount() - }, - updateStore: function (fieldName, newValue) { - if (fieldName == this.booleanSelectorIDs[0]) { - this.changeArchiveWorkingDirectory(newValue) - } else if (fieldName == this.booleanSelectorIDs[1]) { - this.changeEnableOutputFileInput(newValue) - } - } - , - mount: function () { - Vue.set(this, 'work_dir', {'boolValue': this.isEnableArchiveWorkingDirectory}) - this.optional_files = {'boolValue': this.isEnableOutputFileInput} - }, - ... - mapActions(['saveApplicationInterface', 'createAppInterfaceInputField', 'deleteAppInterfaceInputField', 'createAppInterfaceOutputField', 'deleteAppInterfaceOutputField', 'initializeAppInterface', 'changeEnableOutputFileInput', 'changeArchiveWorkingDirectory', 'resetState']) - } - } - ; -</script> -<style> - - - .entry.boolean-selectors { - display: flex; - } - - -</style> - diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/admin/ApplicationOutputField.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/admin/ApplicationOutputField.vue deleted file mode 100644 index 439592a..0000000 --- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/admin/ApplicationOutputField.vue +++ /dev/null @@ -1,162 +0,0 @@ -<template> - <div class="main_section interface-main"> - <div class="input-field-header"> - Output Fields - <img v-on:click="delete_event_trigger();" src="/static/images/delete.png"/> - </div> - <div class="entry"> - <div class="heading">Name</div> - <input type="text" v-model="name"/> - </div> - <div class="entry"> - <div class="heading">Value</div> - <input type="text" v-model="value"/> - </div> - <div class="entry"> - <div class="heading">Type</div> - <select v-model="type"> - <option value="0">String</option> - <option value="1">Integer</option> - <option value="2">Float</option> - <option value="3">URI</option> - </select> - </div> - <div class="entry"> - <div class="heading">Application argument</div> - <input v-model="appArg" type="text"/> - </div> - <div class="entry boolean-selectors"> - <boolean-radio-button v-bind:heading="'Data Movement'" v-bind:selectorId="dataMovement.fieldName" - v-bind:def="getAppOutputFieldValue(dataMovement)" - v-on:bool_selector="boolValueHandler"></boolean-radio-button> - <boolean-radio-button v-bind:heading="'Output Required'" v-bind:selectorId="required.fieldName" - v-bind:def="getAppOutputFieldValue(required)" - v-on:bool_selector="boolValueHandler"></boolean-radio-button> - </div> - <div class="entry boolean-selectors"> - <boolean-radio-button v-bind:heading="'Required on command line'" v-bind:selectorId="requiredOnCmd.fieldName" - v-bind:def="getAppOutputFieldValue(requiredOnCmd)" - v-on:bool_selector="boolValueHandler"></boolean-radio-button> - </div> - </div> -</template> -<script> - import BooleanRadioButton from './BooleanRadioButton.vue' - - import {createNamespacedHelpers} from 'vuex' - - const {mapGetters, mapActions} = createNamespacedHelpers('newApplication/appInterfaceTab') - - export default { - components: { - BooleanRadioButton - }, - created: function () { - this.syncDataFromStore(); - }, - props: ['output_id'], - methods: { - delete_event_trigger: function () { - this.$emit('delete_output_field'); - }, - boolValueHandler: function (selectorID, value) { - this.updateStore(selectorID, value) - }, - syncDataFromStore: function () { - var val = this.getAppOutputField(this.output_id) - this.name = val['name'] - this.value = val['value'] - this.type = val['type'] - this.appArg = val['appArg'] - }, - updateStore: function (fieldName, newValue) { - var param = { - 'id': this.output_id, - }; - var update = {} - update[fieldName] = newValue - param['update'] = update - this.updateOutputField(param) - }, - ...mapActions(['updateOutputField']) - }, - mounted: function () { - this.syncDataFromStore() - }, - data: function () { - return { - 'required': { - 'id': this.output_id, - 'fieldName': 'isRequired' - }, - 'requiredOnCmd': - { - 'id': this.output_id, - 'fieldName': 'requiredToAddedToCommandLine' - }, - 'dataMovement': { - 'id': this.output_id, - 'fieldName': 'dataMovement' - }, - name: '', - value: '', - type: '', - appArg: '' - } - }, - - computed: { - ...mapGetters(['getAppOutputField','getAppOutputFieldValue']) - }, - watch: { - name: function (newValue) { - this.updateStore('name', newValue) - }, - value: function (newValue) { - this.updateStore('value', newValue) - - }, - type: function (newValue) { - this.updateStore('type', newValue) - }, - appArg: function (newValue) { - this.updateStore('applicationArgument', newValue) - } - } - } -</script> - -<style> - .input-field-header { - background-color: #F8F8F8; - width: 100%; - padding: 15px; - border: solid 1px #dddddd; - text-align: left; - } - - .input-field-header img { - float: right; - } - - .main_section.interface-main .entry { - margin-bottom: 40px; - margin-left: 15px; - margin-right: 15px; - } - - .entry.boolean-selectors { - display: flex; - } - - .entry.boolean-selectors div { - margin-right: 60px; - } - - - .interface-main { - border: solid 1px #dddddd; - border-radius: 4px; - } - -</style> diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/admin/NewApplication.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/admin/NewApplication.vue deleted file mode 100644 index b22fb0f..0000000 --- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/admin/NewApplication.vue +++ /dev/null @@ -1,69 +0,0 @@ -<template> - <div class="new_app"> - <h3>{{getTitle}}</h3> - <div class="main"> - <div class="tabs"> - <div class="tab" v-bind:class="tabs['details']"><router-link class="link" :to="{name:'details'}"><label class="lbl">Details</label></router-link></div> - <div class="tab" v-bind:class="tabs['interface']" v-bind:obj="appInterfaceTabData"><router-link class="link" :to="{name:'interface'}"><label class="lbl">Interface</label></router-link></div> - <div class="tab" v-bind:class="tabs['deployments']"><router-link class="link" :to="{name:'deployments'}"><label class="lbl">Deployments</label></router-link></div> - <div class="tab" style="width: 100%"></div> - </div> - <transition name="fade"> - <router-view :key="$route.path"></router-view> - </transition> - </div> - </div> -</template> -<script> - import ApplicationDetails from './ApplicationDetails.vue' - import ApplicationInterface from './ApplicationInterface.vue' - - import { createNamespacedHelpers } from 'vuex' - - const {mapGetters} = createNamespacedHelpers('newApplication') - - - export default { - components: { - ApplicationDetails,ApplicationInterface - }, - mounted:function () { - this.current_active_tab=this.$route.name; - this.previous_active_tab=''; - }, - data: function () { - return { - current_active_tab: 0, - previous_active_tab: -1, - appInterfaceTabData:{'inputFields':[]}, - - } - }, - computed: { - tabs: function () { - var tabs_active = { - 'details':'', - 'interface':'', - 'deployments':'' - }; - tabs_active[this.current_active_tab] = 'active'; - if (tabs_active.hasOwnProperty(this.previous_active_tab)) { - tabs_active[this.previous_active_tab] = ''; - } - return tabs_active; - }, - ...mapGetters(["getTitle"]) - }, - watch:{ - '$route' (to, from) { - if(!this.tabs.hasOwnProperty(to.name)){ - this.initialize(false) - } - this.previous_active_tab=from.name - this.current_active_tab=to.name - } - } - } -</script> -<style> -</style> diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/router.js b/django_airavata/apps/admin/static/django_airavata_admin/src/router.js index b695de7..87f1f52 100644 --- a/django_airavata/apps/admin/static/django_airavata_admin/src/router.js +++ b/django_airavata/apps/admin/static/django_airavata_admin/src/router.js @@ -1,9 +1,6 @@ import ApplicationDeploymentEditor from "./components/applications/ApplicationDeploymentEditor.vue"; -import ApplicationDeployments from "./components/admin/ApplicationDeployments.vue"; import ApplicationDeploymentsList from "./components/applications/ApplicationDeploymentsList.vue"; -import ApplicationDetails from "./components/admin/ApplicationDetails.vue"; import ApplicationEditorContainer from "./components/applications/ApplicationEditorContainer.vue"; -import ApplicationInterface from "./components/admin/ApplicationInterface.vue"; import ApplicationInterfaceEditor from "./components/applications/ApplicationInterfaceEditor.vue"; import ApplicationModuleEditor from "./components/applications/ApplicationModuleEditor.vue"; import ApplicationsDashboard from "./components/dashboards/ApplicationsDashboard.vue"; @@ -12,33 +9,10 @@ import ComputeResourcePreferenceDashboard from "./components/dashboards/ComputeR import CredentialStoreDashboard from "./components/dashboards/CredentialStoreDashboard"; import ExperimentsDashboard from "./components/dashboards/ExperimentDashboard.vue"; import GroupComputeResourcePreference from "./components/admin/group_resource_preferences/GroupComputeResourcePreference"; -import NewApplication from "./components/admin/NewApplication.vue"; import VueRouter from "vue-router"; const routes = [ { - path: "/new/application", - component: NewApplication, - name: "newapp", - children: [ - { - path: "details", - component: ApplicationDetails, - name: "details" - }, - { - path: "interface", - component: ApplicationInterface, - name: "interface" - }, - { - path: "deployments", - component: ApplicationDeployments, - name: "deployments" - } - ] - }, - { path: "/applications/new", component: ApplicationEditorContainer, name: "new_application", diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/store/newapplication/app_deployments.js b/django_airavata/apps/admin/static/django_airavata_admin/src/store/newapplication/app_deployments.js deleted file mode 100644 index 57691a2..0000000 --- a/django_airavata/apps/admin/static/django_airavata_admin/src/store/newapplication/app_deployments.js +++ /dev/null @@ -1,81 +0,0 @@ -import Vue from 'vue' -import Utils from '../../utils' - -var initialState = function () { - return { - appDeployments:[], - appModuleId: '', - computeHostId: '', - executablePath: '', - parallelism: '', - appDeploymentDescription: '', - moduleLoadCmds: [], - libPrependPaths: [], - libAppendPaths: [], - setEnvironment: [], - preJobCommands: [], - postJobCommands: [], - defaultNodeCount: 1, - defaultCPUCount: 1, - defaultQueueName: '' - } -} -export default { - namespaced: true, - state: initialState(), - mutations: { - updateAppDeploymentValues: function (state, update) { - for (var prop in update) { - if (state.hasOwnProperty(prop)) { - Vue.set(state, prop, update[prop]) - } - } - }, - addEnvironmentValue: function (state,) { - - } - }, - getters: { - getAppModule: (state) => state.appModuleId, - getAppComputeHost: (state) => state.computeHostId, - getAppExecutablePath: (state) => state.app_exec_path, - getAppParallelismType: (state) => state.executablePath, - getAppDeploymentDescription: (state) => state.appDeploymentDescription, - getModuleLoadCmds: (state) => state.moduleLoadCmds, - getLibPrependPaths: (state) => state.libPrependPaths, - getLibAppendPaths: (state) => state.libAppendPaths, - getSetEnvironment: (state) => state.setEnvironment, - getPreJobCommands: (state) => state.preJobCommands, - getPostJobCommands: (state) => state.postJobCommands, - getDefaultNodeCount: (state) => state.defaultNodeCount, - getDefaultCPUCount: (state) => state.defaultCPUCount, - getDefaultQueueName: (state) => state.defaultQueueName, - getCompleteData: (state) => Object.assign({},state) - }, - actions: { - updateAppDeployment: function (context, update) { - context.commit('updateAppDeploymentValues', update) - }, - save:function ({commit,state, rootState},{success=null,failure=null}={}) { - var appDeployment=Object.assign({},state) - delete appDeployment.appDeployments - appDeployment.appModuleId=rootState.newApplication.appDetailsTab.appModuleId - Utils.post('/api/new/application/deployment',appDeployment,{success:success,failure:failure}) - }, - resetState:function ({commit,state,rootState}) { - Utils.resetData(state,initialState()) - }, - initializeAppDeployment:function ({commit, state, rootState},mount){ - var success=function (value) { - rootState.newApplication.appDeploymentsTabInitialized=false - state.appDeployments=value - mount() - } - if(rootState.newApplication.appDeploymentsTabInitialized){ - Utils.get('/api/application/deployment',{queryParams:{id:rootState.newApplication.appDetailsTab.appModuleId},success:success}) - }else { - mount() - } - } - } -} diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/store/newapplication/app_details.js b/django_airavata/apps/admin/static/django_airavata_admin/src/store/newapplication/app_details.js deleted file mode 100644 index 959f96a..0000000 --- a/django_airavata/apps/admin/static/django_airavata_admin/src/store/newapplication/app_details.js +++ /dev/null @@ -1,67 +0,0 @@ -import Vue from 'vue' -import Utils from '../../utils' -import {utils as apiUtils} from 'django-airavata-api' - -const fieldMapper={ - name:'appModuleName', - version:'appModuleVersion', - description:'appModuleDescription' -} - -var initialState=function () { - return { - name:'', - version:'', - description:'' - } -} - -export default{ - namespaced: true, - state:initialState(), - mutations:{ - addAppDetails:function (state,update) { - for(var prop in update){ - if(state.hasOwnProperty(prop)){ - Vue.set(state,prop,update[prop]) - } - } - }, - registerAppDetails:function (state) { - return apiUtils.FetchUtils.post('/api/new/application/module',state) - }, - resetState:state=>{ - Utils.resetData(state,initialState()) - } - }, - getters:{ - getAppName:(state)=>{ - return state.name; - }, - getAppVersion:(state)=>{ - return state.version; - }, - getAppDescription:(state)=>{ - return state.description; - }, - getAppDetails:(state)=>{ - return state; - } - }, - actions: { - updateAppDetails: function (context, update) { - context.commit('addAppDetails', update) - }, - registerAppModule: function ({commit, state}, {success = (val) => console.log("App Details", value), failure = (val) => console.log("Saving failed", value)} = {}) { - var succ = (value) => { - state.appModuleId = value - success(value) - - } - return Utils.post('/api/new/application/module', state, {success: succ, failure: failure}) - }, - resetState: function ({commit, state, rootState}) { - Utils.resetData(state, initialState()) - } - } -} diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/store/newapplication/app_interface.js b/django_airavata/apps/admin/static/django_airavata_admin/src/store/newapplication/app_interface.js deleted file mode 100644 index 5fb001d..0000000 --- a/django_airavata/apps/admin/static/django_airavata_admin/src/store/newapplication/app_interface.js +++ /dev/null @@ -1,225 +0,0 @@ -import Vue from 'vue' -import Utils from '../../utils' - -var initialState = function () { - return { - applicationInputs:{}, - applicationOutputs:{}, - counter:0, - initialized:false, - archiveWorkingDirectory:null, - hasOptionalFileInputs:null, - missingFields:false, - fetch:false - } -} - -export default{ - namespaced: true, - state:initialState(), - mutations:{ - createAppInterfaceInputFieldObject(state,id){ - Vue.set(state.applicationInputs,id,{ - input_id: id, - name: '', - value: '', - type: '', - applicationArgument: '', - userFriendlyDescription:'', - inputOrder:'', - dataStaged: false, - isRequired: false, - requiredToAddedToCommandLine: false, - isReadOnly:false, - standardInput:false - }); - }, - createAppInterfaceOutputFieldObject:function (state, id) { - Vue.set(state.applicationOutputs,id,{ - input_id: id, - name: '', - value: '', - type: '', - applicationArgument: '', - isRequired: false, - requiredToAddedToCommandLine: false, - dataMovement:false, - }); - }, - updateAppInterfaceField:function (state, param) { - var id=param.id - var updateValue=param.update - var fields=Object.assign({},state[param.fieldType]) - var inpField=fields[id] - var keys=Object.keys(updateValue) - for(var prop in updateValue){ - if(inpField.hasOwnProperty(prop)){ - inpField[prop]=updateValue[prop]; - } - } - Vue.set(state,param.fieldType,fields) - }, - setInitialize:function (state, intitalized) { - state.initialized=intitalized - }, - removeAppInterfaceField:function (state, params) { - var fields=state[params.fieldType]; - delete fields[params.id]; - Vue.set(state,params.fieldType,Object.assign({},fields)) - }, - deleteAllFields:function (state,fieldType) { - Vue.set(state,fieldType,{}) - }, - setArchiveWorkingDirectory:function (state,value) { - state.archiveWorkingDirectory=value - }, - setEnableOutputFileInput:function (state,value) { - state.hasOptionalFileInputs=value - }, - setMissingField:function (state,value) { - state.missingFields=value; - } - }, - getters:{ - isMissing:state=>{ - return state.missingFields; - }, - getAppInputField:state=>id=>{ - return state.applicationInputs[id]; - }, - getAppOutputField:state=>id=>{ - return state.applicationOutputs[id] - }, - isInitialized:state=>{ - return state.initialized; - }, - getAppInputFieldValue:state=>param=>{ - var val=state.applicationInputs[param.id][param['fieldName']] - return val - }, - getAppOutputFieldValue:state=>param=>{ - return state.applicationOutputs[param.id][param['fieldName']] - }, - isEnableArchiveWorkingDirectory:state=>state.archiveWorkingDirectory, - isEnableOutputFileInput:state=>state.hasOptionalFileInputs, - getAppapplicationInputs:state=>{ - return state.applicationInputs; - }, - getAppapplicationOutputs:state=>{ - return state.applicationOutputs - }, - getAppInputFieldIds: state=>{ - var ids=Object.getOwnPropertyNames(state.applicationInputs) - ids.splice(ids.indexOf('__ob__'),1) - return ids; - }, - getAppOutputFieldIds:state=>{ - var ids=Object.getOwnPropertyNames(state.applicationOutputs) - ids.splice(ids.indexOf('__ob__'),1) - return ids; - }, - getAppInterface:state=>{ - var data={ - applicationInputs:state.applicationInputs, - applicationOutputs:state.applicationOutputs, - archiveWorkingDirectory:state.archiveWorkingDirectory, - hasOptionalFileInputs:state.hasOptionalFileInputs - } - } - - - - }, - actions: { - createAppInterfaceInputField: function (context, id = null) { - if (id == null || !context.state.applicationInputs.hasOwnProperty(id)) { - id = (context.state.counter++).toString(); - context.commit('createAppInterfaceInputFieldObject', id); - } - return id; - }, - createAppInterfaceOutputField: function (context, id = null) { - if (id == null || !context.state.applicationInputs.hasOwnProperty(id)) { - id = (context.state.counter++).toString(); - context.commit('createAppInterfaceOutputFieldObject', id); - } - return id; - }, - deleteAppInterfaceInputField: function (context, id) { - context.commit('removeAppInterfaceField', {'fieldType': 'applicationInputs', 'id': id}); - }, - deleteAppInterfaceOutputField: function (context, id) { - context.commit('removeAppInterfaceField', {'fieldType': 'applicationOutputs', 'id': id}); - }, - updateInputFieldValues: function (context, param) { - param['fieldType'] = 'applicationInputs' - context.commit('updateAppInterfaceField', param) - }, - updateOutputField: function (context, param) { - param['fieldType'] = 'applicationOutputs' - context.commit('updateAppInterfaceField', param) - }, - initialized: function (context, initialize) { - context.commit('setInitialize', initialize) - }, - changeEnableOutputFileInput: function (context, value) { - context.commit('setEnableOutputFileInput', value) - }, - changeArchiveWorkingDirectory: function (context, value) { - context.commit('setArchiveWorkingDirectory', value) - }, - triggerMissingField: function (context, value) { - context.commit('setMissingField', value) - }, - fetch: function ({state, commit, rootState}) { - }, - saveApplicationInterface: function ({state, context, rootState},{success = (val) => console.log("App Interface", value), failure = (val) => console.log("Saving failed", value)} = {}) { - var appInterface = {} - appInterface.applicationInputs = Utils.convertKeyValuePairObjectToValueArray(state.applicationInputs) - appInterface.applicationOutputs = Utils.convertKeyValuePairObjectToValueArray(state.applicationOutputs) - appInterface.archiveWorkingDirectory = state.archiveWorkingDirectory - appInterface.hasOptionalFileInputs = state.hasOptionalFileInputs - appInterface.applicationName = rootState.newApplication.appDetailsTab.name - appInterface.applicationDescription = rootState.newApplication.appDetailsTab.description - appInterface.applicationModules=[rootState.newApplication.appDetailsTab.appModuleId] - appInterface.applicationName=rootState.newApplication.appDetailsTab.name - appInterface.applicationDescription=rootState.newApplication.appDetailsTab.description - console.log("Application Interface:", appInterface) - return Utils.post('/api/new/application/interface', appInterface,{success:success,failure:failure}) - }, - initializeAppInterface:function ({commit, state, rootState},mount){ - var success=function (value) { - if(value.applicationInputs){ - var temp={} - for(var i=0;i< value.applicationInputs.length;i++){ - temp[state.counter]=value.applicationInputs[i] - temp[state.counter].input_id=state.counter - state.counter=state.counter+1 - } - value.applicationInputs=temp - } - if(value.applicationOutputs){ - var temp={} - for(var i=0; i< value.applicationOutputs.length;i++){ - temp[state.counter]=value.applicationOutputs[i] - temp[state.counter].input_id=state.counter - state.counter=state.counter+1 - } - value.applicationOutputs=temp - } - Utils.resetData(state,value) - rootState.newApplication.appInterfaceTabInitialized=false - mount() - } - if(rootState.newApplication.appInterfaceTabInitialized){ - Utils.get('/api/application/interface',{queryParams:{id:rootState.newApplication.appDetailsTab.appModuleId},success:success}) - }else { - mount() - } - }, - resetState:function ({commit,state,rootState}) { - console.log() - Utils.resetData(state,initialState()) - } - } -} diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/store/newapplication/new_application.js b/django_airavata/apps/admin/static/django_airavata_admin/src/store/newapplication/new_application.js deleted file mode 100644 index 238080f..0000000 --- a/django_airavata/apps/admin/static/django_airavata_admin/src/store/newapplication/new_application.js +++ /dev/null @@ -1,52 +0,0 @@ -import Vue from 'vue' - -import appDetailsTab from './app_details' -import appInterfaceTab from './app_interface' -import appDeploymentsTab from './app_deployments' - - -export default { - namespaced: true, - state:{ - appInterfaceTabInitialized:false, - appDetailsTabInitialized:false, - appDeploymentsTabInitialized:false, - title:null - }, - modules:{ - appInterfaceTab, - appDetailsTab, - appDeploymentsTab - }, - getters:{ - getTitle:function (state) { - return state.title - } - }, - mutations:{ - setInitialization:function (state,update) { - for(prop in update){ - if(state.hasOwnProperty(prop)){ - Vue.set(state,prop,update[prop]) - } - } - } - }, - actions:{ - setModule:function ({commit,state,rootState},moduleInformation) { - rootState.newApplication.appDetailsTab.name=moduleInformation.appModuleName - rootState.newApplication.appDetailsTab.version=moduleInformation.appModuleVersion - rootState.newApplication.appDetailsTab.description=moduleInformation.appModuleDescription - rootState.newApplication.appDetailsTab.appModuleId=moduleInformation.appModuleId - state.appInterfaceTabInitialized=true - state.appDeploymentsTabInitialized=true - - }, - setTitle:function ({context,state,rootState},title) { - state.title=title - }, - resetStates:function () { - - } - } -} diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/store/store.js b/django_airavata/apps/admin/static/django_airavata_admin/src/store/store.js index 5a35cfa..2a05d40 100644 --- a/django_airavata/apps/admin/static/django_airavata_admin/src/store/store.js +++ b/django_airavata/apps/admin/static/django_airavata_admin/src/store/store.js @@ -1,7 +1,6 @@ import Vuex from "vuex"; import Vue from "vue"; -import newApplication from "./newapplication/new_application"; import computeResource from "./compute_resource_dashboard/compute_resource"; import loading from "./loading"; @@ -10,7 +9,6 @@ Vue.use(Vuex); const store = { modules: { - newApplication, loading, computeResource }
