cob-cli 2.13.1 → 2.13.2

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" />
     </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))
 
@@ -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,95 @@ 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": [{}],
+            }],
+            "ShareLink": "",
+        },
+        "Filter": {
+            "FilterCustomize": [{
+                "FilterClasses": ""
+            }],
+            "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 +146,50 @@ 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'])) // Return DashInfo, which is used by the component
+                    }
+                    return v
                 })
             })
         }
     }))
     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,30 @@
 <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" />
+            <Kibana v-if="item['Component'] == 'Kibana'" :component="item" :key="i" />
+            <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 },
+        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,24 @@
+<template>
+    <div :class="classes" :style="image" >
+        <div :class="width + ' ' + grid">
+            <Board v-for="(board,i) in boards" :board="board" :key="i"/>
+        </div>
+    </div>
+</template>
+
+<script>
+    import Board from './Board.vue'
+
+    export default {
+        components: { Board },
+        props: { dashboard: 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,58 @@
+<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="Pesquisar ..."
+        ></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'] || "" },
+            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>