You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airavata.apache.org by ma...@apache.org on 2019/01/30 14:05:57 UTC

[airavata-django-portal] branch master updated: Adding experiment id to experiment summary, with copy link

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


The following commit(s) were added to refs/heads/master by this push:
     new 26bc65a  Adding experiment id to experiment summary, with copy link
26bc65a is described below

commit 26bc65af631838f5eefde5771ad647134b5f42dc
Author: Marcus Christie <ma...@iu.edu>
AuthorDate: Wed Jan 30 09:05:46 2019 -0500

    Adding experiment id to experiment summary, with copy link
---
 django_airavata/apps/admin/package.json                |  1 -
 .../components/credentials/SSHCredentialSelector.vue   |  7 +++----
 .../components/dashboards/CredentialStoreDashboard.vue |  3 +--
 .../js/components/experiment/ExperimentSummary.vue     | 12 +++++++++++-
 .../common/js/components}/ClipboardCopyButton.vue      | 18 +++++++++++-------
 .../common/js/components}/ClipboardCopyLink.vue        | 17 +++++++++++++----
 django_airavata/static/common/js/index.js              |  4 ++++
 django_airavata/static/common/package.json             |  1 +
 docs/dev/developing_frontend.md                        |  8 ++++++++
 9 files changed, 52 insertions(+), 19 deletions(-)

diff --git a/django_airavata/apps/admin/package.json b/django_airavata/apps/admin/package.json
index 71a5d32..21d49f4 100644
--- a/django_airavata/apps/admin/package.json
+++ b/django_airavata/apps/admin/package.json
@@ -13,7 +13,6 @@
   "dependencies": {
     "bootstrap": "^4.0.0",
     "bootstrap-vue": "^2.0.0-rc.11",
-    "clipboard": "^2.0.1",
     "django-airavata-api": "file:../api",
     "django-airavata-common-ui": "file:../../static/common",
     "moment": "^2.22.2",
diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/credentials/SSHCredentialSelector.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/credentials/SSHCredentialSelector.vue
index 8775db1..ead1bb6 100644
--- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/credentials/SSHCredentialSelector.vue
+++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/credentials/SSHCredentialSelector.vue
@@ -14,7 +14,7 @@
         </option>
       </b-form-select>
       <b-input-group-append>
-        <clipboard-copy-button variant="secondary" :disabled="!copySSHPublicKeyText" :text="copySSHPublicKeyText">
+        <clipboard-copy-button variant="secondary" :text="copySSHPublicKeyText">
         </clipboard-copy-button>
         <b-button variant="secondary" @click="showNewSSHCredentialModal">
           <i class="fa fa-plus"></i>
@@ -27,8 +27,7 @@
 
 <script>
 import { services } from "django-airavata-api";
-import { mixins } from "django-airavata-common-ui";
-import ClipboardCopyButton from "../commons/ClipboardCopyButton.vue";
+import { components, mixins } from "django-airavata-common-ui";
 import NewSSHCredentialModal from "../credentials/NewSSHCredentialModal.vue";
 
 export default {
@@ -52,7 +51,7 @@ export default {
   },
   mixins: [mixins.VModelMixin],
   components: {
-    ClipboardCopyButton,
+    "clipboard-copy-button": components.ClipboardCopyButton,
     "new-ssh-credential-modal": NewSSHCredentialModal
   },
   data() {
diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/dashboards/CredentialStoreDashboard.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/dashboards/CredentialStoreDashboard.vue
index 55da9cd..ea3f797 100644
--- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/dashboards/CredentialStoreDashboard.vue
+++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/dashboards/CredentialStoreDashboard.vue
@@ -43,7 +43,6 @@
 import { services } from "django-airavata-api";
 import { components, layouts } from "django-airavata-common-ui";
 import moment from "moment";
-import ClipboardCopyLink from "../commons/ClipboardCopyLink.vue";
 import NewSSHCredentialModal from "../credentials/NewSSHCredentialModal.vue";
 import NewPasswordCredentialModal from "../credentials/NewPasswordCredentialModal.vue";
 
@@ -51,7 +50,7 @@ export default {
   components: {
     "delete-link": components.DeleteLink,
     "list-layout": layouts.ListLayout,
-    ClipboardCopyLink,
+    "clipboard-copy-link": components.ClipboardCopyLink,
     "new-password-credential-modal": NewPasswordCredentialModal,
     "new-ssh-credential-modal": NewSSHCredentialModal,
     "share-button": components.ShareButton
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/ExperimentSummary.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/ExperimentSummary.vue
index 29b63d0..143e2e5 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/ExperimentSummary.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/ExperimentSummary.vue
@@ -16,7 +16,15 @@
                 <tr>
                   <th scope="row">Name</th>
                   <td>
-                    <span :title="experiment.experimentId">{{ experiment.experimentName }}</span>
+                    <div :title="experiment.experimentId">{{ experiment.experimentName }}</div>
+                    <small class="text-muted">
+                    ID: {{ experiment.experimentId }}
+                    (<clipboard-copy-link :text="experiment.experimentId" :link-classes="['text-reset']">
+                      copy
+                      <span slot="icon"></span>
+                      <span slot="tooltip">Copied ID!</span>
+                    </clipboard-copy-link>)
+                    </small>
                   </td>
                 </tr>
                 <tr>
@@ -142,6 +150,7 @@
 
 <script>
 import { models, services } from "django-airavata-api";
+import { components } from "django-airavata-common-ui";
 import DataProductViewer from "./DataProductViewer.vue";
 
 import moment from "moment";
@@ -165,6 +174,7 @@ export default {
   },
   components: {
     DataProductViewer,
+    "clipboard-copy-link": components.ClipboardCopyLink
   },
   computed: {
     creationTime: function() {
diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/commons/ClipboardCopyButton.vue b/django_airavata/static/common/js/components/ClipboardCopyButton.vue
similarity index 80%
rename from django_airavata/apps/admin/static/django_airavata_admin/src/components/commons/ClipboardCopyButton.vue
rename to django_airavata/static/common/js/components/ClipboardCopyButton.vue
index 08334dd..2022503 100644
--- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/commons/ClipboardCopyButton.vue
+++ b/django_airavata/static/common/js/components/ClipboardCopyButton.vue
@@ -1,8 +1,12 @@
 <template>
   <b-button ref="copyButton" :variant="variant" :disabled="disabled" :data-clipboard-text="text">
     <slot></slot>
-    <i class="far fa-clipboard"></i>
-    <b-tooltip :show="show" :disabled="!show" :target="() => $refs.copyButton">Copied!</b-tooltip>
+    <slot name="icon">
+      <i class="far fa-clipboard"></i>
+    </slot>
+    <b-tooltip :show="show" :disabled="!show" :target="() => $refs.copyButton">
+      <slot name="tooltip">Copied!</slot>
+     </b-tooltip>
   </b-button>
 </template>
 
@@ -14,22 +18,22 @@ export default {
   props: {
     text: {
       type: String,
-      required: true
     },
     variant: {
       type: String,
       default: "secondary"
     },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
   },
   data() {
     return {
       show: false
     };
   },
+  computed: {
+    disabled() {
+      return !this.text;
+    }
+  },
   mounted() {
     let clipboard = new ClipboardJS(this.$refs.copyButton);
     clipboard.on("success", this.onCopySuccess);
diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/commons/ClipboardCopyLink.vue b/django_airavata/static/common/js/components/ClipboardCopyLink.vue
similarity index 69%
rename from django_airavata/apps/admin/static/django_airavata_admin/src/components/commons/ClipboardCopyLink.vue
rename to django_airavata/static/common/js/components/ClipboardCopyLink.vue
index 2dbe8de..c91340e 100644
--- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/commons/ClipboardCopyLink.vue
+++ b/django_airavata/static/common/js/components/ClipboardCopyLink.vue
@@ -1,10 +1,16 @@
 <template>
   <div style="display: inline-block">
-    <b-link ref="copyLink" :data-clipboard-text="text">
-      Copy Key
-      <i class="far fa-clipboard"></i>
+    <b-link ref="copyLink" :data-clipboard-text="text" :class="linkClasses">
+      <slot>
+        Copy Key
+      </slot>
+      <slot name="icon">
+        <i class="far fa-clipboard"></i>
+      </slot>
     </b-link>
-    <b-tooltip :show="show" :disabled="!show" :target="() => $refs.copyLink">Copied!</b-tooltip>
+    <b-tooltip :show="show" :disabled="!show" :target="() => $refs.copyLink">
+      <slot name="tooltip">Copied!</slot>
+    </b-tooltip>
   </div>
 </template>
 
@@ -17,6 +23,9 @@ export default {
     text: {
       type: String,
       required: true
+    },
+    linkClasses: {
+      type: Array
     }
   },
   data() {
diff --git a/django_airavata/static/common/js/index.js b/django_airavata/static/common/js/index.js
index a9479bf..f149fb0 100644
--- a/django_airavata/static/common/js/index.js
+++ b/django_airavata/static/common/js/index.js
@@ -1,5 +1,7 @@
 import ApplicationCard from "./components/ApplicationCard.vue";
 import AutocompleteTextInput from "./components/AutocompleteTextInput.vue";
+import ClipboardCopyButton from "./components/ClipboardCopyButton.vue";
+import ClipboardCopyLink from "./components/ClipboardCopyLink.vue";
 import ConfirmationDialog from "./components/ConfirmationDialog.vue";
 import DeleteButton from "./components/DeleteButton.vue";
 import DeleteLink from "./components/DeleteLink.vue";
@@ -26,6 +28,8 @@ const components = {
   Pager,
   ApplicationCard,
   AutocompleteTextInput,
+  ClipboardCopyButton,
+  ClipboardCopyLink,
   ConfirmationDialog,
   DeleteButton,
   DeleteLink,
diff --git a/django_airavata/static/common/package.json b/django_airavata/static/common/package.json
index 47717fd..64a8174 100644
--- a/django_airavata/static/common/package.json
+++ b/django_airavata/static/common/package.json
@@ -16,6 +16,7 @@
     "@fortawesome/fontawesome-free": "^5.6.3",
     "bootstrap": "^4.2.1",
     "bootstrap-vue": "^2.0.0-rc.11",
+    "clipboard": "^2.0.4",
     "django-airavata-api": "file:../../apps/api",
     "jquery": "^3.3.1",
     "popper.js": "^1.14.6",
diff --git a/docs/dev/developing_frontend.md b/docs/dev/developing_frontend.md
index e4ad389..54f7a4e 100644
--- a/docs/dev/developing_frontend.md
+++ b/docs/dev/developing_frontend.md
@@ -18,6 +18,14 @@ npm run serve
 Then in your browser go to
 [http://localhost:8000/workspace/dashboard](http://localhost:8000/workspace/dashboard).
 
+Note: after stopping the dev server the portal will still keep trying to load
+the app's JS and CSS from the dev server URLs, which it will fail to do. To go
+back to a pre dev server state run:
+
+```
+npm run build
+```
+
 # Development
 
 ## Adding a dependency