airavata-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From dimuthu...@apache.org
Subject [airavata-django-portal] branch master updated: Adding edit parser view
Date Tue, 15 Jan 2019 20:40:48 GMT
This is an automated email from the ASF dual-hosted git repository.

dimuthuupe pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git


The following commit(s) were added to refs/heads/master by this push:
     new a079ca2  Adding edit parser view
a079ca2 is described below

commit a079ca2e2a93df1e0fc0ef29838b15410e4d15e6
Author: Dimuthu Wannipurage <dimuthu.upeksha2@gmail.com>
AuthorDate: Tue Jan 15 15:40:40 2019 -0500

    Adding edit parser view
---
 django_airavata/apps/api/serializers.py            |   4 +-
 .../static/django_airavata_api/js/models/Parser.js |   3 +-
 .../js/containers/ParserEditContainer.vue          |  43 +++++
 .../js/parser-components/ParserEditor.vue          | 187 +++++++++++++++++++++
 .../js/parser-components/ParserList.vue            |   3 +-
 .../js/parser-components/ParserListItem.vue        |   5 +
 .../js/parser-edit-entry-point.js                  |  25 +++
 .../django_airavata_dataparsers/edit-parser.html   |  19 +++
 django_airavata/apps/dataparsers/urls.py           |   7 +-
 django_airavata/apps/dataparsers/views.py          |   5 +
 django_airavata/apps/dataparsers/webpack.config.js |   1 +
 11 files changed, 294 insertions(+), 8 deletions(-)

diff --git a/django_airavata/apps/api/serializers.py b/django_airavata/apps/api/serializers.py
index a249575..97d1344 100644
--- a/django_airavata/apps/api/serializers.py
+++ b/django_airavata/apps/api/serializers.py
@@ -764,9 +764,7 @@ class StorageResourceSerializer(
 
 
 class ParserSerializer(thrift_utils.create_serializer_class(Parser)):
-    url = FullyEncodedHyperlinkedIdentityField(
+     url = FullyEncodedHyperlinkedIdentityField(
         view_name='django_airavata_api:parser-detail',
         lookup_field='id',
         lookup_url_kwarg='parser_id')
-    creationTime = UTCPosixTimestampDateTimeField()
-    updateTime = UTCPosixTimestampDateTimeField()
diff --git a/django_airavata/apps/api/static/django_airavata_api/js/models/Parser.js b/django_airavata/apps/api/static/django_airavata_api/js/models/Parser.js
index 99ecadc..9f0d707 100644
--- a/django_airavata/apps/api/static/django_airavata_api/js/models/Parser.js
+++ b/django_airavata/apps/api/static/django_airavata_api/js/models/Parser.js
@@ -18,7 +18,8 @@ const FIELDS = [
     name: "outputFiles",
     list: true,
     type: ParserOutputFile
-  }
+  },
+  "gatewayId"
 ];
 
 export default class Parser extends BaseModel {
diff --git a/django_airavata/apps/dataparsers/static/django_airavata_dataparsers/js/containers/ParserEditContainer.vue
b/django_airavata/apps/dataparsers/static/django_airavata_dataparsers/js/containers/ParserEditContainer.vue
new file mode 100644
index 0000000..cde65ca
--- /dev/null
+++ b/django_airavata/apps/dataparsers/static/django_airavata_dataparsers/js/containers/ParserEditContainer.vue
@@ -0,0 +1,43 @@
+<template>
+    <parser-editor v-if="parser" :parser="parser" @saved="handleSaved" @cancelled="handleCancelled"></parser-editor>
+</template>
+
+<script>
+
+import ParserEditor from '../parser-components/ParserEditor.vue';
+
+import { models, services } from 'django-airavata-api'
+import { components as comps } from 'django-airavata-common-ui'
+
+export default {
+    name: 'parser-edit-container',
+    props: {
+        parserId: {
+            type: String,
+            required: true,
+        }
+    },
+    data () {
+        return {
+            parser: null,
+        }
+    },
+    components: {
+        ParserEditor,
+    },
+    methods: {
+        handleSaved: function(parser) {
+            window.location.assign("/dataparsers/");
+        },
+        handleCancelled: function(parser) {
+          window.location.assign("/dataparsers/");
+        },
+    },
+    computed: {
+    },
+    mounted: function () {
+        services.ParserService.retrieve({lookup: this.parserId})
+            .then(parser => this.parser = parser);
+    },
+}
+</script>
diff --git a/django_airavata/apps/dataparsers/static/django_airavata_dataparsers/js/parser-components/ParserEditor.vue
b/django_airavata/apps/dataparsers/static/django_airavata_dataparsers/js/parser-components/ParserEditor.vue
new file mode 100644
index 0000000..eced810
--- /dev/null
+++ b/django_airavata/apps/dataparsers/static/django_airavata_dataparsers/js/parser-components/ParserEditor.vue
@@ -0,0 +1,187 @@
+<template>
+  <div>
+    <div class="row">
+      <div class="col">
+        <h1 class="h4 mb-4">{{ title }}</h1>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <div class="card">
+          <div class="card-body">
+
+            <b-alert :variant="showDismissibleAlert.variant" dismissible :show="showDismissibleAlert.dismissable"
@dismissed="showDismissibleAlert.dismissable=false">
+              {{ showDismissibleAlert.message }}
+            </b-alert>
+
+            <b-form>
+
+              <b-form-group id="group1" label="Parser Name:" label-for="parser_name" description="Name
should only contain Alpha Characters">
+                <b-form-input id="parser_name" type="text" v-model="localParser.id" required
placeholder="Enter parser name">
+                </b-form-input>
+              </b-form-group>
+
+              <b-form-group id="group2" label="Docker Image:" label-for="docker-image">
+                <b-form-input id="docker-image" type="text" v-model="localParser.imageName"
required placeholder="Enter the Docker Image name">
+                </b-form-input>
+              </b-form-group>
+
+              <b-form-group id="group3" label="Input Data Directory:" label-for="input-path">
+                <b-form-input id="input-path" type="text" v-model="localParser.inputDirPath"
required placeholder="Enter input directory of the container">
+                </b-form-input>
+              </b-form-group>
+
+              <b-form-group id="group4" label="Output Data Directory:" label-for="output-path">
+                <b-form-input id="output-path" type="text" v-model="localParser.outputDirPath"
required placeholder="Enter output directory of the container">
+                </b-form-input>
+              </b-form-group>
+            </b-form>
+
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col">
+        <div class="card">
+          <div class="card-body">
+            <list-layout :items="localParser.inputFiles" title="Inputs" new-item-button-text="New
Input"
+                         @add-new-item="createInput">
+              <template slot="item-list" slot-scope="slotProps">
+
+                <b-table hover :fields="parserInputFields" :items="slotProps.items">
+                </b-table>
+              </template>
+            </list-layout>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col">
+        <div class="card">
+          <div class="card-body">
+            <list-layout :items="localParser.outputFiles" title="Outputs" new-item-button-text="New
Output"
+                         @add-new-item="createOutput">
+              <template slot="item-list" slot-scope="slotProps">
+                <b-table hover :fields="parserOutputFields" :items="slotProps.items">
+                </b-table>
+              </template>
+            </list-layout>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col d-flex justify-content-end">
+        <b-button variant="primary" @click="saveParser">Save</b-button>
+        <b-button v-if="parser" class="ml-2" variant="danger" @click="removeParser">Delete</b-button>
+        <b-button class="ml-2" variant="secondary" @click="cancel">Cancel</b-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { models, services } from "django-airavata-api";
+import { components as comps, layouts } from "django-airavata-common-ui";
+
+export default {
+  props: {
+    parser: {
+      type: models.Parser,
+      required: true
+    }
+  },
+  data() {
+    return {
+      localParser: this.parser.clone(),
+      service: services.ServiceFactory.service("Parsers"),
+      showDismissibleAlert: {
+        variant: "success",
+        message: "no data",
+        dismissable: false
+      },
+      parserInputFields: [
+        {
+          label: "Name",
+          key: "name"
+        },
+        {
+          label: "Required",
+          key: "requiredInput"
+        },
+        {
+          label: "Type",
+          key: "type"
+        },
+        {
+          label: "Action",
+          key: "action"
+        }
+      ],
+      parserOutputFields: [
+        {
+          label: "Name",
+          key: "name"
+        },
+        {
+          label: "Required",
+          key: "requiredOutput"
+        },
+        {
+          label: "Type",
+          key: "type"
+        },
+        {
+          label: "Action",
+          key: "action"
+        }
+      ]
+    };
+  },
+  computed: {
+    title: function() {
+      return this.parser
+        ? this.parser.id
+        : "New Parser";
+    }
+  },
+  components: {
+    "list-layout": layouts.ListLayout,
+  },
+  methods: {
+    submitForm() {
+    },
+    createInput: function() {
+
+    },
+    createOutput: function() {
+
+    },
+    saveParser: function() {
+      var persist = null;
+      if (this.parser) {
+        persist = this.service.update({ data: this.localParser, lookup: this.parser.id });
+      } else {
+        //persist = this.service.create({ data: this.localParser }).then(data => {
+          // Merge sharing settings with default sharing settings created when
+          // Group Resource Profile was created
+          //const savedPArserId = data.id;
+         // });
+      }
+      persist.then(data => {
+        this.$emit("saved");
+      });
+    },
+    removeParser: function() {
+
+    },
+    cancel: function() {
+      this.$emit("cancelled");
+    }
+  }
+};
+</script>
diff --git a/django_airavata/apps/dataparsers/static/django_airavata_dataparsers/js/parser-components/ParserList.vue
b/django_airavata/apps/dataparsers/static/django_airavata_dataparsers/js/parser-components/ParserList.vue
index 18e7326..c60d7fe 100644
--- a/django_airavata/apps/dataparsers/static/django_airavata_dataparsers/js/parser-components/ParserList.vue
+++ b/django_airavata/apps/dataparsers/static/django_airavata_dataparsers/js/parser-components/ParserList.vue
@@ -4,9 +4,10 @@
     <table class="table table-hover">
         <thead>
             <tr>
-                <th>Id</th>
+                <th>Name</th>
                 <th>Image Name</th>
                 <th>Execution Command</th>
+                <th>Actions</th>
             </tr>
         </thead>
         <tbody>
diff --git a/django_airavata/apps/dataparsers/static/django_airavata_dataparsers/js/parser-components/ParserListItem.vue
b/django_airavata/apps/dataparsers/static/django_airavata_dataparsers/js/parser-components/ParserListItem.vue
index 5cc382c..5911e39 100644
--- a/django_airavata/apps/dataparsers/static/django_airavata_dataparsers/js/parser-components/ParserListItem.vue
+++ b/django_airavata/apps/dataparsers/static/django_airavata_dataparsers/js/parser-components/ParserListItem.vue
@@ -3,6 +3,11 @@
         <td>{{ parser.id }}</td>
         <td>{{ parser.imageName }}</td>
         <td>{{ parser.executionCommand }}</td>
+        <td>
+          <a :href="'/dataparsers/edit/' + encodeURIComponent(parser.id) + '/'">
+            Edit <i class="fa fa-pencil"></i>
+          </a>
+        </td>
     </tr>
 </template>
 
diff --git a/django_airavata/apps/dataparsers/static/django_airavata_dataparsers/js/parser-edit-entry-point.js
b/django_airavata/apps/dataparsers/static/django_airavata_dataparsers/js/parser-edit-entry-point.js
new file mode 100644
index 0000000..23fbd4c
--- /dev/null
+++ b/django_airavata/apps/dataparsers/static/django_airavata_dataparsers/js/parser-edit-entry-point.js
@@ -0,0 +1,25 @@
+import Vue from 'vue'
+import BootstrapVue from 'bootstrap-vue'
+import ParserEditContainer from './containers/ParserEditContainer.vue'
+// This is imported globally on the website so no need to include it again in this view
+// import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+
+Vue.use(BootstrapVue);
+
+new Vue({
+  el: "#edit-parser",
+  template: '<parser-edit-container :parserId="parserId"></parser-edit-container>',
+  data: {
+      parserId: null,
+  },
+  components: {
+      ParserEditContainer,
+  },
+  beforeMount: function() {
+      if (this.$el.dataset.parserId) {
+          this.parserId = this.$el.dataset.parserId;
+          console.log("parserId", this.parserId);
+      }
+  }
+})
diff --git a/django_airavata/apps/dataparsers/templates/django_airavata_dataparsers/edit-parser.html
b/django_airavata/apps/dataparsers/templates/django_airavata_dataparsers/edit-parser.html
new file mode 100644
index 0000000..b3aa16c
--- /dev/null
+++ b/django_airavata/apps/dataparsers/templates/django_airavata_dataparsers/edit-parser.html
@@ -0,0 +1,19 @@
+{% extends './base.html' %}
+
+{% load static %}
+
+{% block css %}
+{{ block.super }}
+<link rel=stylesheet type=text/css href="{% static 'django_airavata_dataparsers/dist/parser-edit.css'
%}">
+{% endblock %}
+
+{% block content %}
+
+<div id="edit-parser" data-parser-id="{{ parser_id }}"></div>
+
+{% endblock content %}
+
+{% block scripts %}
+{{ block.super }}
+<script src="{% static "django_airavata_dataparsers/dist/parser-edit.js" %}"></script>
+{% endblock %}
diff --git a/django_airavata/apps/dataparsers/urls.py b/django_airavata/apps/dataparsers/urls.py
index c25bfa6..b38e28f 100644
--- a/django_airavata/apps/dataparsers/urls.py
+++ b/django_airavata/apps/dataparsers/urls.py
@@ -5,7 +5,8 @@ from . import views
 
 app_name = 'django_airavata_dataparsers'
 urlpatterns = [
-    url(r'^home$', views.home, name='home'),
-    url(r'^parsers/(?P<parser_id>[^/]+)/$',
-        views.parser_details, name="parser_details")
+    url(r'^$', views.home, name='home'),
+    url(r'^parsers/(?P<parser_id>[^/]+)/$', views.parser_details, name="parser_details"),
+    url(r'^edit/(?P<parser_id>[^/]+)/$', views.edit_parser, name='edit_parser'),
+
 ]
diff --git a/django_airavata/apps/dataparsers/views.py b/django_airavata/apps/dataparsers/views.py
index 963ba1a..e10cb61 100644
--- a/django_airavata/apps/dataparsers/views.py
+++ b/django_airavata/apps/dataparsers/views.py
@@ -16,3 +16,8 @@ def parser_details(request, parser_id):
     return render(request, 'django_airavata_dataparsers/parser-details.html', {
         "parser_id": parser_id
     })
+
+def edit_parser(request, parser_id):
+    return render(request, 'django_airavata_dataparsers/edit-parser.html', {
+        "parser_id": parser_id
+    })
diff --git a/django_airavata/apps/dataparsers/webpack.config.js b/django_airavata/apps/dataparsers/webpack.config.js
index 4f80fd0..5654544 100644
--- a/django_airavata/apps/dataparsers/webpack.config.js
+++ b/django_airavata/apps/dataparsers/webpack.config.js
@@ -7,6 +7,7 @@ module.exports = {
   entry: {
       'parser-details': './static/django_airavata_dataparsers/js/entry-parser-details',
       'parser-list': './static/django_airavata_dataparsers/js/parser-listing-entry-point.js',
+      'parser-edit': './static/django_airavata_dataparsers/js/parser-edit-entry-point.js'
   },
   output: {
     path: path.resolve(__dirname, './static/django_airavata_dataparsers/dist/'),


Mime
View raw message