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 2018/09/21 17:51:53 UTC

[airavata-django-portal] branch master updated (961826a -> b176d64)

This is an automated email from the ASF dual-hosted git repository.

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


    from 961826a  Updating package-lock.json files
     new e4978b0  AIRAVATA-2876 Rename deployment_id to deploymentId
     new 1539cd4  AIRAVATA-2876 Navigate to route with save error
     new b176d64  AIRAVATA-2876 Display success message when application saved

The 3 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


Summary of changes:
 .../applications/ApplicationDeploymentEditor.vue   |   2 +-
 .../applications/ApplicationDeploymentsList.vue    |   4 +-
 .../applications/ApplicationEditorContainer.vue    | 112 +++++++++++++---
 .../static/django_airavata_admin/src/router.js     | 142 ++++++++++++---------
 .../common/js/components/NotificationsDisplay.vue  |  88 ++++++-------
 .../common/js/notifications/NotificationList.js    |  13 +-
 6 files changed, 228 insertions(+), 133 deletions(-)


[airavata-django-portal] 02/03: AIRAVATA-2876 Navigate to route with save error

Posted by ma...@apache.org.
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 1539cd49650f0f4863ae3db730bfd1c4e90b0f63
Author: Marcus Christie <ma...@iu.edu>
AuthorDate: Fri Sep 21 12:30:17 2018 -0400

    AIRAVATA-2876 Navigate to route with save error
---
 .../applications/ApplicationEditorContainer.vue    | 83 +++++++++++++++++++---
 .../static/django_airavata_admin/src/router.js     |  4 +-
 2 files changed, 74 insertions(+), 13 deletions(-)

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
index 288e125..fd96abd 100644
--- 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
@@ -30,7 +30,7 @@
     </div>
     <div class="row">
       <div class="col">
-        <b-button variant="primary" @click="saveAll" :disabled="readonly">
+        <b-button variant="primary" @click="saveAll" :disabled="readonly || !isDirty">
           Save
         </b-button>
         <delete-button v-if="id" :disabled="readonly" @delete="deleteApplication">
@@ -452,27 +452,58 @@ export default {
       return Promise.resolve(this.currentDeployment);
     },
     saveAll() {
-      // TODO: catch errors and navigate to the route showing the errors
       const moduleSave = this.appModuleIsDirty
-        ? this.saveApplicationModule(this.appModule)
+        ? this.saveApplicationModule(this.appModule).catch(error => {
+            // Navigate to the route that has the error
+            this.$router.push({
+              name: this.id ? "application_module" : "new_application_module"
+            });
+            // Cancel the chain of promises
+            return Promise.reject(error);
+          })
         : Promise.resolve(this.appModule);
       const interfaceSave = moduleSave.then(
-        this.appInterfaceIsDirty
-          ? this.saveApplicationInterface(this.appInterface)
-          : Promise.resolve(this.appInterface)
+        appModule =>
+          this.appInterfaceIsDirty
+            ? this.saveApplicationInterface(this.appInterface).catch(error => {
+                // Navigate to the route that has the error
+                this.$router.push({
+                  name: "application_interface"
+                });
+                // Cancel the chain of promises
+                return Promise.reject(error);
+              })
+            : Promise.resolve(this.appInterface)
       );
       const deploymentsSave = interfaceSave
-        .then(() => {
+        .then(appInterface => {
           return Promise.all(
             this.dirtyAppDeploymentComputeHostIds.map(computeHostId => {
               const deployment = this.appDeployments.find(
                 dep => dep.computeHostId === computeHostId
               );
-              return this.saveApplicationDeployment(deployment);
+              return this.saveApplicationDeployment(deployment).catch(error => {
+                // Navigate to the route that has the error
+                if (deployment.appDeploymentId) {
+                  this.$router.push({
+                    name: "application_deployment",
+                    params: {
+                      id: this.id,
+                      deploymentId: deployment.appDeploymentId
+                    }
+                  });
+                } else {
+                  this.$router.push({
+                    name: "new_application_deployment",
+                    params: { id: this.id, hostId: deployment.computeHostId }
+                  });
+                }
+                return Promise.reject(error);
+              });
             })
           );
         })
-        .then(() => {
+        .then(appDeployments => {
           return Promise.all(
             this.dirtyAppDeploymentSharedEntityComputeHostIds.map(
               computeHostId => {
@@ -482,12 +513,42 @@ export default {
                 const deployment = this.appDeployments.find(
                   dep => dep.computeHostId === computeHostId
                 );
-                return this.saveSharedEntity(sharedEntity, deployment);
+                return this.saveSharedEntity(sharedEntity, deployment).catch(
+                  error => {
+                    // Navigate to the route that has the error
+                    if (deployment.appDeploymentId) {
+                      this.$router.push({
+                        name: "application_deployment",
+                        params: {
+                          id: this.id,
+                          deploymentId: deployment.appDeploymentId
+                        }
+                      });
+                    } else {
+                      this.$router.push({
+                        name: "new_application_deployment",
+                        params: {
+                          id: this.id,
+                          hostId: deployment.computeHostId
+                        }
+                      });
+                    }
+                    return Promise.reject(error);
+                  }
+                );
               }
             )
           );
         })
-        .then(() => {
+        .then(sharedEntities => {
+          if (!this.id && this.appModule.appModuleId) {
+            // if we just create a new module, navigate to app module route now
+            // that we have an id
+            this.$router.push({
+              name: "application_module",
+              params: { id: this.appModule.appModuleId }
+            });
+          }
           // Reinitialize deployment editing so that deployment being edited is
           // the saved instance
           this.initializeDeploymentEditing();
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 10cacd8..b695de7 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
@@ -43,8 +43,8 @@ const routes = [
     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
+      // Only the module route for a new application, save it and then replace
+      // the URL with the module id
       {
         path: "",
         components: {


[airavata-django-portal] 01/03: AIRAVATA-2876 Rename deployment_id to deploymentId

Posted by ma...@apache.org.
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 e4978b0c1081edcff759951bbc99b7dad22991a9
Author: Marcus Christie <ma...@iu.edu>
AuthorDate: Fri Sep 21 11:46:08 2018 -0400

    AIRAVATA-2876 Rename deployment_id to deploymentId
---
 .../applications/ApplicationDeploymentEditor.vue   |   2 +-
 .../applications/ApplicationDeploymentsList.vue    |   4 +-
 .../applications/ApplicationEditorContainer.vue    |   7 +-
 .../static/django_airavata_admin/src/router.js     | 138 ++++++++++++---------
 4 files changed, 87 insertions(+), 64 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
index c898a1d..700d176 100644
--- 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
@@ -63,7 +63,7 @@ export default {
     value: {
       type: models.ApplicationDescriptionDefinition
     },
-    deployment_id: {
+    deploymentId: {
       type: String,
       required: true
     },
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
index ff33354..8944b26 100644
--- 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
@@ -5,11 +5,11 @@
 
         <b-table striped hover :fields="fields" :items="slotProps.items" sort-by="computeHostId">
           <template slot="action" slot-scope="data">
-            <router-link v-if="!data.item.userHasWriteAccess" :to="{name: 'application_deployment', params: {id: id, deployment_id: data.item.appDeploymentId, readonly: true}}">
+            <router-link v-if="!data.item.userHasWriteAccess" :to="{name: 'application_deployment', params: {id: id, deploymentId: data.item.appDeploymentId, readonly: true}}">
               View
               <i class="fa fa-eye" aria-hidden="true"></i>
             </router-link>
-            <router-link v-if="data.item.userHasWriteAccess && data.item.appDeploymentId" :to="{name: 'application_deployment', params: {id: id, deployment_id: data.item.appDeploymentId, readonly: false}}">
+            <router-link v-if="data.item.userHasWriteAccess && data.item.appDeploymentId" :to="{name: 'application_deployment', params: {id: id, deploymentId: data.item.appDeploymentId, readonly: false}}">
               Edit
               <i class="fa fa-edit" aria-hidden="true"></i>
             </router-link>
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
index b83bc1c..288e125 100644
--- 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
@@ -52,8 +52,7 @@ export default {
   name: "application-editor-container",
   props: {
     id: String,
-    // TODO: camelCase this
-    deployment_id: String,
+    deploymentId: String,
     hostId: String
   },
   components: {
@@ -116,8 +115,8 @@ export default {
       }
     },
     initializeDeploymentEditing() {
-      if (this.deployment_id) {
-        this.startEditingExistingDeployment(this.deployment_id);
+      if (this.deploymentId) {
+        this.startEditingExistingDeployment(this.deploymentId);
       } else if (this.hostId) {
         this.startEditingNewDeployment(this.hostId);
       }
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 43583ee..10cacd8 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,127 +1,151 @@
-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'
-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'
-
+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";
+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";
 
 const routes = [
   {
-    path: '/new/application', component: NewApplication, name: 'newapp',
+    path: "/new/application",
+    component: NewApplication,
+    name: "newapp",
     children: [
       {
-        path: 'details',
+        path: "details",
         component: ApplicationDetails,
-        name: 'details',
-
-      }, {
-        path: 'interface',
+        name: "details"
+      },
+      {
+        path: "interface",
         component: ApplicationInterface,
-        name: 'interface'
-      }, {
-        path: 'deployments',
+        name: "interface"
+      },
+      {
+        path: "deployments",
         component: ApplicationDeployments,
-        name: 'deployments'
+        name: "deployments"
       }
     ]
   },
   {
-    path: '/applications/new', component: ApplicationEditorContainer, name: 'new_application',
+    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: {
+        path: "",
+        components: {
           module: ApplicationModuleEditor
         },
-        name: 'new_application_module'
-      },
+        name: "new_application_module"
+      }
     ]
   },
   {
-    path: '/applications/:id', component: ApplicationEditorContainer, name: 'application',
+    path: "/applications/:id",
+    component: ApplicationEditorContainer,
+    name: "application",
     props: true,
     children: [
       {
-        path: '', components: {
+        path: "",
+        components: {
           module: ApplicationModuleEditor
         },
-        name: 'application_module'
+        name: "application_module"
       },
       {
-        path: 'interface', components: {
+        path: "interface",
+        components: {
           interface: ApplicationInterfaceEditor
         },
-        name: 'application_interface'
+        name: "application_interface"
       },
       {
-        path: 'deployments', components: {
+        path: "deployments",
+        components: {
           deployments: ApplicationDeploymentsList
         },
-        name: 'application_deployments',
+        name: "application_deployments",
         props: {
           deployments: true
         }
       },
       {
-        path: 'deployments/new/:hostId', components: {
+        path: "deployments/new/:hostId",
+        components: {
           deployment: ApplicationDeploymentEditor
         },
-        name: 'new_application_deployment',
+        name: "new_application_deployment"
       },
       {
-        path: 'deployments/:deployment_id', components: {
+        path: "deployments/:deploymentId",
+        components: {
           deployment: ApplicationDeploymentEditor
         },
-        name: 'application_deployment',
+        name: "application_deployment",
         props: {
           deployment: true
         }
-      },
+      }
     ]
   },
-  { path: '/applications', component: ApplicationsDashboard },
-  { path: '/experiments', component: ExperimentsDashboard, name: 'experiments_dashboard' },
+  { path: "/applications", component: ApplicationsDashboard },
   {
-    path: '/group-resource-profiles/new', component: GroupComputeResourcePreference, name: 'new_group_resource_preference',
+    path: "/experiments",
+    component: ExperimentsDashboard,
+    name: "experiments_dashboard"
+  },
+  {
+    path: "/group-resource-profiles/new",
+    component: GroupComputeResourcePreference,
+    name: "new_group_resource_preference",
     props: true
   },
   {
-    path: '/group-resource-profiles/:id', component: GroupComputeResourcePreference, name: 'group_resource_preference',
+    path: "/group-resource-profiles/:id",
+    component: GroupComputeResourcePreference,
+    name: "group_resource_preference",
     props: true
   },
   {
-    path: '/group-resource-profiles/new/compute-preferences/:host_id', component: ComputePreference, name: 'compute_preference_for_new_group_resource_profile',
+    path: "/group-resource-profiles/new/compute-preferences/:host_id",
+    component: ComputePreference,
+    name: "compute_preference_for_new_group_resource_profile",
     props: true
   },
   {
-    path: '/group-resource-profiles/:id/compute-preferences/:host_id', component: ComputePreference, name: 'compute_preference',
+    path: "/group-resource-profiles/:id/compute-preferences/:host_id",
+    component: ComputePreference,
+    name: "compute_preference",
     props: true
   },
   {
-    path: '/group-resource-profiles',
+    path: "/group-resource-profiles",
     component: ComputeResourcePreferenceDashboard,
-    name: 'group_resource_preference_dashboard',
+    name: "group_resource_preference_dashboard"
   },
   {
-    path: '/credential/store',
+    path: "/credential/store",
     component: CredentialStoreDashboard,
-    name: 'credential_store'
-  },
+    name: "credential_store"
+  }
 ];
 export default new VueRouter({
-  mode: 'history',
-  base: '/admin/',
-  routes: routes,
+  mode: "history",
+  base: "/admin/",
+  routes: routes
 });


[airavata-django-portal] 03/03: AIRAVATA-2876 Display success message when application saved

Posted by ma...@apache.org.
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 b176d64fae8e69a95a1ca65d2ac19d6709736ea6
Author: Marcus Christie <ma...@iu.edu>
AuthorDate: Fri Sep 21 13:49:48 2018 -0400

    AIRAVATA-2876 Display success message when application saved
---
 .../applications/ApplicationEditorContainer.vue    | 22 +++++-
 .../common/js/components/NotificationsDisplay.vue  | 88 +++++++++++-----------
 .../common/js/notifications/NotificationList.js    | 13 ++--
 3 files changed, 67 insertions(+), 56 deletions(-)

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
index fd96abd..583ea8d 100644
--- 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
@@ -429,7 +429,6 @@ export default {
         );
       }
       return Promise.resolve(this.currentDeployment);
-      this.setCurrentApplicationDeploymentSharedEntity(this.currentDeployment);
     },
     setCurrentDeploymentFromComputeHostId(computeHostId) {
       this.currentDeployment = this.appDeployments.find(
@@ -541,6 +540,13 @@ export default {
           );
         })
         .then(sharedEntities => {
+          notifications.NotificationList.add(
+            new notifications.Notification({
+              type: "SUCCESS",
+              message: "Application saved successfully",
+              duration: 5
+            })
+          );
           if (!this.id && this.appModule.appModuleId) {
             // if we just create a new module, navigate to app module route now
             // that we have an id
@@ -549,9 +555,17 @@ export default {
               params: { id: this.appModule.appModuleId }
             });
           }
-          // Reinitialize deployment editing so that deployment being edited is
-          // the saved instance
-          this.initializeDeploymentEditing();
+          if (this.hostId) {
+            // If creating a new deployment, navigate to the deployments list
+            this.$router.push({
+              name: "application_deployments",
+              params: { id: this.appModule.appModuleId }
+            });
+          } else {
+            // Reinitialize deployment editing so that deployment being edited is
+            // the saved instance
+            this.initializeDeploymentEditing();
+          }
         });
     },
     cancel() {
diff --git a/django_airavata/static/common/js/components/NotificationsDisplay.vue b/django_airavata/static/common/js/components/NotificationsDisplay.vue
index d61a249..d96e4a2 100644
--- a/django_airavata/static/common/js/components/NotificationsDisplay.vue
+++ b/django_airavata/static/common/js/components/NotificationsDisplay.vue
@@ -1,61 +1,57 @@
 <template>
-    <div id="notifications-display">
-        <transition-group name="fade" tag="div">
-            <b-alert v-for="unhandledError in unhandledErrors"
-                    variant="danger" :key="unhandledError.id"
-                    show dismissible @dismissed="dismissUnhandledError(unhandledError)">
-                {{ unhandledError.message }}
-            </b-alert>
-            <b-alert v-for="notification in notifications"
-                    :variant="variant(notification)" :key="notification.id"
-                    show dismissible @dismissed="dismissNotification(notification)">
-                {{ notification.message }}
-            </b-alert>
-        </transition-group>
-    </div>
+  <div id="notifications-display">
+    <transition-group name="fade" tag="div">
+      <b-alert v-for="unhandledError in unhandledErrors" variant="danger" :key="unhandledError.id" show dismissible @dismissed="dismissUnhandledError(unhandledError)">
+        {{ unhandledError.message }}
+      </b-alert>
+      <b-alert v-for="notification in notifications" :variant="variant(notification)" :key="notification.id" :show="notification.duration > 0 ? notification.duration : true"
+        dismissible @dismissed="dismissNotification(notification)">
+        {{ notification.message }}
+      </b-alert>
+    </transition-group>
+  </div>
 </template>
 
 <script>
-
-import { errors } from 'django-airavata-api'
-import Notification from '../notifications/Notification'
-import NotificationList from '../notifications/NotificationList'
+import { errors } from "django-airavata-api";
+import Notification from "../notifications/Notification";
+import NotificationList from "../notifications/NotificationList";
 
 export default {
-    name: "notifications-display",
-    data () {
-        return {
-            notifications: NotificationList.list,
-            unhandledErrors: errors.UnhandledErrorDisplayList.list,
-        }
+  name: "notifications-display",
+  data() {
+    return {
+      notifications: NotificationList.list,
+      unhandledErrors: errors.UnhandledErrorDisplayList.list
+    };
+  },
+  methods: {
+    dismissNotification: function(notification) {
+      NotificationList.remove(notification);
     },
-    methods: {
-        dismissNotification: function(notification) {
-            NotificationList.remove(notification);
-        },
-        dismissUnhandledError: function(unhandledError) {
-            errors.UnhandledErrorDisplayList.remove(unhandledError);
-        },
-        variant: function(notification) {
-            if (notification.type === "SUCCESS") {
-                return "success";
-            } else if (notification.type === "ERROR") {
-                return "danger";
-            } else {
-                return "secondary";
-            }
-        }
+    dismissUnhandledError: function(unhandledError) {
+      errors.UnhandledErrorDisplayList.remove(unhandledError);
     },
-}
+    variant: function(notification) {
+      if (notification.type === "SUCCESS") {
+        return "success";
+      } else if (notification.type === "ERROR") {
+        return "danger";
+      } else {
+        return "secondary";
+      }
+    }
+  }
+};
 </script>
 
 <style>
 #notifications-display {
-    position: fixed;
-    top: 75px;
-    left: 20vw;
-    width: 60vw;
-    z-index: 10000;
+  position: fixed;
+  top: 75px;
+  left: 20vw;
+  width: 60vw;
+  z-index: 10000;
 }
 </style>
 
diff --git a/django_airavata/static/common/js/notifications/NotificationList.js b/django_airavata/static/common/js/notifications/NotificationList.js
index de8b6f8..dcb9448 100644
--- a/django_airavata/static/common/js/notifications/NotificationList.js
+++ b/django_airavata/static/common/js/notifications/NotificationList.js
@@ -1,7 +1,6 @@
-import Notification from './Notification'
+import Notification from "./Notification";
 
 class NotificationList {
-
   constructor() {
     this.notifications = [];
   }
@@ -12,10 +11,12 @@ class NotificationList {
 
   // Convenience method for adding an error
   addError(error) {
-    this.notifications.push(new Notification({
-      type: "ERROR",
-      message: error.message
-    }))
+    this.notifications.push(
+      new Notification({
+        type: "ERROR",
+        message: error.message
+      })
+    );
   }
 
   remove(notification) {