search

MarcusCalidus / marcuscalidus-svg-panel

Grafana panel for displaying metric sensitive SVG images using the snap svg library
MIT License
62 stars 28 forks source link

How can I map a mssql query output to update a svg dashboard ? #39

Open Brun0fl opened 5 years ago

Brun0fl commented 5 years ago

Hi I am using a mssql query to get server Name, status and response time.

SELECT Sysname, Status and Responsetime FROM ServersTable Where Sysname = "h0h1coreA" OR Sysname = "h0h1coreB" the svg file I created is the following: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 210 297"><rect width="144.807" height="78.951" x="14.406" y="88.022" ry=".13" fill="#fff" transform="matrix(1.91082 0 0 2.08525 -79.068 -138.367)"/><g stroke-width=".816" transform="matrix(1.91082 0 0 2.08525 -79.068 -138.367)"><path d="M52.012 126.788v5.725" fill="none" stroke="#999"/><rect ry="0" y="132.65" x="30.131" height="21.404" width="43.762" fill="#f9f9f9" stroke="#999" stroke-linecap="round" stroke-linejoin="round"/><rect ry="1.06" y="101.566" x="45.195" height="24.948" width="13.633" fill="#fff6d5" stroke="#4f4d4d" stroke-linecap="round" stroke-linejoin="round"/></g><g fill="#59f" transform="matrix(1.91082 0 0 2.08525 -79.068 -138.367)"><path d="M59.251 111.324a3.461 3.555-1.453 0 1 3.07 1.748 3.461 3.555-1.453 0 1 .01 3.602 3.461 3.555-1.453 0 1-3.06 1.757l.07-3.554z" stroke="gray" stroke-width=".1" stroke-linecap="round" stroke-linejoin="round"/><path d="M62.686 114.756l20.233.02" stroke="#2a7fff" stroke-width=".264"/><path d="M87.215 114.756l20.723.02" stroke="#2a7fff" stroke-width=".267"/><ellipse cx="85.088" cy="114.679" rx="2.171" ry="2.114"/><path d="M111.42 111.324a3.461 3.555 1.453 0 0-3.07 1.748 3.461 3.555 1.453 0 0-.009 3.602 3.461 3.555 1.453 0 0 3.06 1.757l-.07-3.554z" stroke="gray" stroke-width=".1" stroke-linecap="round" stroke-linejoin="round"/></g><g transform="matrix(1.91082 0 0 2.08525 48.336 -138.367)" stroke-width=".816"><path d="M52.012 126.788v5.725" fill="none" stroke="#999"/><rect width="43.762" height="21.404" x="30.131" y="132.65" ry="0" fill="#f9f9f9" stroke="#999" stroke-linecap="round" stroke-linejoin="round"/><rect width="13.633" height="24.948" x="45.195" y="101.566" ry="1.06" fill="#fff6d5" stroke="#4d4d4d" stroke-linecap="round" stroke-linejoin="round"/></g><g transform="matrix(1.91082 0 0 2.08525 -79.068 -138.367)"><rect ry="1.06" y="104.838" x="46.968" height="4.908" width="10.088" fill="#0f0" stroke="#4d4d4d" stroke-width=".816" stroke-linecap="round" stroke-linejoin="round"/><rect transform="translate(66.675)" width="10.088" height="4.908" x="46.968" y="104.838" ry="1.06" fill="#0f0" stroke="#4d4d4d" stroke-width=".816" stroke-linecap="round" stroke-linejoin="round"/><text style="line-height:1.25;-inkscape-font-specification:'IBM Plex Sans'" x="31.597" y="137.676" font-weight="400" font-size="3.528" font-family="IBM Plex Sans" letter-spacing="0" word-spacing="0" stroke-width=".265"><tspan x="31.597" y="137.676">Node-name</tspan></text><text y="148.259" x="31.597" style="line-height:1.25;-inkscape-font-specification:'IBM Plex Sans'" font-weight="400" font-size="3.528" font-family="IBM Plex Sans" letter-spacing="0" word-spacing="0" stroke-width=".265"><tspan y="148.259" x="31.597">STATUS</tspan></text><text y="137.863" x="99.323" style="line-height:1.25;-inkscape-font-specification:'IBM Plex Sans'" font-weight="400" font-size="3.528" font-family="IBM Plex Sans" letter-spacing="0" word-spacing="0" stroke-width=".265" id="nodename"><tspan y="137.863" x="99.323">Node-name</tspan></text><text style="line-height:1.25;-inkscape-font-specification:'IBM Plex Sans'" x="99.323" y="148.446" font-weight="400" font-size="3.528" font-family="IBM Plex Sans" letter-spacing="0" word-spacing="0" stroke-width=".265" id="nodestatus"><tspan x="99.323" y="148.446">STATUS</tspan></text><rect width="27.315" height="6.735" x="72.029" y="99.621" ry=".13" fill="#f9f9f9" stroke="#999" stroke-width=".1" stroke-linecap="round" stroke-linejoin="round"/><text style="line-height:1.25;-inkscape-font-specification:'IBM Plex Sans'" x="79.691" y="104.22" font-weight="400" font-size="3.528" font-family="IBM Plex Sans" letter-spacing="0" word-spacing="0" stroke-width=".265" id="responsetime"><tspan x="79.691" y="104.22">000 ms</tspan></text></g></svg>

I would like to know how can I map the SQL query output to the field ids in the svg. Is there an available example I could use? Thanks

MarcusCalidus commented 5 years ago

it would be interesting to know what the data object looks like that is passed in on handle metric.

maybe you could post the output of (copy from Chrome developer console) console.log(JSON.stringify(ctrl.data));

Brun0fl commented 5 years ago

Hi Marcus, Thanks for your response. I am kind of new on Grafana and js, not sure if I did it the right way, but when I executed the command in chrome's dev console I got a ReferenceError stating crtl.data is not defined.

VM383:1 Uncaught ReferenceError: ctrl is not defined at :1:28

Brun0fl commented 5 years ago

Do you happen to have or know where can I find any working example of a svg panel using any relational DB as datasource? I think having a working panel with sql datasource will make it easier for me to figure out how to proceed.