🔀 : Merge pull request #215 from gaia-app/212-remove-moment-duration

resolves #212
gaia-app · Jan 25, 2020 · 47a28fa · 47a28fa
2 parents af6b3a9 + baa754c
commit 47a28fa
Show file tree

Hide file tree

Showing 30 changed files with 92 additions and 100 deletions.
diff --git a/pom.xml b/pom.xml
@@ -129,16 +129,6 @@
 			<artifactId>marked</artifactId>
 			<version>0.7.0</version>
 		</dependency>
-		<dependency>
-			<groupId>org.webjars</groupId>
-			<artifactId>momentjs</artifactId>
-			<version>2.24.0</version>
-		</dependency>
-		<dependency>
-			<groupId>org.webjars.bower</groupId>
-			<artifactId>moment-duration-format</artifactId>
-			<version>1.3.0</version>
-		</dependency>
 
 		<dependency>
 			<groupId>org.springframework.boot</groupId>

diff --git a/src/main/java/io/codeka/gaia/dashboard/controller/UIExtensionsControllerAdvice.kt b/src/main/java/io/codeka/gaia/dashboard/controller/UIExtensionsControllerAdvice.kt
@@ -46,9 +46,7 @@ open class UIExtensionsConfig(){
                 "classpath*:/**/vue/**/vue.min.js",
                 "classpath*:/**/bootstrap-vue/**/bootstrap-vue.min.js",
                 "classpath*:/**/marked/**/marked.min.js",
-                "classpath*:/**/vue-multiselect/**/vue-multiselect.min.js",
-                "classpath*:/**/momentjs/**/moment.min.js",
-                "classpath*:/**/moment-duration-format/**/moment-duration-format.js"
+                "classpath*:/**/vue-multiselect/**/vue-multiselect.min.js"
         )
     }
 }

diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
@@ -62,10 +62,10 @@ <h3>Hi there ! </h3>
     <breadcrumb :page="page"></breadcrumb>
 </template>
 
-<div th:replace="vue_templates/sidebar"></div>
+<div th:replace="vue_templates/components/sidebar"></div>
 
-<div th:replace="vue_templates/breadcrumb"></div>
-<div th:replace="vue_templates/dashboard-widget"></div>
+<div th:replace="vue_templates/components/breadcrumb"></div>
+<div th:replace="vue_templates/components/dashboard-widget"></div>
 
 <script th:inline="javascript" type="application/ecmascript">
     new Vue({

diff --git a/src/main/resources/templates/job.html b/src/main/resources/templates/job.html
@@ -77,18 +77,19 @@ <h2>Stack {{stack.name}}</h2>
     <breadcrumb :page="page" :stack-id="stackId"></breadcrumb>
 </template>
 
-<div th:replace="vue_templates/sidebar"></div>
+<div th:replace="vue_templates/components/sidebar"></div>
 
 <div th:replace="helpers/messenger"></div>
 
-<div th:replace="vue_templates/cli-badge"></div>
-<div th:replace="vue_templates/breadcrumb"></div>
-<div th:replace="vue_templates/console"></div>
-<div th:replace="vue_templates/user-badge"></div>
-<div th:replace="vue_templates/job/job-metadata"></div>
-<div th:replace="vue_templates/job/job-step"></div>
-<div th:replace="vue_templates/job/job-apply-confirm"></div>
-<div th:replace="vue_templates/job/job-timer"></div>
+<div th:replace="vue_templates/components/cli-badge"></div>
+<div th:replace="vue_templates/components/breadcrumb"></div>
+<div th:replace="vue_templates/components/console"></div>
+<div th:replace="vue_templates/components/user-badge"></div>
+<div th:replace="vue_templates/components/job/job-metadata"></div>
+<div th:replace="vue_templates/components/job/job-step"></div>
+<div th:replace="vue_templates/components/job/job-apply-confirm"></div>
+<div th:replace="vue_templates/components/job/job-timer"></div>
+<div th:replace="vue_templates/filters/date-time"></div>
 
 <script src="/js/ansi_to_html.js"></script>
 

diff --git a/src/main/resources/templates/module.html b/src/main/resources/templates/module.html
@@ -161,8 +161,8 @@ <h2>Variables <b-button variant="success" @click="addVar()"><i class="fas fa-plu
 </template>
 
 <div th:replace="helpers/messenger"></div>
-<div th:replace="vue_templates/breadcrumb"></div>
-<div th:replace="vue_templates/sidebar"></div>
+<div th:replace="vue_templates/components/breadcrumb"></div>
+<div th:replace="vue_templates/components/sidebar"></div>
 
 <script th:inline="javascript" type="application/ecmascript">
     Vue.component('vue-multiselect', window.VueMultiselect.default);

diff --git a/src/main/resources/templates/module_description.html b/src/main/resources/templates/module_description.html
@@ -57,8 +57,8 @@ <h1>
                         <div class="desc">{{description}}</div>
                         <hr>
                         <div class="metadata">
-                            <p>Published <b>{{moduleMetadata.createdAt | dateTime}}</b> by <a href="#">{{moduleMetadata.createdBy.username}}</a></p>
-                            <p v-if="moduleMetadata.updatedAt">Last modified <b>{{moduleMetadata.updatedAt | dateTime}}</b> by <a href="#">{{moduleMetadata.updatedBy.username}}</a></p>
+                            <p>Published <b>{{moduleMetadata.createdAt | dateTimeLong}}</b> by <a href="#">{{moduleMetadata.createdBy.username}}</a></p>
+                            <p v-if="moduleMetadata.updatedAt">Last modified <b>{{moduleMetadata.updatedAt | dateTimeLong}}</b> by <a href="#">{{moduleMetadata.updatedBy.username}}</a></p>
                             <p>Source: <a :href="gitRepositoryUrl">{{gitRepositoryUrl}}</a></p>
                             <p v-if="estimatedMonthlyCost">Estimated monthly cost: ${{estimatedMonthlyCost}}</p>
                         </div>
@@ -93,11 +93,12 @@ <h1>
     <breadcrumb :page="page"></breadcrumb>
 </template>
 
-<div th:replace="vue_templates/cli-badge"></div>
-<div th:replace="vue_templates/readme"></div>
-<div th:replace="vue_templates/markdown"></div>
-<div th:replace="vue_templates/breadcrumb"></div>
-<div th:replace="vue_templates/sidebar"></div>
+<div th:replace="vue_templates/components/cli-badge"></div>
+<div th:replace="vue_templates/components/readme"></div>
+<div th:replace="vue_templates/components/markdown"></div>
+<div th:replace="vue_templates/components/breadcrumb"></div>
+<div th:replace="vue_templates/components/sidebar"></div>
+<div th:replace="vue_templates/filters/date-time"></div>
 
 <div th:replace="helpers/messenger"></div>
 
@@ -121,11 +122,6 @@ <h1>
         data: () => ({ page: 'module_description' }),
         template: "#template-navigation",
     });
-
-    Vue.filter('dateTime', function (value) {
-        if (!value || !moment(value).isValid()) return '';
-        return moment(value).format('LLL');
-    })
 </script>
 
 </body>

diff --git a/src/main/resources/templates/modules.html b/src/main/resources/templates/modules.html
@@ -65,8 +65,8 @@
     </b-card-group>
 </template>
 
-<div th:replace="vue_templates/breadcrumb"></div>
-<div th:replace="vue_templates/sidebar"></div>
+<div th:replace="vue_templates/components/breadcrumb"></div>
+<div th:replace="vue_templates/components/sidebar"></div>
 
 <script type="application/ecmascript" th:inline="javascript">
     $(document).ready(function () {

diff --git a/src/main/resources/templates/modules_import.html b/src/main/resources/templates/modules_import.html
@@ -51,14 +51,14 @@
     <breadcrumb :page="page"></breadcrumb>
 </template>
 
-<div th:replace="vue_templates/modules/module-import"></div>
-<div th:replace="vue_templates/modules/manual-import"></div>
+<div th:replace="vue_templates/components/modules/module-import"></div>
+<div th:replace="vue_templates/components/modules/manual-import"></div>
 
-<div th:replace="vue_templates/sidebar"></div>
+<div th:replace="vue_templates/components/sidebar"></div>
 
 <div th:replace="helpers/messenger"></div>
 
-<div th:replace="vue_templates/breadcrumb"></div>
+<div th:replace="vue_templates/components/breadcrumb"></div>
 
 <script src="/js/ansi_to_html.js"></script>
 

diff --git a/src/main/resources/templates/new_stack.html b/src/main/resources/templates/new_stack.html
@@ -36,9 +36,9 @@
 
 <script src="/js/prism.js"></script>
 
-<div th:replace="vue_templates/stack-vars"></div>
-<div th:replace="vue_templates/breadcrumb"></div>
-<div th:replace="vue_templates/sidebar"></div>
+<div th:replace="vue_templates/components/stack-vars"></div>
+<div th:replace="vue_templates/components/breadcrumb"></div>
+<div th:replace="vue_templates/components/sidebar"></div>
 
 <template id="template">
     <div>

diff --git a/src/main/resources/templates/settings.html b/src/main/resources/templates/settings.html
@@ -80,9 +80,9 @@ <h2>Environment Variables <button type="button" class="btn btn-success" @click="
     <breadcrumb :page="page"></breadcrumb>
 </template>
 
-<div th:replace="vue_templates/sidebar"></div>
+<div th:replace="vue_templates/components/sidebar"></div>
 <div th:replace="helpers/messenger"></div>
-<div th:replace="vue_templates/breadcrumb"></div>
+<div th:replace="vue_templates/components/breadcrumb"></div>
 
 <script th:inline="javascript" type="application/ecmascript">
     const settings = [[${settings}]];

diff --git a/src/main/resources/templates/stack.html b/src/main/resources/templates/stack.html
@@ -39,11 +39,12 @@
     </div>
 </div>
 
-<div th:replace="vue_templates/stack-vars"></div>
-<div th:replace="vue_templates/breadcrumb"></div>
-<div th:replace="vue_templates/user-badge"></div>
-<div th:replace="vue_templates/sidebar"></div>
-<div th:replace="vue_templates/job/job-timer"></div>
+<div th:replace="vue_templates/components/stack-vars"></div>
+<div th:replace="vue_templates/components/breadcrumb"></div>
+<div th:replace="vue_templates/components/user-badge"></div>
+<div th:replace="vue_templates/components/sidebar"></div>
+<div th:replace="vue_templates/components/job/job-timer"></div>
+<div th:replace="vue_templates/filters/date-time"></div>
 
 <template id="stack-controls">
     <div class="page_controls">
@@ -197,17 +198,6 @@ <h2><span><i class="fas fa-history"></i> Job history</span></h2>
         template: "#stack-outputs",
         props: ["outputs"]
     });
-
-    Vue.filter('dateTime', function (value) {
-        if (!value || !moment(value).isValid()) return '';
-        return moment(value).format('L LTS');
-    });
-
-    Vue.filter('dateTimeLong', function (value) {
-        if (!value || !moment(value).isValid()) return '';
-        return moment(value).format('LLL');
-    });
-
 </script>
 
 <div th:replace="helpers/messenger"></div>

diff --git a/src/main/resources/templates/stacks.html b/src/main/resources/templates/stacks.html
@@ -55,8 +55,8 @@
     <breadcrumb :page="page"></breadcrumb>
 </template>
 
-<div th:replace="vue_templates/breadcrumb"></div>
-<div th:replace="vue_templates/sidebar"></div>
+<div th:replace="vue_templates/components/breadcrumb"></div>
+<div th:replace="vue_templates/components/sidebar"></div>
 
 <script type="application/ecmascript">
     let stacks;

diff --git a/src/main/resources/templates/users.html b/src/main/resources/templates/users.html
@@ -57,9 +57,9 @@
     </div>
 </template>
 
-<div th:replace="vue_templates/sidebar"></div>
+<div th:replace="vue_templates/components/sidebar"></div>
 <div th:replace="helpers/messenger"></div>
-<div th:replace="vue_templates/breadcrumb"></div>
+<div th:replace="vue_templates/components/breadcrumb"></div>
 
 <script type="application/ecmascript">
     Vue.component('vue-multiselect', window.VueMultiselect.default);

diff --git a/...es/templates/vue_templates/breadcrumb.vue → ...s/vue_templates/components/breadcrumb.vue b/...es/templates/vue_templates/breadcrumb.vue → ...s/vue_templates/components/breadcrumb.vue
diff --git a/...ces/templates/vue_templates/cli-badge.vue → ...es/vue_templates/components/cli-badge.vue b/...ces/templates/vue_templates/cli-badge.vue → ...es/vue_templates/components/cli-badge.vue
diff --git a/...urces/templates/vue_templates/console.vue → ...ates/vue_templates/components/console.vue b/...urces/templates/vue_templates/console.vue → ...ates/vue_templates/components/console.vue
diff --git a/...plates/vue_templates/dashboard-widget.vue → ...templates/components/dashboard-widget.vue b/...plates/vue_templates/dashboard-widget.vue → ...templates/components/dashboard-widget.vue
diff --git a/...s/vue_templates/job/job-apply-confirm.vue → ...ates/components/job/job-apply-confirm.vue b/...s/vue_templates/job/job-apply-confirm.vue → ...ates/components/job/job-apply-confirm.vue
diff --git a/...plates/vue_templates/job/job-metadata.vue → ...templates/components/job/job-metadata.vue b/...plates/vue_templates/job/job-metadata.vue → ...templates/components/job/job-metadata.vue
@@ -19,11 +19,11 @@
             <span class="job-detail-title">Status&nbsp;{{job.status}}</span>
             <p>
                 <i class="fas fa-play"></i>
-                Started&nbsp;<b>{{job.startDateTime | dateTime}}</b>
+                Started&nbsp;<b>{{job.startDateTime | dateTimeLong}}</b>
             </p>
             <p v-if="job.endDateTime">
                 <i class="fas fa-stop"></i>
-                Ended&nbsp;<b>{{job.endDateTime | dateTime}}</b>
+                Ended&nbsp;<b>{{job.endDateTime | dateTimeLong}}</b>
             </p>
             <p>
                 <i class="fas fa-stopwatch"></i>
@@ -51,12 +51,6 @@
                 return this.job.status !== null &&
                     this.job.status.indexOf('FAILED') > 0;
             },
-        },
-        filters: {
-            dateTime: function (value) {
-                if (!value || !moment(value).isValid()) return '';
-                return moment(value).format('LL LTS');
-            }
         }
     });
 </script>

diff --git a/.../templates/vue_templates/job/job-step.vue → ...vue_templates/components/job/job-step.vue b/.../templates/vue_templates/job/job-step.vue → ...vue_templates/components/job/job-step.vue
@@ -21,11 +21,11 @@
                 <span class="job-step-status">Status&nbsp;{{step.status}}</span>
                 <p>
                     <i class="fas fa-play"></i>
-                    Started&nbsp;<b>{{step.startDateTime | dateTime}}</b>
+                    Started&nbsp;<b>{{step.startDateTime | dateTimeLong}}</b>
                 </p>
                 <p v-if="step.endDateTime">
                     <i class="fas fa-stop"></i>
-                    Ended&nbsp;<b>{{step.endDateTime | dateTime}}</b>
+                    Ended&nbsp;<b>{{step.endDateTime | dateTimeLong}}</b>
                 </p>
                 <p>
                     <i class="fas fa-stopwatch"></i>
@@ -62,12 +62,6 @@
             step: function (newValue) {
                 this.bodyVisible = newValue.status !== 'FINISHED';
             }
-        },
-        filters: {
-            dateTime: function (value) {
-                if (!value || !moment(value).isValid()) return '';
-                return moment(value).format('LL LTS');
-            }
         }
     });
 </script>

diff --git a/...templates/vue_templates/job/job-timer.vue → ...ue_templates/components/job/job-timer.vue b/...templates/vue_templates/job/job-timer.vue → ...ue_templates/components/job/job-timer.vue
@@ -9,16 +9,14 @@
         template: '#job-timer-template',
         data: () => ({
             timer: 0,
-            intervalId: null
+            intervalId: null,
         }),
         props: {
             startTime: {
-                type: Date | moment | String,
-                default: () => moment()
+                type: Date | String,
             },
             endTime: {
-                type: Date | moment | String,
-                default: () => null
+                type: Date | String,
             },
             cssClass: {
                 type: String,
@@ -27,7 +25,7 @@
         },
         created: function () {
             if (!!this.endTime) {
-                this.interval(moment(this.endTime));
+                this.interval(this.endTime);
                 return;
             }
             this.start();
@@ -38,25 +36,29 @@
                     this.start();
                     return;
                 }
-                this.interval(moment(newValue));
+                this.interval(newValue);
                 this.end();
             },
         },
         methods: {
             start: function () {
-                this.intervalId = setInterval(() => this.interval(moment()), 1000);
+                this.intervalId = setInterval(() => this.interval(new Date()), 1000);
             },
             end: function () {
                 clearInterval(this.intervalId);
             },
             interval: function (endTime) {
-                this.timer = moment.duration(endTime.diff(this.startTime));
+                this.timer = Math.floor((Date.parse(endTime) - Date.parse(this.startTime)) / 1000);
             }
         },
         filters: {
             format: function (value) {
-                if (!moment.isDuration(value)) return '';
-                return value.format("h [hr] m [min] s [sec]");
+                const hours = Math.floor(value / 3600) % 24;
+                const minutes = Math.floor(value / 60) % 60;
+                const seconds = ('0' + value % 60).slice(-2);
+                return `${hours > 0 ? `${hours} hr` : ''}
+                    ${minutes > 0 ? `${minutes} min` : ''}
+                    ${seconds} sec`;
             }
         }
     });

diff --git a/...rces/templates/vue_templates/markdown.vue → ...tes/vue_templates/components/markdown.vue b/...rces/templates/vue_templates/markdown.vue → ...tes/vue_templates/components/markdown.vue
diff --git a/...s/vue_templates/modules/manual-import.vue → ...ates/components/modules/manual-import.vue b/...s/vue_templates/modules/manual-import.vue → ...ates/components/modules/manual-import.vue
diff --git a/...s/vue_templates/modules/module-import.vue → ...ates/components/modules/module-import.vue b/...s/vue_templates/modules/module-import.vue → ...ates/components/modules/module-import.vue
diff --git a/...ources/templates/vue_templates/readme.vue → ...lates/vue_templates/components/readme.vue b/...ources/templates/vue_templates/readme.vue → ...lates/vue_templates/components/readme.vue
diff --git a/...urces/templates/vue_templates/sidebar.vue → ...ates/vue_templates/components/sidebar.vue b/...urces/templates/vue_templates/sidebar.vue → ...ates/vue_templates/components/sidebar.vue
diff --git a/...es/templates/vue_templates/stack-vars.vue → ...s/vue_templates/components/stack-vars.vue b/...es/templates/vue_templates/stack-vars.vue → ...s/vue_templates/components/stack-vars.vue
diff --git a/...es/templates/vue_templates/user-badge.vue → ...s/vue_templates/components/user-badge.vue b/...es/templates/vue_templates/user-badge.vue → ...s/vue_templates/components/user-badge.vue
diff --git a/src/main/resources/templates/vue_templates/filters/date-time.vue b/src/main/resources/templates/vue_templates/filters/date-time.vue
@@ -0,0 +1,29 @@
+<script>
+    function formatDate(value, options) {
+        if (!value) return '';
+        return new Intl.DateTimeFormat(undefined, options).format(Date.parse(value));
+    }
+
+    // display date like "05/04/2020, 4:20:20 AM"
+    Vue.filter('dateTime', function (value) {
+        return formatDate(value, {
+            "day": "2-digit",
+            "month": "2-digit",
+            "year": "numeric",
+            "hour": "numeric",
+            "minute": "2-digit",
+            "second": "2-digit"
+        });
+    });
+    // display date like "May 04, 2020, 4:20:20 AM"
+    Vue.filter('dateTimeLong', function (value) {
+        return formatDate(value, {
+            "day": "2-digit",
+            "month": "long",
+            "year": "numeric",
+            "hour": "numeric",
+            "minute": "2-digit",
+            "second": "2-digit"
+        });
+    });
+</script>
diff --git a/src/test/java/io/codeka/gaia/dashboard/controller/UiExtensionsScannerIT.kt b/src/test/java/io/codeka/gaia/dashboard/controller/UiExtensionsScannerIT.kt
@@ -28,9 +28,7 @@ class UiExtensionsScannerIT(private val applicationContext: ApplicationContext)
                 "classpath*:/**/vue/**/vue.min.js",
                 "classpath*:/**/bootstrap-vue/**/bootstrap-vue.min.js",
                 "classpath*:/**/marked/**/marked.min.js",
-                "classpath*:/**/vue-multiselect/**/vue-multiselect.min.js",
-                "classpath*:/**/momentjs/**/moment.min.js",
-                "classpath*:/**/moment-duration-format/**/moment-duration-format.js"
+                "classpath*:/**/vue-multiselect/**/vue-multiselect.min.js"
         )
 
         val uiExtension = scanner.scan(*locations)