cob-cli 2.13.1 → 2.14.0

package/templates/dashboards/dash/package.json

@@ -7,7 +7,7 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
-    "@cob/dashboard-info": "^2.4.1",
+    "@cob/dashboard-info": "^2.6.0",
     "@cob/rest-api-wrapper": "^2.1.6",
     "tailwindcss": "^3.0.23",
     "vue": "^2.6.11"

package/templates/dashboards/dash/src/App.vue

@@ -1,77 +1,121 @@
 <template>
-    <div>
-        <div v-if="state=='Loading'" class="text-center my-20 text-2xl text-slate-500">
+    <div class="h-full w-full">
+        <div v-if="dashboardState=='Loading'" class="text-center my-20 text-2xl text-slate-500">
             Loading...
         </div>
-        <div v-else-if="state=='Error'" class="text-center my-20 text-2xl text-error">
+        <div v-else-if="dashboardState=='Error'" class="text-center my-20 text-2xl text-red-500">
             {{error}}
         </div>
-        <Dashboard v-else :dashboard="dashboard" />
+        <Dashboard v-else :dashboard="dashboardParsed" :userInfo="userInfo" />
     </div>
 </template>
 
 <script>
-import axios from 'axios';
-import { umLoggedin } from '@cob/rest-api-wrapper';
-import { instancesList } from '@cob/dashboard-info';
-import Dashboard from './Dashboard.vue'
-import {parseDashboard} from './collector.js'
+    import axios from 'axios';
+    import { umLoggedin } from '@cob/rest-api-wrapper';
+    import { instancesList } from '@cob/dashboard-info';
+    import { parseDashboard } from './collector.js'
+    import Dashboard from './components/Dashboard.vue'
 
-export default {
-    name: 'App',
-    components: {
-        Dashboard
-    },
-    data: () => ({
-        userInfo: {},
-        state: "Loading",
-        error:"",
-        currentDashboardInstance: null,
-        dashboard: null,
-        page_title: null
-    }),
-    created() {
-        umLoggedin().then( userInfo => this.userInfo = userInfo )
-        //At the initial load we get the dashboard instance from the url
-        this.page_title = document.getElementById("dash").getAttribute('data-name')
-        this.currentDashboardInstance = instancesList("Dashboard", "page_title.raw:\"" + this.page_title + "\"", 1)
+    export default {
+        name: 'App',
+        components: { Dashboard },
+        data: () => ({
+            userInfo: null,
+            name: null,
+            error:"",
+            dashboardInstance: null,
+            dashboardParsed: null,
+            dashboardState: "Loading"
+        }),
+        created() {
+            // At the initial load we get the dashboard instance name from the url
+            umLoggedin().then( userInfo => {
+                let name =  document.getElementsByClassName("custom-resource")[0].getAttribute('data-name')
+                this.dashboardInstance = instancesList("Dashboard", this.getDashboardQuery(name , userInfo), 1)
+            })
 
-        $('section.custom-resource').on('resume', (e, params) => {
-            //register this callback to every anchor navigation. In these cases we get the dashboard instance from the first param to the callback
-            this.page_title = params[0]
-            this.currentDashboardInstance.changeArgs({query:"page_title.raw:\"" + this.page_title + "\""})
-        });
-    },
-    watch: {
-        'currentDashboardInstance.state'(state) {
-            if(state == "loading" || state == "updating") {
-                this.state = "Loading"
-            } else if(state == "error") {
-                this.error = "Error: error getting dashboard"
-                this.state = "Error"
-            } else if( this.currentDashboardInstance.value.length > 0) {
-                this.state = "Loading"
-                let instanceId = this.currentDashboardInstance.value[0].id
-                axios.get("/recordm/recordm/instances/" + instanceId)
-                    .then(resp => {
-                        try {
-                            this.dashboard = parseDashboard(resp.data)
-                            this.state = "Ready"
-                        }
-                        catch(e) {
-                            this.error = "Error: error processing dashboard " + instanceId
-                            this.state = "Error"
-                        }
-                    })
-                    .catch( (e) => {
-                        this.error = "Error: error getting dashboard " + instanceId
-                        this.state = "Error"
-                    })
-            } else {
-                this.error = "Error: dashboard '" + this.page_title + "' not found"
-                this.state = "Error"
+            // Upon anchor navigation we get the dashboard instance name from the first param to the 'resume' callback.
+            $('section.custom-resource').on('resume', (e, params) => {
+                //Recheck user (the user might have changed or his groups might have changed after previous load)
+                umLoggedin().then( userInfo => {
+                    this.dashboardInstance.changeArgs({query: this.getDashboardQuery(params[0], userInfo) })
+                })
+            });
+        }, 
+        methods: {
+            getDashboardQuery(name,userInfo) {
+                this.userInfo = userInfo
+                this.name = name
+                document.title = "Recordm["+name+"]" 
+                let groups = userInfo.groups.map(g=> "\"" + g.name + "\"").join(" OR ")
+
+                let nameQuery = "name.raw:\"" + name + "\" "
+                let accessQuery = " (groupaccess.raw:(" + groups + ") OR (-groupaccess:*) )"
+                return "(" + nameQuery + accessQuery +") OR id:" + name
+            }
+        },
+        watch: {
+            // Monitor state changes to the searching of the Dashboard instance
+            'dashboardInstance.state'(instanceInfoState) {
+                if(instanceInfoState == "loading" || instanceInfoState == "updating") {
+                    this.dashboardState = "Loading"
+                } else if(instanceInfoState == "error") {
+                    // Special treatment for 430 (unauthorized) error:
+                    if(this.dashboardInstance.errorCode == 403) {
+                        // check who's the new user:
+                        umLoggedin().then( userInfo => {
+                            if(userInfo.username == "anonymous") {
+                                // If the user is anonymous it means we timed out the cookie validity - reload at the same url
+                                document.location.reload()
+                            } else {
+                                // Otherwise the user changed (in another tab) OR the user groups changed OR the dashboards access groups changed
+                                // send to root
+                                document.location = "/"
+                            }
+                        })
+                    } else {
+                        this.dashboardState = "Error"
+                        this.error = "Error: error getting dashboard (" + this.dashboardInstance.errorCode + ")"
+                    }
+                } else if( this.dashboardInstance.value.length == 0) {
+                    this.dashboardState = "Error"
+                    this.error = "Error: a dashboard '" + this.name + "' was not found for your user"
+                }
+            },
+            
+            // Monitor value changes to the values of the Dashboard instance
+            'dashboardInstance.value'(newDashboards) {
+                if(newDashboards.length == 0) {
+                    this.dashboardState = "Error"
+                    this.error = "Error: dashboard '" + this.name + "' was not found for your user"
+                    return
+                }
+                //Instance(s) found (from ES) but we still need to get the raw instance of the 1st result(from RM) and parse it
+                let firstDashId = newDashboards[0].id
+                axios
+                .get("/recordm/recordm/instances/" + firstDashId)
+                .then(resp => {
+                    try {
+                        this.dashboardParsed = parseDashboard(resp.data, this.userInfo)
+                        this.dashboardState = "Ready"
+                    }
+                    catch(e) {
+                        this.error = "Error: error parsing dashboard " + firstDashId
+                        this.dashboardState = "Error"
+                        console.error(e)
+                    }
+                })
+                .catch( (e) => {
+                    if( e.response && e.response.status && e.response.status == 403) {
+                        this.error = "New authorization required..."
+                    } else {
+                        this.error = "Error: error getting dashboard " + firstDashId
+                    }
+                    this.dashboardState = "Error"
+                    console.error(e)
+                })
             }
         }
-    }
-};
-</script>
+    };
+</script>

package/templates/dashboards/dash/src/collector.js

@@ -1,6 +1,5 @@
 import * as dashFunctions from '@cob/dashboard-info';
 const linkFunction = (url, icon) => {    return { value: icon, href: url, state: undefined, isLink: true } }
-// dashFunctions["link"] = linkFunction // does not work on brower after deploy (only on localhost dev)
 
 const clone = (obj) => JSON.parse(JSON.stringify(obj))
 
@@ -12,7 +11,7 @@ function collect(bucket, source) {
         //Means that found one key in current source
         if (Array.isArray(bucket[sourceName])) {
             // Means type of value to collect is array
-            if( bucket[sourceName].length == 0  || bucket[sourceName][0]["Mark"] == "JUST COPY" ) {
+            if(bucket[sourceName].length === 0 || bucket[sourceName][0]["Mark"] === "JUST COPY" ) {
                 //Means the bucket template only specify to get the raw elements that match (empty array in bucket template or having first element signaled that it was originally an empty array)
                 source["Mark"] = "JUST COPY"       // Signal it was an empty array
                 source[sourceName] = source.value  // Add extra field with original name of the source
@@ -29,13 +28,18 @@ function collect(bucket, source) {
                     // Means it's additional source matches
                     initialBucketCopy = clone(bucket[sourceName][0].Initial_Template) // we use a copy of the previously copied template
                 } 
+                initialBucketCopy.instanceId = bucket.instanceId  //needed to build $file url 
                 children.reduce(collect,initialBucketCopy)    // collect values from the children
                 initialBucketCopy[sourceName] = source.value  // Add extra field with original name of the source
                 bucket[sourceName].push(initialBucketCopy)    // Add to bucket collector
             }
         } else {
             // Means it's not an array and we can collect the final value
-            bucket[sourceName] = source.value; 
+            if(source.value && source.fieldDefinition.description && source.fieldDefinition.description.indexOf("$file") >= 0) {
+                bucket[sourceName] = "/recordm/recordm/instances/" + bucket.instanceId + "/files/" + source.fieldDefinition.id + "/" + source.value
+            } else {
+                bucket[sourceName] = source.value; 
+            }
         }
     } else if (children.length > 0) {
         // Means it didn't find a match. Continue looking in the children
@@ -46,49 +50,97 @@ function collect(bucket, source) {
     return bucket;
 }
 
-function parseDashboard(raw_dashboard){
+function parseDashboard(raw_dashboard, userInfo){
     let dash = {
-        "Page Title": "",
-        "Grid Columns": "",
-        "Max Width": "",
-        "Board Title": [{
-            "Col Span": "",
-            "Row Span": "",
+        "Name": "",
+        "DashboardCustomize": [{
+            "Grid": "",
+            "Width": "",
+            "DashboardClasses": "",
+            "Image": "",
+            "GroupAccess": [{}]
+        }],
+        "Board": [{
+            "BoardCustomize": [{
+                "BoardClasses": "",
+                "Image": ""
+            }],
             "Component": []
         }],
     };
 
+    dash.instanceId = ""+raw_dashboard.id //needed to build $file url
     raw_dashboard.fields.reduce(collect, dash);
 
     const ComponentsTemplates = {
-        "Title": {
-            "Title": ""
+        "Label": {
+            "LabelCustomize": [{
+                "LabelClasses": "",
+                "Image": ""
+            }],
+            "Label": "",
+        },
+        "Menu": {
+            "MenuCustomize": [{
+                "MenuClasses": ""
+            }],
+            "Text": [{
+                "Link": "",
+                "TextCustomize": [{
+                    "TextClasses": "",
+                    "Icon": "",
+                    "TextAttention": "",
+                    "GroupVisibility": [{}]
+                }],
+            }],
         },
         "Totals" : {
-            "Header": [{
-                "Text": [{}],
-                "Style Header": ""
+            "TotalsCustomize": [{
+                "TotalsClasses": "",
+                "InputVarTotals": [{}],
             }],
             "Line": [{
-                "Style Line": "",
+                "LineCustomize": [{
+                    "LineClasses": "",
+                    "TitleClasses": "",
+                }],
                 "Value": [{
+                    "ValueCustomize": [{
+                        "ValueClasses": "",
+                        "View": "",
+                        "ValueAttention": "",
+                        "AttentionClasses": "",
+                        "Unit": "",
+                    }],
                     "Style Value": "",
                     "Arg": [{}]
                 }]
-            }]
+            }],
         },
-        "Menu": {
-            "Text": [{
-                "Link": "",
-                "Style Text": ""
-            }]
+        "Kibana": {
+            "KibanaCustomize": [{
+                "KibanaClasses": "",
+                "OutputVarKibana": "",
+                "InputVarKibana": [{}],
+                "InputQueryKibana": ""
+            }],
+            "ShareLink": "",
+        },
+        "Filter": {
+            "FilterCustomize": [{
+                "FilterClasses": "",
+                "Placeholder": ""
+            }],
+            "OutputVarFilter": "",
         }
     }
     
-    for( let board of dash["Board Title"]) {
+    for( let board of dash["Board"]) {
         let componentsList = clone([])
         for( let component of board["Component"]) {
+            if(component["Component"] == null) continue
             let componentTemplate = clone(ComponentsTemplates[component["Component"]])
+            componentTemplate.instanceId = ""+raw_dashboard.id //needed to $build file url
             component.fields.reduce(collect,componentTemplate)
             componentTemplate["Component"] = component.Component
             componentsList.push(componentTemplate)
@@ -96,28 +148,56 @@ function parseDashboard(raw_dashboard){
         board["Component"] = componentsList
     }
 
-    // remove all Initial_Templates added
-    dash = JSON.parse(JSON.stringify(dash, (k,v) => (k === 'Initial_Template')? undefined : v))
+    
+    
+    // remove all 'Initial_Templates' and 'instanceId' added for processing
+    dash = JSON.parse(JSON.stringify(dash, (k,v) => (k === 'Initial_Template' || k === 'instanceId')? undefined : v))
+    dash.vars = {} //Available to every components in component.vars
+    
+    // Add extra info to structure
+    dash["Board"].forEach(b => b.Component.forEach(c => {
+        // Add user info for permission evaluations
+        c.userInfo = userInfo
+        c.vars = dash.vars
 
-    // replace values in Totals by dashboard-info
-    dash["Board Title"].forEach(b => b.Component.forEach(c => {
-        if (c.Component == "Totals") {
+        if (c.Component === "Menu") {
+            c.Text.forEach(t => {
+                // If Attention is configured for this menu line then add attention status as user check
+                if(t["TextCustomize"][0]["TextAttention"]) {
+                    t["TextCustomize"][0].AttentionInfo = dashFunctions.instancesList("Dashboard-Attention","name.raw:" + t["TextCustomize"][0]["TextAttention"],1,0,{validity:30})
+                }
+            })
+        } else if (c.Component === "Totals") {
             c.Line.forEach(l => {
                 l.Value = l.Value.map(v => {
-                    if(v.Arg[2] && v.Arg[2].startsWith("{")) {
+                    if(v.Arg[2] && (v.Arg[2]+"").startsWith("{")) {
                         v.Arg[2] = JSON.parse(v.Arg[2])
                     }
-                    const valueFunction = v.Value != "link" ?  dashFunctions[v.Value] : linkFunction
-                    return ({
-                        dash_info: valueFunction.apply(this, v['Arg'].map( a => a['Arg'])), // Return DashInfo, which is used by the component
-                        style: v["Style Value"]
-                    })
+                    // If Attention is configured for this value line then add attention status as user check
+                    if(v["ValueCustomize"][0]["ValueAttention"]) {
+                        v["ValueCustomize"][0].AttentionInfo = dashFunctions.instancesList("Dashboard-Attention","name.raw:" + v["ValueCustomize"][0]["ValueAttention"],1,0,{validity:10})
+                    }
+
+                    if(v.Value === 'Label') {
+                        v.dash_info = {value: v.Arg[0].Arg, state:"ready"}
+                    } else if(v.Value === 'link') {
+                        v.dash_info = { value: icon, href: url, state: undefined, isLink: true }
+                    } else {
+                        // add dash-info values in Totals
+                        v.dash_info = dashFunctions[v.Value].apply(this, v['Arg'].map( a =>
+                            a['Arg'].replaceAll("__USERNAME__",c.userInfo.username)
+                        )) // Return DashInfo, which is used by the component
+                    }
+                    return v
                 })
             })
+        }else if (c.Component === "Kibana") {
+            if (c["KibanaCustomize"][0]["InputQueryKibana"] !== null) {
+                c["KibanaCustomize"][0]["InputQueryKibana"] = c["KibanaCustomize"][0]["InputQueryKibana"].replaceAll("__USERNAME__", c.userInfo.username)
+            }
         }
     }))
     return dash
-
 }
 
-export { parseDashboard, clone, collect }
+export { parseDashboard, clone, collect }

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

@@ -0,0 +1,30 @@
+<template>
+    <i v-if="attentionClasses" :class="attentionClasses" style="line-height: inherit;"></i>
+</template>
+
+<script>
+    export default {
+        props: { 
+            attentionInfo: Object,
+            classes: String
+        },
+        computed: {
+            inputClasses() { return this.classes || "fa-solid fa-circle pr-1 animate-pulse text-lg align-middle" },
+            attentionClasses() {
+                let attentionInfo = this.attentionInfo
+                if(attentionInfo && attentionInfo.value && attentionInfo.value[0]) {
+                    let severity =  attentionInfo.value[0].severity &&  attentionInfo.value[0].severity[0] || 0
+                    if (severity == 0) return ""
+                    
+                    let baseColor = severity > 0 ? "lime" : "red" 
+                    let severityAbs = Math.abs(severity)
+                    let colorIntensity = severityAbs > 4 ?  500 : severityAbs * 100
+                    let valenceColor = baseColor + (colorIntensity ? "-" + colorIntensity: "")
+                    return this.inputClasses + " " + "text-" + valenceColor
+                } else {
+                    return ""
+                }
+            }
+        }
+    }
+</script>

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

@@ -1,61 +1,33 @@
 <template>
-    <li :class="wrapperClass">
-        <div class="py-4 px-5 space-y-2">
-            <slot></slot>
-        </div>
-    </li>
+    <div :class="classes" :style="image" >
+        <template v-for="(item, i) in components">
+            <Label  v-if="item['Component'] == 'Label'"  :component="item" :key="i" />
+            <Menu   v-if="item['Component'] == 'Menu'"   :component="item" :key="i" />
+            <Totals v-if="item['Component'] == 'Totals'" :component="item" :key="i" :userInfo="userInfo"/>
+            <Kibana v-if="item['Component'] == 'Kibana'" :component="item" :key="i" :userInfo="userInfo"/>
+            <Filtro v-if="item['Component'] == 'Filter'" :component="item" :key="i" />
+        </template>
+    </div>
 </template>
 
 <script>
-export default {
-    props: {
-        rowSpan: String,
-        colSpan: String,
-        title: String,
-        showTitle: Boolean
-    },
-    computed: {
-        wrapperClass() {
-            const c = "w-full bg-cobbg rounded-md border border-cobline" // hover:ring-1 ring-slate-400/50 ring-offset-1;
+    import Label  from './Label.vue'
+    import Menu   from './Menu.vue'
+    import Totals from './Totals.vue'
+    import Kibana from './Kibana.vue'
+    import Filtro from './Filter.vue'
 
-            // Force possible dynamic classes to be loaded
-            const dynamicRowClasses = {
-                1:  "md:row-span-1",
-                2:  "md:row-span-2",
-                3:  "md:row-span-3",
-                4:  "md:row-span-4",
-                5:  "md:row-span-5",
-                6:  "md:row-span-6",
-                7:  "md:row-span-7",
-                8:  "md:row-span-8",
-                9:  "md:row-span-9",
-                10: "md:row-span-10",
-                11: "md:row-span-11",
-                12: "md:row-span-12",
-                "full": "md:row-span-full"
-            }
-            const rspan = this.rowSpan ? " " + dynamicRowClasses[this.rowSpan] : "";
-
-            // Force possible dynamic classes to be loaded
-            const dynamicColClasses = {
-                1:  "md:col-span-1",
-                2:  "md:col-span-2",
-                3:  "md:col-span-3",
-                4:  "md:col-span-4",
-                5:  "md:col-span-5",
-                6:  "md:col-span-6",
-                7:  "md:col-span-7",
-                8:  "md:col-span-8",
-                9:  "md:col-span-9",
-                10:  "md:col-span-10",
-                11:  "md:col-span-11",
-                12:  "md:col-span-12",
-                "full": "md:col-span-full"
-            }
-            const cspan = this.colSpan ?  " " + dynamicColClasses[this.colSpan] : ""; 
-
-            return c + rspan + cspan;
+    export default {
+        components: { Label, Menu, Totals, Kibana, Filtro },
+        props: {
+          board: Object,
+          userInfo: Object
+        },
+        computed: {
+            options()    { return this.board['BoardCustomize'][0] },
+            components() { return this.board['Component'] },
+            classes()    { return this.options['BoardClasses'] || "md:col-span-4 rounded-md border border-gray-300 p-4 m-1" },
+            image()      { return this.options['Image'] ? "background-image: url(" + this.options['Image'] +  ");" : "" }
         }
     }
-}
 </script>

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

@@ -0,0 +1,27 @@
+<template>
+    <div :class="classes" :style="image" >
+        <div :class="width + ' ' + grid">
+            <Board v-for="(board,i) in boards" :board="board" :key="i" :userInfo="userInfo"/>
+        </div>
+    </div>
+</template>
+
+<script>
+    import Board from './Board.vue'
+
+    export default {
+        components: { Board },
+        props: {
+          dashboard: Object,
+          userInfo: Object
+        },
+        computed: {
+            options() { return this.dashboard['DashboardCustomize'][0] },
+            boards()  { return this.dashboard['Board'] },
+            classes() { return this.options['DashboardClasses'] || "h-full bg-cover bg-center overflow-auto p-3" },
+            width()   { return this.options['Width']            || "max-w-6xl mx-auto" },
+            grid()    { return this.options['Grid']             || "grid grid-flow-row-dense md:grid-cols-12" },
+            image()   { return this.options['Image'] ? "background-image: url(" + this.options['Image'] +  ");" : "" }
+        }
+    }
+</script>

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

@@ -0,0 +1,59 @@
+<template>
+    <div class="flex h-fit pb-0 justify-center items-center">
+        <textarea :class="classes" 
+            v-model="inputContent" 
+            ref="textarea"
+            @keyup.enter="applyFilter"
+            @focus="resize"
+            @keyup="resize"
+            :placeholder="placeholder"
+        ></textarea>
+        <button @click="applyFilter" type="submit" class="max-h-11 p-2.5 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
+        </button>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: { component: Object },
+        data: () => ({
+            inputContent: "",
+            activeFilter: ""
+        }),
+        created() {
+            this.$nextTick(() => {
+                this.applyFilter()
+                this.resize()
+            })
+        },
+        updated() {
+            // Necessário para quando fazemos back para uma página com o inputContent preenchido mas que não está actualizada nas variáveis
+            if(this.activeFilter != this.component.vars[this.outputVar]) {
+                this.applyFilter()
+            }
+        },
+        computed: {
+            options()     { return this.component['FilterCustomize'][0] },
+            outputVar()   { return this.component['OutputVarFilter'] || "" },
+            placeholder() { return this.options['Placeholder']       || "Pesquisar ..." },
+            classes()     { return this.options['FilterClasses']     || "w-full max-w-xs resize-none min-h-min h-min border border-slate-300 rounded-md py-2 px-2 outline-slate-300 leading-5" },
+        },
+        methods: {
+            applyFilter: function() {
+                this.inputContent = this.inputContent.trim()
+                this.activeFilter = "(" + (this.inputContent ? this.inputContent.replace(/\n/,' ') : "*") +")"
+                this.$set(this.component.vars,this.outputVar,this.activeFilter)
+            },
+            resize() {
+                const { textarea } = this.$refs;
+                if(this.inputContent && ( textarea.textLength >= textarea.cols || this.inputContent.split("\n").length > 1) ) {
+                    textarea.style.height = "auto";
+                    textarea.style.height = (textarea.scrollHeight + 2) + 'px'; // Os 14px são do padding acrescentado
+                } else {
+                    textarea.style.height = "40px";
+                }
+            }
+        }
+    }
+</script>