agendash 2.0.0 → 3.1.0

package/public/app/js/joblist.js

@@ -1,72 +1,79 @@
-const jobList = Vue.component('job-list', {
+const jobList = Vue.component("job-list", {
   data: () => ({
     multijobs: [],
-    currentSort:'name',
-    currentSortDir:'asc',
+    currentSort: "name",
+    currentSortDir: "asc",
   }),
-  props: ['jobs','pagesize','pagenumber','sendClean','loading'],
-  computed:{
-    sortedJobs:function() {
-      return this.jobs.sort((a,b) => {
-        let displayA, displayB
-        if(this.currentSort === "name") {
-          displayA = a.job[this.currentSort] ? a.job[this.currentSort].toLowerCase() : ''
-          displayB = a.job[this.currentSort] ? b.job[this.currentSort].toLowerCase() : ''
-        }
-        else {
-          displayA = moment(a.job[this.currentSort])
-          displayB = moment(b.job[this.currentSort])
+  props: ["jobs", "pagesize", "pagenumber", "sendClean", "loading"],
+  computed: {
+    sortedJobs: function () {
+      return this.jobs.sort((a, b) => {
+        let displayA, displayB;
+        if (this.currentSort === "name") {
+          displayA = a.job[this.currentSort]
+            ? a.job[this.currentSort].toLowerCase()
+            : "";
+          displayB = a.job[this.currentSort]
+            ? b.job[this.currentSort].toLowerCase()
+            : "";
+        } else {
+          displayA = moment(a.job[this.currentSort]);
+          displayB = moment(b.job[this.currentSort]);
         }
         let modifier = 1;
-        if(this.currentSortDir === 'desc') modifier = -1;
-        if(displayA < displayB) return -1 * modifier;
-        if(displayA > displayB) return 1 * modifier;
+        if (this.currentSortDir === "desc") modifier = -1;
+        if (displayA < displayB) return -1 * modifier;
+        if (displayA > displayB) return 1 * modifier;
         return 0;
       });
-    }
+    },
   },
   watch: {
     jobs() {
       // reset multijobs when jobs have changed
       this.multijobs = [];
-    }
+    },
   },
   methods: {
     sort(s) {
       //if s == current sort, reverse
-      if(s === this.currentSort) {
-        this.currentSortDir = this.currentSortDir === 'asc' ? 'desc' : 'asc';
+      if (s === this.currentSort) {
+        this.currentSortDir = this.currentSortDir === "asc" ? "desc" : "asc";
       }
       this.currentSort = s;
     },
-    sendQueued(){
-      this.$emit('confirm-multi-requeue', this.multijobs)
+    sendQueued() {
+      this.$emit("confirm-multi-requeue", this.multijobs);
       // this.multijobs = []
     },
-    sendDelete(){
-      this.$emit('confirm-multi-delete', this.multijobs)
+    sendDelete() {
+      this.$emit("confirm-multi-delete", this.multijobs);
       // this.multijobs = []
     },
     cleanMulti() {
-      return console.log("received Clean Multi")
+      return console.log("received Clean Multi");
+    },
+    formatTitle(date) {
+      if (!date) return;
+      return moment(date).format();
     },
     formatDate(date) {
+      if (!date) return;
       return moment(date).fromNow();
-      // return new Date(date).toLocaleDateString('en-US', { day: 'numeric', month: 'numeric', year: '2-digit', hour: "numeric", minute: "numeric", second: "numeric" })
     },
-    checkAllCheckboxes(){
-      const checkboxes = document.querySelectorAll('.checkbox-triggerable');
+    checkAllCheckboxes() {
+      const checkboxes = document.querySelectorAll(".checkbox-triggerable");
       for (const checkbox of checkboxes) {
         checkbox.click();
       }
     },
     toggleList(job) {
-      if(this.multijobs.includes(job.job._id)) {
+      if (this.multijobs.includes(job.job._id)) {
         this.multijobs.splice(this.multijobs.indexOf(job.job._id), 1);
       } else {
         this.multijobs.push(job.job._id);
       }
-    }
+    },
   },
   template: `
   <div v-on:sendClean="cleanMulti">
@@ -136,10 +143,10 @@ const jobList = Vue.component('job-list', {
                     <i v-if="job.running" class="pill-own bg-warning pill-withoutIcon"><span>Running</span></i>
                   </td>
                   <td class="job-name"  @click="toggleList(job)"> {{job.job.name}} </td>
-                  <td class="job-lastRunAt"  @click="toggleList(job)"> {{ formatDate(job.job.lastRunAt) }} </td>
-                  <td class="job-nextRunAt"  @click="toggleList(job)"> {{ formatDate(job.job.nextRunAt) }} </td>
-                  <td class="job-finishedAt"  @click="toggleList(job)"> {{ formatDate(job.job.lastFinishedAt) }} </td>
-                  <td class="job-lockedAt"  @click="toggleList(job)"> {{ formatDate(job.job.lockedAt) }} </td>
+                  <td class="job-lastRunAt" :title="formatTitle(job.job.lastRunAt)" @click="toggleList(job)"> {{ formatDate(job.job.lastRunAt) }} </td>
+                  <td class="job-nextRunAt" :title="formatTitle(job.job.nextRunAt)" @click="toggleList(job)"> {{ formatDate(job.job.nextRunAt) }} </td>
+                  <td class="job-finishedAt" :title="formatTitle(job.job.lastFinishedAt)" @click="toggleList(job)"> {{ formatDate(job.job.lastFinishedAt) }} </td>
+                  <td class="job-lockedAt" :title="formatTitle(job.job.lockedAt)" @click="toggleList(job)"> {{ formatDate(job.job.lockedAt) }} </td>
                   <td class="job-actions">
                     <i class="material-icons md-dark md-custom action-btn viewData text-primary" data-toggle="modal" data-target="#modalRequeueSure" @click="$emit('confirm-requeue', job)" data-placement="left" title="Requeue">update</i>
                     <i class="material-icons md-dark md-custom action-btn viewData text-success" data-toggle="modal" data-target="#modalData" @click="$emit('show-job-detail', job)" data-placement="top" title="Job Data">visibility</i>
@@ -181,13 +188,13 @@ const jobList = Vue.component('job-list', {
                       <div class="card-responsive-status-title">
                         Last run started
                       </div>
-                      <div class="mb-3">
+                      <div class="mb-3" :title="formatTitle(job.job.lastRunAt)">
                         {{ formatDate(job.job.lastRunAt) }}
                       </div>
                       <div class="card-responsive-status-title">
                         Last finished
                       </div>
-                      <div>
+                      <div :title="formatTitle(job.job.lastFinishedAt)">
                         {{ formatDate(job.job.lastFinishedAt) }}
                       </div>
                     </div>
@@ -195,14 +202,14 @@ const jobList = Vue.component('job-list', {
                       <div class="card-responsive-status-title">
                         Next run starts
                       </div>
-                      <div class="mb-3">
+                      <div class="mb-3" :title="formatTitle(job.job.nextRunAt)">
                         {{ formatDate(job.job.nextRunAt) }}
                       </div>
                       <div class="card-responsive-status-title">
                         Locked
                       </div>
-                      <div>
-                        {{ job.job.lockedAt ? formatDate(job.job.lockedAt) : "-" }}
+                      <div :title="formatTitle(job.job.lockedAt)">
+                        {{ formatDate(job.job.lockedAt) || "-" }}
                       </div>
                     </div>
                   </div>
@@ -228,5 +235,5 @@ const jobList = Vue.component('job-list', {
             </div>
         </div>
 </div>
-  `
-})
+  `,
+});

package/public/app/js/main.js

@@ -1,4 +1,4 @@
-const app = Vue.component('app', {
+const app = Vue.component("app", {
   data: () => ({
     jobs: [],
     overview: [],
@@ -16,14 +16,14 @@ const app = Vue.component('app', {
     pagesize: 15,
     sendClean: false,
     createc: false,
-    property: '',
-    search: '',
-    object: '',
+    property: "",
+    search: "",
+    object: "",
     newLimit: null,
     skip: 0,
-    name: '',
-    state: '',
-    nameprop: '',
+    name: "",
+    state: "",
+    nameprop: "",
     loading: false,
     hideSlide: true,
   }),
@@ -31,123 +31,160 @@ const app = Vue.component('app', {
     openNav() {
       document.getElementById("mySidebar").style.width = "100%";
       document.getElementById("main").style.marginLeft = "100%";
-      this.hideSlide = false
+      this.hideSlide = false;
     },
     closeNav() {
       document.getElementById("mySidebar").style.width = "0";
       document.getElementById("main").style.marginLeft = "0";
-      this.hideSlide = true
+      this.hideSlide = true;
     },
-    showJobDetail(data){
+    showJobDetail(data) {
       this.jobData = data;
       this.showDetail = true;
     },
-    readyClean(){
+    readyClean() {
       this.sendClean = true;
     },
-    confirmDelete(data){
+    confirmDelete(data) {
       this.jobData = data;
       this.showConfirm = true;
     },
-    confirmDeleteMulti(data){
+    confirmDeleteMulti(data) {
       this.jobData = data;
       this.showConfirmMulti = true;
     },
-    confirmRequeue(data){
+    confirmRequeue(data) {
       this.jobData = data;
       this.showConfirmRequeue = true;
     },
-    confirmRequeueMulti(data){
+    confirmRequeueMulti(data) {
       this.jobData = data;
       this.showConfirmRequeueMulti = true;
     },
-    newJob(data){
+    newJob(data) {
       this.jobData = data;
       this.showNewJob = true;
     },
-    searchForm(name, search, property, limit, skip, refresh, state, object){
-        this.pagesize = limit ? limit : this.pagesize,
-        this.name = name,
-        this.search = search,
-        this.property = property,
-
-        this.skip = skip,
-        this.refresh = refresh,
-        this.state = state,
-        this.object = object ? object : this.object,
-
-        this.fetchData(this.name, this.search, this.property, this.pagesize, this.skip, this.refresh, this.state, this.object)
+    searchForm(name, search, property, limit, skip, refresh, state, object) {
+      (this.pagesize = limit ? limit : this.pagesize),
+        (this.name = name),
+        (this.search = search),
+        (this.property = property),
+        (this.skip = skip),
+        (this.refresh = refresh),
+        (this.state = state),
+        (this.object = object ? object : this.object),
+        this.fetchData(
+          this.name,
+          this.search,
+          this.property,
+          this.pagesize,
+          this.skip,
+          this.refresh,
+          this.state,
+          this.object
+        );
     },
     refreshData() {
-      this.fetchData(this.name, this.search, this.property, this.pagesize, this.skip, this.refresh, this.state, this.object)
+      this.fetchData(
+        this.name,
+        this.search,
+        this.property,
+        this.pagesize,
+        this.skip,
+        this.refresh,
+        this.state,
+        this.object
+      );
     },
-    pagechange(action){
-
-      if(action === 'next'){
-        this.pagenumber++
+    pagechange(action) {
+      if (action === "next") {
+        this.pagenumber++;
       }
-      if(action === 'prev'){
-        this.pagenumber--
+      if (action === "prev") {
+        this.pagenumber--;
       }
-      this.skip = (this.pagenumber-1) * this.pagesize
-      this.fetchData(this.name, this.search, this.property, this.pagesize, this.skip, this.refresh,this.state, this.object)
+      this.skip = (this.pagenumber - 1) * this.pagesize;
+      this.fetchData(
+        this.name,
+        this.search,
+        this.property,
+        this.pagesize,
+        this.skip,
+        this.refresh,
+        this.state,
+        this.object
+      );
     },
-    fetchData(name = '', search = '', property = '', limit = 15, skip = 0, refresh = 60, state = '', object){
+    fetchData(
+      name = "",
+      search = "",
+      property = "",
+      limit = 15,
+      skip = 0,
+      refresh = 60,
+      state = "",
+      object
+    ) {
       this.loading = true;
       this.pagesize = this.pagesize === 0 ? parseInt(limit) : this.pagesize;
       this.refresh = parseFloat(refresh);
-      const url = `api?limit=${limit}&job=${name}&skip=${skip}&property=${property}${object ? '&isObjectId=true' : ""}${state ? `&state=${state}`: ''}&q=${search}`;
-      return axios.get(url)
-        .then(result => result.data)
+      const url = `api?limit=${limit}&job=${name}&skip=${skip}&property=${property}${
+        object ? "&isObjectId=true" : ""
+      }${state ? `&state=${state}` : ""}&q=${search}`;
+      return axios
+        .get(url)
+        .then((result) => result.data)
         .then(
-          data => {
-          this.jobs = data.jobs;
-          this.search = search;
-          this.property = property;
-          this.object = object;
-          this.overview = data.overview;
-          this.loading = false;
-        },() => {
-          this.loading = false;
-          this.jobs = [];
-        }
+          (data) => {
+            this.jobs = data.jobs;
+            this.search = search;
+            this.property = property;
+            this.object = object;
+            this.overview = data.overview;
+            this.loading = false;
+          },
+          () => {
+            this.loading = false;
+            this.jobs = [];
+          }
         )
-        .catch(console.log)
+        .catch(console.log);
     },
 
-    popupmessage(data){
-      if(data === 'delete'){
-        this.deletec = true
+    popupmessage(data) {
+      if (data === "delete") {
+        this.deletec = true;
         setTimeout(() => {
-          this.deletec = false
+          this.deletec = false;
         }, 2000);
       }
-      if(data === 'multidelete'){
-        this.deletec = true
+      if (data === "multidelete") {
+        this.deletec = true;
         setTimeout(() => {
-          this.deletec = false
+          this.deletec = false;
         }, 2000);
       }
-      if(data === 'requeue'){
-        this.requeuec = true
+      if (data === "requeue") {
+        this.requeuec = true;
         setTimeout(() => {
-          this.requeuec = false
+          this.requeuec = false;
         }, 2000);
       }
-      if(data === 'multirequeue'){
-        this.requeuec = true
+      if (data === "multirequeue") {
+        this.requeuec = true;
         setTimeout(() => {
-          this.requeuec = false
+          this.requeuec = false;
         }, 2000);
       }
-      if(data === 'create'){
-        this.createc = true
+      if (data === "create") {
+        this.createc = true;
         setTimeout(() => {
-          this.createc = false
+          this.createc = false;
         }, 2000);
       }
-    }
     },
+  },
   created() {
     return this.fetchData();
   },
@@ -234,5 +271,5 @@ const app = Vue.component('app', {
       <popup-message :deletec="deletec" :requeuec="requeuec" :createc="createc"></popup-message>
       <new-job v-if="showNewJob" v-on:popup-message="popupmessage('create')" v-on:refresh-data="fetchData"></new-job>
   </div>
-  `
-})
+  `,
+});

package/public/app/js/newJob.js

@@ -1,35 +1,48 @@
-const newJob = Vue.component('new-job', {
-  data: () =>({
-    jobName: '',
-    jobSchedule: '',
-    jobRepeatEvery: '',
+const newJob = Vue.component("new-job", {
+  data: () => ({
+    jobDataParseError: "",
+    jobName: "",
+    jobSchedule: "",
+    jobRepeatEvery: "",
     jobData: `{ "name": "Your medatada goes here..." }`,
   }),
-  props: ['job'],
+  props: ["job"],
   methods: {
-    clear(){
-      this.jobName = '',
-      this.jobSchedule = '',
-      this.jobRepeatEvery = '',
-      this.jobData = ''
+    clear() {
+      (this.jobDataParseError = ""),
+        (this.jobName = ""),
+        (this.jobSchedule = ""),
+        (this.jobRepeatEvery = ""),
+        (this.jobData = `{ "name": "Your medatada goes here..." }`);
     },
-    create(){
+    create() {
       const url = `api/jobs/create`;
+
+      let jobData = "";
+      try {
+        jobData = JSON.parse(this.jobData);
+      } catch (err) {
+        this.jobDataParseError = err.message;
+        return;
+      }
+
       let body = {
         jobName: this.jobName,
         jobSchedule: this.jobSchedule,
         jobRepeatEvery: this.jobRepeatEvery,
-        jobData: JSON.parse(this.jobData),
+        jobData: jobData,
       };
-      return axios.post(url, body)
-        .then(result => result.data)
-        .then(data => {
-          this.$emit('popup-message');
-          this.$emit('refresh-data');
+      return axios
+        .post(url, body)
+        .then((result) => result.data)
+        .then((data) => {
+          this.$emit("popup-message");
+          this.$emit("refresh-data");
+          this.$refs.Close.click();
           this.clear();
         })
-        .catch(console.log)
-    }
+        .catch(console.log);
+    },
   },
   template: `
   <div class="modal fade" id="modalNewJob" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
@@ -61,15 +74,16 @@ const newJob = Vue.component('new-job', {
               <div class="form-group">
                 <label for="jobData">Job Metadata</label>
                 <prism-editor class="json-editor" :lineNumbers="true" v-model="jobData" language="json"></prism-editor>
+                <small class="form-text text-muted">{{jobDataParseError}}</small>
               </div>
             </form>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-info" data-dismiss="modal" @click="create()">Create Job</button>
+          <button type="button" class="btn btn-info" @click="create()">Create Job</button>
           <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
         </div>
       </div>
     </div>
   </div>
-  `
-})
+  `,
+});

package/public/app/js/sidebar.js

@@ -1,41 +1,66 @@
-const sidebar = Vue.component('sidebar', {
-  props: ['overview','pagesize','loading'],
+const sidebar = Vue.component("sidebar", {
+  props: ["overview", "pagesize", "loading"],
   computed: {
     sortedArray() {
-      function compare(a, b){
+      function compare(a, b) {
         let displayNameA = a.displayName.toLowerCase();
         let displayNameB = b.displayName.toLowerCase();
-        if (displayNameA === 'all jobs' || displayNameB === 'all jobs')
-          return
-        if (displayNameA < displayNameB)
-          return -1;
-        if (displayNameA > displayNameB)
-          return 1;
+        if (displayNameA === "all jobs" || displayNameB === "all jobs") return;
+        if (displayNameA < displayNameB) return -1;
+        if (displayNameA > displayNameB) return 1;
         return 0;
       }
 
       return this.overview.sort(compare);
-    }
+    },
   },
   methods: {
-    flexgrow(number){
-      return Math.log2(1 + number)
+    flexgrow(number) {
+      return Math.log2(1 + number);
     },
-    searchSpecificJob(job, type){
-      if(job === 'All Jobs'){
-        if(type){
-          this.$emit('search-sidebar','','','',this.pagesize,'','',type,'',);
+    searchSpecificJob(job, type) {
+      if (job === "All Jobs") {
+        if (type) {
+          this.$emit(
+            "search-sidebar",
+            "",
+            "",
+            "",
+            this.pagesize,
+            "",
+            "",
+            type,
+            ""
+          );
         } else {
-          this.$emit('search-sidebar','','','',this.pagesize,'','','','',);
+          this.$emit(
+            "search-sidebar",
+            "",
+            "",
+            "",
+            this.pagesize,
+            "",
+            "",
+            "",
+            ""
+          );
         }
+      } else if (type) {
+        this.$emit(
+          "search-sidebar",
+          job,
+          "",
+          "",
+          this.pagesize,
+          "",
+          "",
+          type,
+          ""
+        );
+      } else {
+        this.$emit("search-sidebar", job, "", "", this.pagesize, "", "", "");
       }
-      else if(type){
-          this.$emit('search-sidebar',job,'','',this.pagesize,'','',type,'',)
-      }
-      else {
-        this.$emit('search-sidebar', job, '','',this.pagesize,'','','',);
-      }
-    }
+    },
   },
   template: `
     <div class="col sidebar">
@@ -92,5 +117,5 @@ const sidebar = Vue.component('sidebar', {
         </div>
       </div> <!-- row -->
     </div> <!-- div -->
-  `
-})
+  `,
+});

package/public/app/js/topbar.js

@@ -16,13 +16,23 @@ const topbar = Vue.component("topbar", {
       { text: "Running", value: "running", class: "text-warning" },
       { text: "Completed", value: "completed", class: "text-success" },
       { text: "Failed", value: "failed", class: "text-danger" },
-      { text: "Repeating", value: "repeating", class: "text-info" }
-    ]
+      { text: "Repeating", value: "repeating", class: "text-info" },
+    ],
   }),
   methods: {
     submit() {
-      this.$emit('search-form', this.name, this.search, this.property, this.limit, this.skip, this.refresh, this.state, this.object)
-    }
+      this.$emit(
+        "search-form",
+        this.name,
+        this.search,
+        this.property,
+        this.limit,
+        this.skip,
+        this.refresh,
+        this.state,
+        this.object
+      );
+    },
   },
   template: `
   <form @submit.prevent="submit">
@@ -81,5 +91,5 @@ const topbar = Vue.component("topbar", {
       </div>
     </div>
   </form>
-  `
+  `,
 });

package/.editorconfig

@@ -1,7 +0,0 @@
-[*]
-charset=utf-8
-end_of_line=lf
-trim_trailing_whitespace=true
-insert_final_newline=true
-indent_style=space
-indent_size=2

package/.idea/agendash.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>