Freeboard / freeboard

A damn-sexy, open source real-time dashboard builder for IOT and other web mashups. A free open-source alternative to Geckoboard.
http://freeboard.io
MIT License
6.45k stars 1.2k forks source link

Mess after loading stored dashboard #70

Closed marbetschar closed 9 years ago

marbetschar commented 9 years ago

I'm currently trying to implement freeboard in our environment. Therefore I've added a server backend which stores the dashboard configuration object as json (sent to a REST API).

Storing and retrieving the information works like a charm, but as soon as freeboard tries to render a loaded dashboard, it just places all panes on top of each other. Please see the following two screenshot (before and after loading). Any ideas how I can fix this?

bildschirmfoto 2014-11-09 um 08 23 01

bildschirmfoto 2014-11-09 um 08 23 26 (Clock pane slightly moved sideways so you can see the other panes are below of it)

leon-vd commented 9 years ago

Can you show your serialized dashboard JSON?

I've noticed it doesn't update the position of the panes when you move them, so when you call 'freeboard.serialize()' it just returns their original position. On my local copy, it still adds them in their original positions when I load them, unlike your example above. If you resize the dashboard afterwoods, does it put them properly?

marbetschar commented 9 years ago

Hi @daleroy1!

Thank you very much for your help!!

Unfortunately it does not put them properly after loading the serialized configuration and resizing the dashboard :(

Here's my serialized JSON:

   {
         "plugins":[

         ],
         "version":1,
         "panes":[
            {
               "col_width":1,
               "col":{
                  "3":"",
                  "4":"",
                  "8":""
               },
               "widgets":[
                  {
                     "settings":{
                        "height":6,
                        "html":"datasources[\"Business Analyst - Top Sites\"][\"items\"]"
                     },
                     "type":"html"
                  }
               ],
               "width":1,
               "row":{
                  "3":"",
                  "4":"",
                  "8":""
               },
               "title":"Business Analyst - Top Sites"
            },
            {
               "col_width":1,
               "col":{
                  "3":"",
                  "4":"",
                  "8":""
               },
               "widgets":[
                  {
                     "settings":{
                        "height":6,
                        "html":"datasources[\"biz! - Aktionen\"][\"items\"]"
                     },
                     "type":"html"
                  }
               ],
               "width":1,
               "row":{
                  "3":"",
                  "4":"",
                  "8":""
               },
               "title":"biz! - Aktionen"
            },
            {
               "col_width":1,
               "col":{
                  "3":"",
                  "4":"",
                  "8":""
               },
               "widgets":[
                  {
                     "settings":{
                        "height":6,
                        "html":"datasources[\"biz! - Kunden\"][\"items\"]"
                     },
                     "type":"html"
                  }
               ],
               "width":1,
               "row":{
                  "3":"",
                  "4":"",
                  "8":""
               },
               "title":"biz! - Kunden"
            },
            {
               "col_width":1,
               "col":{
                  "3":"",
                  "4":"",
                  "8":""
               },
               "widgets":[
                  {
                     "settings":{
                        "rows":2,
                        "current_time":"datasources[\"Zeit\"][\"date_object\"]"
                     },
                     "type":"clock"
                  }
               ],
               "width":1,
               "row":{
                  "3":"",
                  "4":"",
                  "8":""
               }
            }
         ],
         "allow_edit":true,
         "datasources":[
            {
               "settings":{
                  "refresh":1
               },
               "name":"Zeit",
               "type":"clock"
            },
            {
               "settings":{
                  "url":"http:\/\/analytics.mandelkind.ch\/api\/index.cfm?endpoint=\/records&reload=true&resolve=true&orderby=viewcount%20desc&appName=Business%20Analyst&&groupBy=entry&format=html$table",
                  "refresh":5,
                  "use_thingproxy":true,
                  "method":"GET"
               },
               "name":"Business Analyst - Top Sites",
               "type":"JSON"
            },
            {
               "settings":{
                  "url":"http:\/\/analytics.mandelkind.ch\/api\/index.cfm?endpoint=\/records&limit=20&format=html$table&appName=biz&groupBy=category,entry",
                  "refresh":5,
                  "use_thingproxy":true,
                  "method":"GET"
               },
               "name":"biz! - Aktionen",
               "type":"JSON"
            },
            {
               "settings":{
                  "url":"http:\/\/analytics.mandelkind.ch\/api\/index.cfm?endpoint=\/records&reload=true&resolve=true&orderby=viewcount%20desc&appName=biz&groupBy=customer&format=html$table",
                  "refresh":5,
                  "use_thingproxy":true,
                  "method":"GET"
               },
               "name":"biz! - Kunden",
               "type":"JSON"
            }
         ],
         "columns":8
      }
leon-vd commented 9 years ago

Your panes are missing the row/col values.

You need to put a col/row value as a number for each size, so for 8 columns, it would look like for one of the panes:

"row":{"8":1} "col":{"8":2}

marbetschar commented 9 years ago

How do I append these? Shouldn't freeboard.serialize() also serialize these values? So I assume it's a bug?

leon-vd commented 9 years ago

From what i can tell, freeboard.serialize() only picks up the initial row/col values of the panes when they are created. If you move them, it doesn't actually update the pane itself with the new values, even though there is code to pick up these changes. Having said that, serialize() shoudl pick up the initial ones ok.

If you create a new dashboard and drop a pane on it and call serialize, does it generate those values?

marbetschar commented 9 years ago

That's what I got if I add a new dashboard and a new pane and call freeboard.serialize afterwards:

{
  "version":1,
  "allow_edit":true,
  "plugins":[

  ],
  "panes":[
     {
        "width":1,
        "row":{
           "3":1
        },
        "col":{
           "3":1
        },
        "col_width":1,
        "widgets":[

        ]
     }
  ],
  "datasources":[

  ],
  "columns":null
}
leon-vd commented 9 years ago

That shows it's working. If you recreate your original one and serailize() does it give the row/col values? You otherwise could edit the JSON that you've stored for it and put the values in.

marbetschar commented 9 years ago

Mhm, I'm note quite sure when the error happens. So I created two snapshots using freeboard.serialize():

This is immediately after creating a new dashboard with new aligned panes:

{  
"version":1,
"allow_edit":true,
"plugins":[  

],
"panes":[  
    {  
        "width":1,
        "row":{  
            "3":1
        },
        "col":{  
            "3":3
        },
        "col_width":1,
        "widgets":[  

        ]
    },
    {  
        "width":1,
        "row":{  
            "3":1
        },
        "col":{  
            "3":1
        },
        "col_width":1,
        "widgets":[  

        ]
    },
    {  
        "width":1,
        "row":{  
            "3":1
        },
        "col":{  
            "3":2
        },
        "col_width":1,
        "widgets":[  

        ]
    }
],
"datasources":[  

],
"columns":null
}

And this is after reloading the configuration from the database:

{  
"version":1,
"allow_edit":true,
"plugins":[  

],
"panes":[  
    {  
        "width":1,
        "row":{  
            "3":0
        },
        "col":{  
            "3":0
        },
        "col_width":1,
        "widgets":[  

        ]
    },
    {  
        "width":1,
        "row":{  
            "3":0
        },
        "col":{  
            "3":0
        },
        "col_width":1,
        "widgets":[  

        ]
    },
    {  
        "width":1,
        "row":{  
            "3":0
        },
        "col":{  
            "3":0
        },
        "col_width":1,
        "widgets":[  

        ]
    }
],
"datasources":[  

],
"columns":3
}

seems like the positioning is lost after calling freeboard.loadDashboard() ?

leon-vd commented 9 years ago

Odd. Stupid question, but you've checked the JSON to make sure the values are there after loading from the database but before pushing it into .loadDashboard()? What's the loading code you're using?

marbetschar commented 9 years ago

Yeah, it seems absolutely odd :( That's what I pass to freeboard.loadDashboard() function in a $.ajax success event handler:

{  
    "plugins":[  

    ],
    "version":1,
    "panes":[  
        {  
            "col_width":1,
            "col":{  
                "3":""
            },
            "widgets":[  

            ],
            "width":1,
            "row":{  
                "3":""
            }
        },
        {  
            "col_width":1,
            "col":{  
                "3":""
            },
            "widgets":[  

            ],
            "width":1,
            "row":{  
                "3":""
            }
        },
        {  
            "col_width":1,
            "col":{  
                "3":""
            },
            "widgets":[  

            ],
            "width":1,
            "row":{  
                "3":""
            }
        }
    ],
    "allow_edit":true,
    "datasources":[  

    ],
    "columns":""
}

So if I'm right then the information is already missing here?

leon-vd commented 9 years ago

Yup. Looks like you're losing it somewhere in the database storage/retrieval stage. So it's not a freeboard issue as such.

marbetschar commented 9 years ago

Ok, I'll check this. Thank you very much for your help!!!

marbetschar commented 9 years ago

Thank you very much @daleroy1!! You pointed me into the right direction and now it's working like a charm! :)