cob-cli 2.13.1 → 2.14.0

package/templates/dashboards/dash/src/components/Kibana.vue

@@ -0,0 +1,116 @@
+<template>
+    <iframe id="kibana" :src="shareLink" width="100%" :onload="updateIFrameStyle()" :class="classes"></iframe>
+</template>
+
+<script>
+    export default {
+        props: {
+          component: Object,
+          userInfo: Object
+        },
+        data: () => ({
+            iFrame: null,
+            outputFilter: ""
+        }),
+        mounted() {
+            this.iFrame = this.$el
+
+            this.inputs.forEach(inputVar => {
+                this.$watch("component.vars."+inputVar, this.updateKibanaQuery)
+            });
+            this.updateKibanaQuery()
+
+            window.addEventListener("resize", this.updateIFrameStyle);
+            this.updateIFrameStyle();
+
+            window.addEventListener("message", this.processKibanaEvent);
+            this.processKibanaEvent();
+        },
+        computed: {
+            options()     { return this.component['KibanaCustomize'][0] },
+            shareLink()   { return this.component['ShareLink']   || "" },
+            classes()     { return this.options['KibanaClasses'] || "" },
+            fixedQuery()  { return this.options['InputQueryKibana']|| "" },
+            inputs()      { return this.options['InputVarKibana'].map(v => v['InputVarKibana']) },
+            inputFilter() {
+              let filters = this.inputs.filter(v => this.component.vars[v]).map(v => this.component.vars[v]);
+              if (this.fixedQuery !== "") filters.push(" AND (" + this.fixedQuery + ")");
+              return filters.join(" ")
+            },
+            outputVar()   { return this.options['OutputVarKibana']     || "" },
+        },
+        methods: {
+            updateIFrameStyle() {
+                if(!this.iFrame || !this.iFrame.contentWindow || !this.iFrame.contentWindow.document.head) {
+                    //iFrame do Kibana ainda não está pronta. Voltar a tentar em 100ms
+                    setTimeout( () => this.updateIFrameStyle(), 100)
+                } else {
+                    // Ajusta tamanho do iFrame, de acordo com a dimensão do conteúdo, quando a aplicação estiver pronta
+                    if (!this.iFrame.contentWindow.document.getElementsByClassName("application").length && !this.iFrame.contentWindow.document.getElementsByClassName("dashboardViewport").length) {
+                        //Ainda está a carregar, espera mais um pouco 
+                        setTimeout( () => this.updateIFrameStyle(), 100)
+                    } else {
+                        // Visualizações ainda vai estar a carregar e o tamanho vai variando
+                        // Ir actualizando de 100ms em 100ms até 3s (SlowestLoading estimado), 
+                        // para ter um comportamento optimizado tão instantânio qt possível
+                        const SlowestLoading = 3000
+                        for(let t = 100; t < SlowestLoading; t += 100) setTimeout(() => {
+                            this.iFrame.style.minHeight = this.iFrame.contentWindow.document.body.scrollHeight + "px"
+                        }, t)
+                    }
+
+                    // Ajuste ao estilo interno do Kibana, alguns condicionais às classes passadas na iFrame (se ainda não tiver sido feito)
+                    if(!this.iFrame.contentWindow.document.getElementById("cobKibanaStyle")) {
+                        var s = document.createElement("style");
+                        s.id = "cobKibanaStyle";
+                        s.appendChild(document.createTextNode([
+                            "html, .kbnWelcomeView { background-color: #ffffff00 !important }"
+                            , (this.classes.indexOf("kibanaEmbPanelTransparent") != -1 ? ".euiPanel { background-color: #ffffff00 !important; border:none; box-shadow: none }" : "")
+                            , (this.classes.indexOf("kibanaNoNavMenu") != -1 ? ".kbnTopNavMenu__wrapper { display: none }" : "")
+                            ,".visLegend__toggle { display: none!important; }"
+
+                        ].join("\n")));
+                        // Aplica dentro de um try catch, porque a iframe Kibana no arranque tem e deixa de ter document.head e dá um erro. Não é um problema pois voltaremos a passar aqui fruto do resize ainda por fazer.
+                        try { this.iFrame.contentWindow.document.head.appendChild(s); } catch {}
+                    }
+                }
+            },
+            processKibanaEvent(event) {
+                // Só vale a pena reagir aos eventos de mudança de filtro no Kibana
+                if(event && event.data && event.data.filters) {
+                    var filters = []
+                    for(let filter of event.data.filters) {
+                        var queryStr;
+                        var negateStr = filter.meta.negate ? "-" : "";
+                        var enabled = !filter.meta.disabled;
+
+                        if(filter.query.query_string) {
+                            queryStr = filter.query.query_string.query;
+                        } else if (filter.query.match_phrase) {
+                            var key = Object.keys(filter.query.match_phrase)[0];
+                            queryStr = key + ':"' + filter.query.match_phrase[key] + '"';
+                        }
+                        if (enabled) filters.push(negateStr + "(" +queryStr + ")");
+                    };
+                    this.outputFilter = filters.length > 0 ? filters.join(" AND ") : ""
+                    this.$set(this.component.vars, this.outputVar, this.outputFilter)
+                }
+            },
+            updateKibanaQuery() {
+                if(!this.iFrame || !this.iFrame.contentWindow || !this.iFrame.contentWindow.document.head || !this.iFrame.contentWindow.document.getElementsByClassName("kbnTopNavMenu__wrapper").length) {
+                    //O Kibana ainda não está pronto. Voltar a tentar em 100ms
+                    setTimeout(this.updateKibanaQuery, 100)
+                } else if(this.inputFilter) {
+                    
+                    if(this.iFrame.contentWindow.document.getElementsByClassName("euiLoadingChart").length > 0) {
+                        //O Kibana já está pronto mas ainda está a carregar dados. Voltar a tentar em 100ms
+                        setTimeout(this.updateKibanaQuery, 100)
+                    } else {
+                        console.debug("KIBANA QUERY: ", this.inputFilter.replaceAll("__USERNAME__",this.userInfo.username) );
+                        this.iFrame.contentWindow.postMessage({"query":{ "query_string":{ "query": this.inputFilter.replaceAll("__USERNAME__",this.userInfo.username) || "*" } }}, '*');                  
+                    }
+                }
+            }
+        }
+    }
+</script>

package/templates/dashboards/dash/src/components/Label.vue

@@ -0,0 +1,15 @@
+<template>
+    <div :class="classes" :style="image" v-html="label"></div>
+</template>
+
+<script>
+    export default {
+        props: { component: Object },
+        computed: {
+            options() { return this.component['LabelCustomize'][0] },
+            label()   { return this.component['Label']      || "" },
+            classes() { return this.options['LabelClasses'] || "text-center" },
+            image()   { return this.options['Image'] ? "background-image: url(" + this.options['Image'] +  ");" : "" }
+        }
+    }
+</script>

package/templates/dashboards/dash/src/components/Menu.vue

@@ -1,30 +1,41 @@
 <template>
-    <ul class="space-y-2 text-slate-700 decoration-slate-700">
-        <li v-for="(menuItem, i) in menuItems" 
-            :key="'menuItem-' + i"
-            :class="'transition ease-in-out duration-300 rounded-md border border-cobline border-l-2 border-l-sky-600 shadow-sm transform hover:translate-x-0.5 '
-                    + menuItem.style"
+    <div :class="classes">
+        <a v-for="(line, i) in lines" 
+            :key="i"
+            :class="line.classes"
+            :href="line.link"
         >
-            <a :href="menuItem.link" class="flex items-center font-light py-1 px-3" >
-                <span v-html="menuItem.text"/>
-            </a>
-        </li>
-    </ul>
+            <span style="margin-right: 20px;">
+                <i v-if="line.icon" :class="line.icon" style="margin-right:4px"></i>
+                <span v-html="line.text"></span>
+            </span>
+            <Attention class="absolute right-1" :attentionInfo="line.attention"/>
+        </a>
+    </div>
 </template>
 
 <script>
-export default {
-    props: {
-        componentData: Object
-    },
-    computed: {
-        menuItems() { 
-            return this.componentData['Text'].map( m => ({
-                text: m['Text'],
-                link: m['Link'],
-                style: m['Style Text'],
-            }))
+    import Attention from './Attention.vue'
+
+    export default {
+        components: { Attention },
+        props: { component: Object },
+        computed: {
+            options() { return this.component['MenuCustomize'][0] },
+            classes() { return this.options['MenuClasses']      || "flex flex-col gap-y-2" },             
+            lines() {
+                let lines = this.component['Text'].map( line => ({
+                    classes:   line["TextCustomize"][0]['TextClasses'] || "transition ease-in-out duration-300 rounded-md border border-gray-300 border-l-2 border-l-sky-600 shadow-sm transform hover:translate-x-0.5 p-2",
+                    icon:      line["TextCustomize"][0]['Icon']        || "",
+                    text:      line['Text']                            || "",
+                    link:      line['Link']                            || "",
+                    groups:    line["TextCustomize"][0]['GroupVisibility'].map(g => g["GroupVisibility"] && g["GroupVisibility"] ).filter(g => g) || [],
+                    attention: line["TextCustomize"][0]['AttentionInfo'],
+                }))
+                // Filter out lines that have groupVisibility AND the user does not have any of the groups
+                let userGroups = this.component.userInfo.groups.map(g => g.name)
+                return lines.filter(l => l.groups.length == 0 || l.groups.filter(g => userGroups.includes(g)).length != 0 )
+            }
         }
     }
-}
 </script>

package/templates/dashboards/dash/src/components/Totals.vue

@@ -1,63 +1,49 @@
 <template>
-    <table class="w-full table-auto">
-        <thead v-if="headers.length > 0">
-            <tr class="uppercase text-xs text-slate-700 tracking-wider underline underline-offset-4">
-                <td :class="'py-2 ' + headers_style">{{ headers[0] }}</td>
-                <td v-for="header in headers.slice(1)" :key="header"
-                    :class="'py-2 text-right ' + headers_style">{{ header }}</td>
-            </tr>
-        </thead>
-        <tbody>
-            <tr v-for="(line, i) in lines" :key="'line'+i"
-                class="text-slate-700">
-                <td :class="'py-2 ' + line.style">{{ line.name }}</td>
-                <td v-for="(value, j) in line.values" :key="'value'+j"
-                    class="py-2 text-right">
-                    <TotalsValue :value-data="value" />
-                </td>
-            </tr>
-        </tbody>
+    <table :class="classes">
+        <tr v-for="(line, i) in lines" :key="'line'+i" :class="line.lineClasses">
+            <td  :class="line.titleClasses">
+                {{ line.title }}
+            </td>
+            <td v-for="(value, j) in line.values" :key="'value'+i+'-'+j">
+                <TotalsValue :value-data="value"/>
+            </td>
+        </tr>
     </table>
 </template>
 
 <script>
-import TotalsValue from './TotalsValue.vue'
-export default {
-    components: { TotalsValue },
-    props: { componentData: Object },
-    computed: {
-        headers() { 
-            return this.componentData['Header'][0]['Text'].filter(x => !!x).map(h => h['Text']) 
-        },
-        headers_style() { 
-            return this.componentData['Header'][0]['Style Header'] 
+    import TotalsValue from './TotalsValue.vue'
+
+    export default {
+        components: { TotalsValue },
+        props: {
+          component: Object,
+          userInfo: Object
         },
-        lines() { 
-            return this.componentData['Line'].map( l => ({
-                name : l['Line'],
-                style : l['Style Line'],
-                values: l['Value']
-            }))
+        computed: {
+            options()     { return this.component['TotalsCustomize'][0] },
+            classes()     { return this.options['TotalsClasses'] || "w-full table-auto" },
+            inputs()      { return this.options['InputVarTotals'].map(v => v['InputVarTotals']) },
+            inputFilter() { return this.inputs.filter(v => this.component.vars[v]).map(v => this.component.vars[v]).join(" ")},
+            lines() {
+                return this.component['Line'].map( l => ({
+                    title :       l['Line']                             || "",
+                    lineClasses:  l["LineCustomize"][0]["LineClasses"]  || "text-right transition ease-in-out ring-sky-600 ring-offset-1 hover:ring-2 rounded-md",
+                    titleClasses: l["LineCustomize"][0]["TitleClasses"] || "text-left p-2",
+                    values:       l['Value']
+            }))}
         },
-        valuesGridClass() {
-            const dynamicClasses = {
-                1: "grid-cols-1",
-                2: "grid-cols-2",
-                3: "grid-cols-3",
-                4: "grid-cols-4",
-                5: "grid-cols-5",
-                6: "grid-cols-6",
-                7: "grid-cols-7",
-                8: "grid-cols-8",
-                9: "grid-cols-9",
-                10: "grid-cols-10",
-                11: "grid-cols-11",
-                12: "grid-cols-12",
-                none: "grid-cols-none"
+        watch: {
+            inputFilter(newValue) {
+                if(newValue == "") return //PRESSUPOSTO IMPORTANTE: se newValue é vazio é porque estamos em transições (porque usamos sempre um valor, nem que seja *) e o melhor é usar o valor antigo para o valor não mudar momentaneamente (e ainda desperdicar uma pesquisa). Se o pressuposto for quebrado vamos impedir a actualização do inputFilter quando o valor é ""
+                this.lines.forEach(l => {
+                    l.values.forEach(v => {
+                      let arg = (v.Arg[1] instanceof Object ? v.Arg[1].Arg : v.Arg[1])
+                      let newFilter = ((arg || "") + " " + newValue.trim()) || "*"
+                      if (v.dash_info) v.dash_info.changeArgs({query: newFilter.replaceAll("__USERNAME__",this.userInfo.username)})
+                    });
+                });
             }
-            // Grid with cols == amount of values
-            return "grid " + dynamicClasses[this.lines[0].values.length]
         }
     }
-}
 </script>

package/templates/dashboards/dash/src/components/TotalsValue.vue

@@ -1,69 +1,58 @@
 <template>
-    <div :class="{'animate-pulse':signalChange}">
-        <a :href="valueData.dash_info.href" :class="valueClass" class="relative inline-flex">
-            <span v-html="value"/>
+    <a v-if="state" :href="link" :class="expandedClasses">
 
-            <svg v-if="updating" class="absolute animate-spin -top-1 -right-1 h-2 w-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-            </svg>
-        </a>
-    </div>
-</template>
+        <Attention :attentionInfo="attention" :classes="attentionClasses" />
 
-<script>
+        <span v-html="value"/><span class="" >{{unit}}</span>
 
-export default {
-    props: {
-        valueData: Object
-    },
-    data () {
-      return {
-        signalChange: false
-      }
-    },
-    watch: {
-      state(newState) {
-        if(newState == "ready") {
-            this.signalChange = true;
-            setTimeout( () => this.signalChange = false,8000)
-        }
-      }
-    },
-    computed: {
-        updating() {
-            return this.valueData.dash_info.state == "updating" || this.valueData.dash_info.state == "loading"
-        },
-        value() {
-            if(this.valueData.dash_info.state == "loading") return "L"
-            if(this.valueData.dash_info.state == "error") return "E"
-            if(isNaN(this.valueData.dash_info.value)) {
-                return this.valueData.dash_info.value
-            } else {
-                return new Intl.NumberFormat('en-US', {}).format(this.valueData.dash_info.value) 
-            }
-        },
-        state() {
-            return this.valueData.dash_info.state
-        },
-        valueClass() {
-            let c = "relative transition ease-in-out px-2 py-1 rounded-md text-center font-mono font-semibold transition border ring-offset-1 hover:ring-2"
+        <svg v-if="updating" class="absolute animate-spin -top-1 -right-1 h-2 w-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+    </a>
+</template>
 
-            const lookup = {
-                "Info":      "text-sky-600 border-sky-600 bg-sky-200/10 ring-sky-600",
-                "Success":   "text-lime-500  border-lime-500 bg-lime-200/10 ring-lime-500",
-                "Warning":   "text-amber-500 border-amber-500 bg-amber-200/10 ring-amber-500",
-                "Important": "text-rose-600  border-rose-600 bg-rose-200/10 ring-rose-600",
+<script>
+    import Attention from './Attention.vue'
+    const specialClasses = {
+        "Info":      "border border-sky-600 bg-sky-200/10 ring-sky-600 ",
+        "Success":   "border border-lime-500 bg-lime-200/10 ring-lime-500 ",
+        "Warning":   "border border-amber-500 bg-amber-200/10 ring-amber-500 ",
+        "Important": "border border-rose-600 bg-rose-200/10 ring-rose-600 ",
+        "Gray":      "text-gray-400 border-gray-200 bg-gray-200/10 ring-gray-200 ",
+        "Default":   "inline-block "                                                    // para poder conter internamente o Attention sem ser noutra linha
+                    +"whitespace-nowrap "                                               // Para não partir o texto + attention
+                    +"font-mono font-semibold "                                         // Estilo default para o texto
+                    +"px-2 py-1 "                                                       // Espaçamento horizontal e vertical
+                    +"rounded-md "                                                      // Border arrendondada
+                    +"transition ease-in-out ring-sky-600 ring-offset-1 hover:ring-2 ", // Estilo para hover (só funciona em localhost, não sei porquê)
+        "S_loading": "border border-amber-500 bg-amber-200/10 ring-amber-500 ",         // Igual a Warning
+        "S_error":   "border border-rose-600 bg-rose-200/10 ring-rose-600 ",            // Igual a Important
+    }
 
-                "Gray":       "text-gray-400 border-gray-200 bg-gray-200/10 ring-gray-200",
-                "Fallback":   "text-slate-700 ring-slate-700",
+    export default {
+        components: { Attention },
+        props: { valueData: Object },
+        computed: {
+            options()          { return this.valueData['ValueCustomize'][0] },
+            view()             { return this.options['View'] },
+            attention()        { return this.options['AttentionInfo'] },
+            attentionClasses() { return this.options['AttentionClasses'] },
+            unit()             { return this.options['Unit'] },
+            state()            { return this.valueData.dash_info && this.valueData.dash_info.state || "" },
+            updating()         { return this.state == "updating" || this.state == "loading" },
+            classes()          { return (this.options['ValueClasses'] || "Default Info") + " S_"+this.valueData.dash_info.state },
+            link()             { return this.valueData.dash_info.href + (this.view ? "?&av=" + this.view : "") },
+            expandedClasses()  { return this.classes.split(/\s/).map(c => specialClasses[c] || c ).join(" ") },
+            value() {
+                if(this.valueData.dash_info.state == "loading") return "L"
+                if(this.valueData.dash_info.state == "error") return "E"
+                if(isNaN(this.valueData.dash_info.value)) {
+                    return this.valueData.dash_info.value
+                } else {
+                    return new Intl.NumberFormat('en-US', {maximumFractionDigits: 0}).format(this.valueData.dash_info.value) 
+                }
             }
-
-            if(this.valueData.dash_info.state == "loading") return c + " " + lookup["Warning"]
-            if(this.valueData.dash_info.state == "error") return c + " " + lookup["Important"]
-
-            return c + " " + (this.valueData.dash_info.value == 0 ? lookup["Gray"] : lookup[this.valueData.style] ? lookup[this.valueData.style] : lookup["Fallback"])
         }
     }
-}
 </script>

package/templates/dashboards/dash/src/dashboard.html

@@ -18,7 +18,7 @@
     </head>
     <body>
 <% } %>
-      <style>section.custom-resource{visibility: hidden;opacity:0;}</style>
+      <style>section.custom-resource{visibility: hidden;opacity:0;left:0px;right:0px;bottom:0px;padding:0px;}</style>
       <div id="app"></div>
       <script>           
             // mimes: .cob-app tem estilos globais que se aplicam a elementos vuetify que mudam o aspecto previsto