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 c686e2e2aee068275a68570f9a994c6672730324 Author: Marcus Christie <[email protected]> AuthorDate: Tue Aug 28 15:42:22 2018 -0400 AIRAVATA-2876 Basic routing structure of app editor --- .../applications/ApplicationDeploymentEditor.vue | 10 + .../applications/ApplicationDeploymentsList.vue | 13 ++ .../applications/ApplicationEditorContainer.vue | 59 ++++++ .../applications/ApplicationInterfaceEditor.vue | 10 + .../applications/ApplicationModuleEditor.vue | 10 + .../dashboards/ApplicationsDashboard.vue | 2 +- .../src/components/tabs/TabbedView.vue | 2 +- .../static/django_airavata_admin/src/router.js | 59 +++++- .../django_airavata_admin/static/css/admin.css | 8 +- django_airavata/static/css/admin.css | 206 --------------------- django_airavata/static/css/app.css | 1 - django_airavata/static/css/app.css.map | 1 - django_airavata/static/css/base.css | 30 --- django_airavata/static/css/draft-colors.css | 3 - django_airavata/static/css/main.css | 145 --------------- django_airavata/static/css/main.css.map | 7 - 16 files changed, 162 insertions(+), 404 deletions(-) diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationDeploymentEditor.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationDeploymentEditor.vue new file mode 100644 index 0000000..ebfa79a --- /dev/null +++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationDeploymentEditor.vue @@ -0,0 +1,10 @@ +<template> + <div>Application Deployment Editor</div> +</template> + +<script> +export default { + name: 'application-deployment-editor' +} +</script> + diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationDeploymentsList.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationDeploymentsList.vue new file mode 100644 index 0000000..f7a53c8 --- /dev/null +++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationDeploymentsList.vue @@ -0,0 +1,13 @@ +<template> + <div> + Application Deployments List + <router-link :to="{name: 'application_deployment', params: {id: 'foo', deployment_id: 'bar'}}">Deployment</router-link> + </div> +</template> + +<script> +export default { + name: 'application-deployments-list' +} +</script> + diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationEditorContainer.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationEditorContainer.vue new file mode 100644 index 0000000..8913127 --- /dev/null +++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationEditorContainer.vue @@ -0,0 +1,59 @@ +<template> + <div> + <div class="row"> + <div class="col"> + <h1 class="h4 mb-4"> + {{ title }} + </h1> + </div> + </div> + <div class="row"> + <div class="col"> + <b-nav tabs> + <b-nav-item exact-active-class="active" exact :to="{name: id ? 'application_module' : 'new_application_module', params: {id: id}}">Details</b-nav-item> + <b-nav-item exact-active-class="active" exact :to="{name: 'application_interface', params: {id: id}}" :disabled="!id">Interface</b-nav-item> + <b-nav-item active-class="active" :to="{name: 'application_deployments', params: {id: id}}" :disabled="!id">Deployments</b-nav-item> + </b-nav> + <router-view name="module"/> + <router-view name="interface"/> + <router-view name="deployments"/> + <router-view name="deployment"/> + </div> + </div> + </div> +</template> + +<script> +export default { + name: 'application-editor-container', + props: { + id: String + }, + data: function() { + return { + module: null, + interface: null, + deployments: null, + deployment: null, + } + }, + computed: { + title: function() { + if (this.id) { + + return this.module && this.module.appModuleName ? this.module.appModuleName : ""; + } else { + return "Create a New Application"; + } + } + } +} +</script> + +<style> +/* style the containing div, in base.html template */ +/* .main-content { + background-color: #ffffff; +} */ +</style> + diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationInterfaceEditor.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationInterfaceEditor.vue new file mode 100644 index 0000000..1137fad --- /dev/null +++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationInterfaceEditor.vue @@ -0,0 +1,10 @@ +<template> + <div>Application Interface Editor</div> +</template> + +<script> +export default { + name: 'application-interface-editor' +} +</script> + diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationModuleEditor.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationModuleEditor.vue new file mode 100644 index 0000000..fcc70a9 --- /dev/null +++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationModuleEditor.vue @@ -0,0 +1,10 @@ +<template> + <div>Application Module Editor</div> +</template> + +<script> +export default { + name: 'application-module-editor' +} +</script> + diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/dashboards/ApplicationsDashboard.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/dashboards/ApplicationsDashboard.vue index 88da9f2..afc4632 100644 --- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/dashboards/ApplicationsDashboard.vue +++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/dashboards/ApplicationsDashboard.vue @@ -61,7 +61,7 @@ this.setTitle("Edit Application") this.resetApplication() this.setModule(item) - this.$router.push({name: 'details'}) + this.$router.push({name: 'application_module', params: {id: item.appModuleId}}) }, resetApplication:function () { console.log("Resetting") diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/tabs/TabbedView.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/tabs/TabbedView.vue index 3e88e8a..a5c3e17 100644 --- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/tabs/TabbedView.vue +++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/tabs/TabbedView.vue @@ -64,7 +64,7 @@ } } </script> -<style> +<style scoped> .new_app { margin: 45px; width: 70%; 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 62893e3..9e737a2 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,13 +1,18 @@ -import ApplicationsDashboard from './components/dashboards/ApplicationsDashboard.vue' -import NewApplication from './components/admin/NewApplication.vue' -import ExperimentsDashboard from './components/dashboards/ExperimentDashboard.vue' +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 ApplicationDeployments from './components/admin/ApplicationDeployments.vue' -import GroupComputeResourcePreference from './components/admin/group_resource_preferences/GroupComputeResourcePreference' +import ApplicationInterfaceEditor from './components/applications/ApplicationInterfaceEditor.vue' +import ApplicationModuleEditor from './components/applications/ApplicationModuleEditor.vue' +import ApplicationsDashboard from './components/dashboards/ApplicationsDashboard.vue' import ComputePreference from './components/admin/group_resource_preferences/ComputePreference' import ComputeResourcePreferenceDashboard from './components/dashboards/ComputeResourcePreferenceDashboard' 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' @@ -31,6 +36,50 @@ const routes = [ } ] }, + { + path: '/applications/new', component: ApplicationEditorContainer, name: 'new_application', + children: [ + // TODO: Maybe only have the module route for a new application, save it + // and then replace the URL with the module id + { + path: '', components: { + module: ApplicationModuleEditor + }, + name: 'new_application_module' + }, + ] + }, + { + path: '/applications/:id', component: ApplicationEditorContainer, name: 'application', + props: true, + children: [ + { + path: '', components: { + module: ApplicationModuleEditor + }, + name: 'application_module' + }, + { + path: 'interface', components: { + interface: ApplicationInterfaceEditor + }, + name: 'application_interface' + }, + { + path: 'deployments', components: { + deployments: ApplicationDeploymentsList + }, + name: 'application_deployments' + }, + { + path: 'deployments/:deployment_id', components: { + deployment: ApplicationDeploymentEditor + }, + name: 'application_deployment', + props: true + }, + ] + }, {path: '/applications', component: ApplicationsDashboard}, {path: '/experiments', component: ExperimentsDashboard, name: 'experiments_dashboard'}, { diff --git a/django_airavata/apps/admin/static/django_airavata_admin/static/css/admin.css b/django_airavata/apps/admin/static/django_airavata_admin/static/css/admin.css index 0548096..3b633b7 100644 --- a/django_airavata/apps/admin/static/django_airavata_admin/static/css/admin.css +++ b/django_airavata/apps/admin/static/django_airavata_admin/static/css/admin.css @@ -139,7 +139,7 @@ button, input[type="button"] { color: inherit; } -.active { +/* .active { color: #333333; border-top: solid #999999 1px; border-left: solid #999999 1px; @@ -147,12 +147,12 @@ button, input[type="button"] { border-bottom: hidden; border-top-right-radius: 3px; border-top-left-radius: 3px; -} +} */ -.tabs { +/* .tabs { display: flex; width: 100%; -} +} */ .deployment.btn { float: right; diff --git a/django_airavata/static/css/admin.css b/django_airavata/static/css/admin.css deleted file mode 100644 index 8c63f3d..0000000 --- a/django_airavata/static/css/admin.css +++ /dev/null @@ -1,206 +0,0 @@ -.entry { - margin-top: 20px; - display: block; -} - -.entry .heading { - font-size: 16px; - font-weight: bold; - margin-bottom: 10px; -} - -input[type="text"], input[type="number"], textarea, select { - width: 100%; - border-radius: 2px; - border: solid #dddddd 1px; - padding: 7px; - height: 40px; -} - -button, input[type="button"] { - outline: none; -} - -.main_section { - width: 100%; - display: block; - margin-top: 50px; - margin-bottom: 20px; -} - -.new-application-tab-main { - width: 65%; - margin-bottom: 30px; -} - -.btns { - margin-top: 50px; - display: inline-block; - width: 100%; -} - -.vbtn { - margin-left: 20px; - text-align: center; - border-color: #007BFF; - border-style: solid; - border-radius: 3px; - padding-top: 5px; - padding-bottom: 5px; - padding-left: 15px; - padding-right: 15px; -} - -.vbtn:hover { - background-color: #3ca41a; - color: #f1fff3; - border-color: #3ca41a; -} - -.vbtn-default { - background-color: #007BFF; - color: white; -} - -.vbtn.vbtn-default:active, .vbtn.vbtn-cancel:active { - background-color: #f1fff3; - color: #3ca41a; - border-color: #3ca41a; -} - -.vbtn-cancel { - color: #007BFF; - background-color: white; -} - -.interface-main { - border: solid 1px #dddddd; - border-radius: 4px; -} - -.input-field-header { - background-color: #F8F8F8; - width: 100%; - padding: 15px; - border: solid 1px #dddddd; - text-align: left; -} - -.vmain { - z-index: 1; - width: 100%; -} - -.fade-enter-active, .fade-leave-active { - transition-property: opacity; - transition-duration: .25s; -} - -.fade-enter-active { - transition-delay: .25s; -} - -.fade-enter, .fade-leave-active { - opacity: 0 -} - -.new_app { - margin: 45px; - width: 70%; -} - -.main { - width: 100%; - margin-top: 50px; -} - -.tab { - text-align: center; - width: 120px; - margin-bottom: 15px; - border-bottom: solid #999999 1px; - color: #007BFF; -} - -.tab .lbl:hover { - cursor: pointer; -} - -.active .lbl:hover { - cursor: default; -} - -.lbl { - margin: 10px; - color: inherit; -} - -.link { - color: inherit; -} - -.active { - color: #333333; - border-top: solid #999999 1px; - border-left: solid #999999 1px; - border-right: solid #999999 1px; - border-bottom: hidden; - border-top-right-radius: 3px; - border-top-left-radius: 3px; -} - -.tabs { - display: flex; - width: 100%; -} - -.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.btn:active { - background-color: #f1fff3; - color: #3ca41a; - border-color: #3ca41a; -} - -.deployment-entry { - display: inline-block; - margin-top: 15px; - width: 100%; -} - -.name_value { - display: inline-flex; - width: 100%; - margin-bottom: 5px; -} - -.name_value input { - width: 50%; - display: inline-flex; - margin-right: 5px; -} -.tab-view{ - padding:15px; - width:100%; -} - - diff --git a/django_airavata/static/css/app.css b/django_airavata/static/css/app.css deleted file mode 100644 index 3443efd..0000000 --- a/django_airavata/static/css/app.css +++ /dev/null @@ -1 +0,0 @@ -.gen{padding:10px;width:40%;height:100%}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.ssh{padding:10px;border-bottom:1px solid #ddd;-webkit-animation:fadeIn 1s;animation:fadeIn 1s}.ssh.remove{-webkit-animation:fadeOut 1s;animation:fadeOut 1s;opacity:1}.ssh-key,.ssh-val{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline- [...] \ No newline at end of file diff --git a/django_airavata/static/css/app.css.map b/django_airavata/static/css/app.css.map deleted file mode 100644 index e788fad..0000000 --- a/django_airavata/static/css/app.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["webpack:///./static/django_airavata_admin/src/components/dashboards/CredentialStore.vue","webpack:///./static/django_airavata_admin/src/components/admin/GenerateSSHKey.vue","webpack:///./static/django_airavata_admin/src/components/Loading.vue","webpack:///./static/django_airavata_admin/src/components/tabs/TabbedView.vue","webpack:///./static/django_airavata_admin/src/components/admin/compute_resource/DescriptionTab.vue","webpack:///./static/django_airavata_admin/ [...] \ No newline at end of file diff --git a/django_airavata/static/css/base.css b/django_airavata/static/css/base.css deleted file mode 100644 index 529571b..0000000 --- a/django_airavata/static/css/base.css +++ /dev/null @@ -1,30 +0,0 @@ - -#mainheader { - height: 84px; - position: relative; -} -#mainheader .logo { - max-height: 100%; - background-color: #3D84A8; - vertical-align: top; -} -#mainheader > * { - display: inline-block; -} -#mainheader header { - margin-left: 40px; - margin-right: 40px; -} -#mainheader h1 { - font-size: 20px; - color: #666666; - line-height: 84px; - margin-top: 0px; - margin-bottom: 0px; -} -#user-nav { - top: 50%; - margin-top: -25px; - right: 0px; - position: absolute; -} \ No newline at end of file diff --git a/django_airavata/static/css/draft-colors.css b/django_airavata/static/css/draft-colors.css deleted file mode 100644 index 6e1cb97..0000000 --- a/django_airavata/static/css/draft-colors.css +++ /dev/null @@ -1,3 +0,0 @@ -.purple { - color: purple; -} diff --git a/django_airavata/static/css/main.css b/django_airavata/static/css/main.css deleted file mode 100644 index 523b230..0000000 --- a/django_airavata/static/css/main.css +++ /dev/null @@ -1,145 +0,0 @@ -html, -body { - height: 100%; } - -body { - color: #333; - background-color: #f7f7f7; } - -.c-header { - display: flex; - align-items: center; - border-bottom: 1px solid #ddd; - background-color: #ffffff; } - .c-header__logo { - margin-right: 1rem; - width: 70px; - background-color: #990000; } - .c-header__logo svg { - display: block; } - .c-header__title { - font-size: 1.25rem; - line-height: 1; } - .c-header__title a { - color: #333; } - .c-header__controls { - margin-left: auto; - margin-right: 2rem; } - -.c-nav { - background-color: #444; - min-width: 70px; - min-height: 60px; - padding: 1rem 0; - margin-top: -1px; - display: flex; } - .c-nav__item { - color: #ccc; - font-size: 1.5rem; - display: block; - text-align: center; - line-height: 1; - flex-grow: 1; } - .c-nav__item:hover, .c-nav__item:focus { - color: #ffffff; } - .c-nav__item:active { - color: #bbb; } - .c-nav__item.is-active { - color: #ffffff; } - -@media screen and (min-width: 768px) { - .c-nav { - height: 100%; - flex-direction: column; } - .c-nav__item { - flex-grow: 0; - margin-bottom: 2rem; } } -.stage { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; } - -@media screen and (min-width: 768px) { - .stage { - flex-direction: row; } } -.main-content { - flex-grow: 1; - padding: 1rem; } - -.sidebar { - flex-basis: 200px; - background-color: #ffffff; } - -.sidebar-header { - padding: 1.5rem; - display: flex; - align-items: center; - border-bottom: 1px solid #eee; } - .sidebar-header__title { - font-size: .825rem; - text-transform: uppercase; - letter-spacing: .04rem; - margin: 0; } - .sidebar-header__action { - margin-left: auto; - font-size: .825rem; } - -@media screen and (min-width: 768px) { - .sidebar { - min-width: 310px; - border-left: 1px solid #ddd; } } -.card { - background-color: #fff; - border-radius: 4px; - border: none; - box-shadow: 0 2px 0 #eee; - margin-bottom: 30px; } - -/** - * Make a small card text modifier so we can still use - * Bootstrap's default styles if needed. - */ -.card-text--small { - line-height: 1.4; - font-size: .825rem; } - -.card.is-disabled { - background-color: #ddd; } - .card.is-disabled .card-title { - color: #999999; } - .card.is-disabled .badge { - background-color: #ccc; - color: #999999; } - -.card-link:hover { - text-decoration: none; - background-color: #fafafa; } - -.card.is-disabled .card-link:hover { - background-color: #ddd; - cursor: not-allowed; } - -/** - * Feed - */ -.feed { - list-style: none; - margin: 0; - padding: 0; } - .feed__list-item { - padding: 1.5rem; - border-bottom: 1px solid #eee; } - .feed__label { - font-size: .825rem; - text-transform: uppercase; } - .feed__title { - font-size: 1rem; - margin: 0; } - .feed__title a { - color: #212529; } - .feed__item-meta { - margin: 0; - font-size: .825rem; } - -/*# sourceMappingURL=main.css.map */ diff --git a/django_airavata/static/css/main.css.map b/django_airavata/static/css/main.css.map deleted file mode 100644 index 3f5b826..0000000 --- a/django_airavata/static/css/main.css.map +++ /dev/null @@ -1,7 +0,0 @@ -{ -"version": 3, -"mappings": "AAAA;IACK;EACH,MAAM,EAAE,IAAI;;AAGd,IAAK;EACH,KAAK,EAAE,IAAI;EACX,gBAAgB,EAAE,OAAO;;AAG3B,SAAU;EACR,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,aAAa,EAAE,cAAc;EAC7B,gBAAgB,EAAE,OAAO;EAEzB,eAAQ;IACN,YAAY,EAAE,IAAI;IAClB,KAAK,EAAE,IAAI;IACX,gBAAgB,EAAE,OAAO;IAEzB,mBAAI;MACF,OAAO,EAAE,KAAK;EAIlB,gBAAS;IACP,SAAS,EAAE,OAAO;IAClB,WAAW,EAAE,CAAC;IAEd,kBAAE;MACA,KAAK,EAAE,IAAI;EAIf,mBAAY;IACV,WAAW,EAAE,IAAI;IACjB,YAAY,EAAE,IAAI;;AAItB,MAAO;EACL,gBAAgB,EAAE,IAAI;EACtB,SAAS,EAAE,IAAI;EAC [...] -"sources": ["main.scss"], -"names": [], -"file": "main.css" -} \ No newline at end of file
