✨ : add cost mgmt informations for modules

gaia-app · Aug 9, 2019 · a3ef489 · a3ef489
1 parent a667edb
commit a3ef489
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 18 deletions.
diff --git a/src/main/java/io/codeka/gaia/bo/TerraformModule.java b/src/main/java/io/codeka/gaia/bo/TerraformModule.java
@@ -4,6 +4,7 @@
 import io.codeka.gaia.teams.bo.User;
 import org.springframework.data.mongodb.core.mapping.DBRef;
 
+import java.math.BigDecimal;
 import java.util.ArrayList;
 import java.util.List;
 
@@ -28,6 +29,10 @@ public class TerraformModule {
     @DBRef
     private List<Team> authorizedTeams = new ArrayList<>();
 
+    private BigDecimal estimatedMonthlyCost;
+
+    private String estimatedMonthlyCostDescription;
+
     public String getId() {
         return id;
     }
@@ -103,4 +108,20 @@ public void setAuthorizedTeams(List<Team> authorizedTeams) {
     public boolean isAuthorizedFor(User user) {
         return user.isAdmin() || this.authorizedTeams.contains(user.getTeam());
     }
+
+    public BigDecimal getEstimatedMonthlyCost() {
+        return estimatedMonthlyCost;
+    }
+
+    public void setEstimatedMonthlyCost(BigDecimal estimatedMonthlyCost) {
+        this.estimatedMonthlyCost = estimatedMonthlyCost;
+    }
+
+    public String getEstimatedMonthlyCostDescription() {
+        return estimatedMonthlyCostDescription;
+    }
+
+    public void setEstimatedMonthlyCostDescription(String estimatedMonthlyCostDescription) {
+        this.estimatedMonthlyCostDescription = estimatedMonthlyCostDescription;
+    }
 }
diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
@@ -3670,18 +3670,18 @@ ul.messenger.messenger-fixed.messenger-on-top.custom-messenger-on-top {
     text-decoration: none;
 }
 
-.module_description .navbar {
+.module_description .nav {
     background-color: #f3f3f3;
     padding: 0 1rem;
 }
-.module_description .navbar .nav-item {
+.module_description .nav .nav-item {
     font-weight: 700;
     font-size: 14px;
     line-height: 76px;
     position: relative;
     padding: .5rem .75rem;
 }
-.module_description .navbar .nav-item.active:after {
+.module_description .nav .nav-item .nav-link.active:after {
     content: "";
     position: absolute;
     bottom: 0;
@@ -3691,6 +3691,12 @@ ul.messenger.messenger-fixed.messenger-on-top.custom-messenger-on-top {
     background-color: #5c4ee5;
 }
 
+.module_description .nav .nav-item .nav-link {
+    /*color: #495057;*/
+    background-color: transparent;
+    border-color: transparent;
+}
+
 /*------------------------------------------------------------------
     31. Custom style for navigation
 -------------------------------------------------------------------*/

diff --git a/src/main/resources/templates/module.html b/src/main/resources/templates/module.html
@@ -59,6 +59,29 @@ <h2>Module {{module.name}}</h2>
                     <label for="description">Description</label>
                     <input type="text" class="form-control" id="description" v-model="module.description">
                 </div>
+
+                <b-form-row>
+                    <b-col cols="3">
+                        <b-form-group id="estimatedMonthlyCost-fieldSet"
+                                      label="Estimated monthly cost"
+                                      label-for="estimatedMonthlyCost">
+                            <b-input-group append="$">
+                                <b-form-input id="estimatedMonthlyCost" v-model="module.estimatedMonthlyCost"></b-form-input>
+                            </b-input-group>
+
+                        </b-form-group>
+                    </b-col>
+                </b-form-row>
+
+                <b-form-group id="estimatedMonthlyCostDescription-fieldSet"
+                              label="Description of estimated monthly cost"
+                              label-for="estimatedMonthlyCostDescription">
+                    <b-input-group>
+                        <b-input-group-text slot="append"><i class="fab fa-markdown"></i></b-input-group-text>
+                        <b-form-textarea :id="estimatedMonthlyCostDescription" v-model="module.estimatedMonthlyCostDescription"></b-form-textarea>
+                    </b-input-group>
+                </b-form-group>
+
                 <div class="form-row">
                     <div class="form-group col">
                         <label for="gitRepositoryUrl">Git Repository URL</label>

diff --git a/src/main/resources/templates/module_description.html b/src/main/resources/templates/module_description.html
@@ -59,21 +59,32 @@ <h1>
                             <p>Module managed by <a href="#">{{owner}}</a></p>
                             <p>Total stacks: <a href="#">{{nbStacks}}</a></p>
                             <p>Source: <a :href="gitRepositoryUrl">{{gitRepositoryUrl}}</a></p>
+                            <p>Estimated monthly cost: {{estimatedMonthlyCost}} US $</p>
                         </div>
                     </div>
                 </div>
             </div>
         </section>
         <section>
-            <nav class="navbar navbar-expand">
-                <div class="navbar-nav">
-                    <a class="nav-item active" href="#"><i class="fab fa-markdown"></i> Readme</a>
-                </div>
-            </nav>
+            <b-tabs>
+                <b-tab active>
+                    <template slot="title">
+                        <i class="fab fa-markdown"></i> Readme
+                    </template>
+                    <readme :module-id="id"></readme>
+                </b-tab>
+                <b-tab>
+                    <template slot="title">
+                        <i class="fab fa-markdown"></i> Cost Of Ownership
+                    </template>
+                    <b-container fluid>
+                        <markdown :content="estimatedMonthlyCostDescription"></markdown>
+                    </b-container>
+                </b-tab>
+            </b-tabs>
         </section>
-        <div class="block_content">
-            <readme :module-id="id"></readme>
-        </div>
+<!--        <div class="block_content">-->
+<!--        </div>-->
     </div>
 </template>
 
@@ -92,6 +103,7 @@ <h1>
 
 <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="helpers/messenger"></div>

diff --git a/src/main/resources/templates/modules.html b/src/main/resources/templates/modules.html
@@ -44,11 +44,14 @@
             <b-card-text>
                 <img sec:authorize="hasRole('ADMIN')" :src="'https://img.shields.io/badge/terraform-'+module.cliVersion+'-blue.svg?style=flat-square,alt='+module.cliVersion+',title='+module.cliVersion" style="margin-bottom: .75rem" />
                 <p :text="module.description">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-                <a href="#" sec:authorize="hasRole('ADMIN')" :href="'/modules/'+module.id" data-toggle="tooltip" title="Edit this module" class="btn btn-primary"><i class="far fa-edit"></i></a>
-                <a href="#" :href="'/modules/'+module.id+'/description'" data-toggle="tooltip" title="Detail of this module" class="btn btn-primary"><i class="fas fa-info"></i></a>
-                <a href="#" :href="'/modules/'+module.id+'/run'" data-toggle="tooltip" title="Run this module" class="btn btn-primary"><i class="fas fa-rocket"></i></a>
-            </div>
-        </b-card-text>
+
+                <p v-if="module.estimatedMonthlyCost">Estimated monthly cost : <b-badge variant="info">{{module.estimatedMonthlyCost}} $</b-badge></p>
+            </b-card-text>
+
+            <a href="#" sec:authorize="hasRole('ADMIN')" :href="'/modules/'+module.id" data-toggle="tooltip" title="Edit this module" class="btn btn-primary"><i class="far fa-edit"></i></a>
+            <a href="#" :href="'/modules/'+module.id+'/description'" data-toggle="tooltip" title="Detail of this module" class="btn btn-primary"><i class="fas fa-info"></i></a>
+            <a href="#" :href="'/modules/'+module.id+'/run'" data-toggle="tooltip" title="Run this module" class="btn btn-primary"><i class="fas fa-rocket"></i></a>
+        </b-card>
     </b-card-group>
 </template>
 

diff --git a/src/main/resources/templates/vue_templates/markdown.vue b/src/main/resources/templates/vue_templates/markdown.vue
@@ -0,0 +1,20 @@
+<template id="markdown">
+    <div class="markdown-body">
+        <div v-html="convertedContent"></div>
+    </div>
+</template>
+
+<script>
+    Vue.component('markdown', {
+        template: '#markdown',
+        props: ['content'],
+        computed: {
+            convertedContent: function() {
+                if(typeof this.content === "undefined"){
+                    return "";
+                }
+                return marked(this.content);
+            }
+        }
+    });
+</script>
diff --git a/src/main/resources/templates/vue_templates/readme.vue b/src/main/resources/templates/vue_templates/readme.vue
@@ -1,10 +1,10 @@
 <template id="readme">
-    <div>
+    <b-container fluid>
         <b-spinner label="Loading..." class="m-5" style="height: 2.5rem; width: 2.5rem" v-if="!loaded"></b-spinner>
         <div class="markdown-body" v-if="loaded">
             <div v-html="content"></div>
         </div>
-    </div>
+    </b-container>
 </template>
 
 <script>