Dashing for Icinga 3.0.0

dnsmichi · October 17, 2019, 2:57pm

Milestone 3.0.0

Enhancements

Refine Icinga Dashboard #86
- Use ChartJS for Doughnut and Bar Charts
- Host/Service Overview Charts
- Connected Endpoints Charts
- Active Checks Charts
- Downtimes & Acknowledgement Charts
- Add clock widget with timezone
Provide Docker container dnsmichi/dashing-icinga2 #85
Add option to show only hard state problems #73 (thanks Dambakk)
Add timezone to clock widget #74 (thanks Dambakk)
Add title support for the Iframe widget for Icinga Web #90
Support either Dashing or Smashing as Ruby gem #88

Fixes

Version detection broken with Icinga 2.11 #83

MoeJoe · October 18, 2019, 11:10am

hy @dnsmichi

nice upgrade…

but i’ve got a small visual bug…

My “Problems” Tab and the “Statistics” tab are Empty…

And on the Tab “Endpoinzs”,“Downtimes”,“Acknowledements” the charts are inverse…

Enviroment:

Icinga 2.11.0-1
Icingaweb 2.7.2
Dashing 3.0
Director 1.7.0
Php 7.0.33

should i create a git issue ?

dnsmichi · October 18, 2019, 12:06pm

A new topic here please. Also add the diff from your modifications there.

Axel577 · November 27, 2019, 2:45pm

@MoeJoe
Hi Christian, how did you get that dark blue theme?

MoeJoe · November 27, 2019, 5:11pm

Ive changed the darkness from the dashing background Image in paint.Net… Thats all

melihoztok · October 4, 2021, 1:17pm

Hi Michael,

i am using dashing for icinga. i upload all your files for detailed dashing and restart dashing but nothing happens. i still have factory default view. What can i do?

dbodky · October 4, 2021, 1:36pm

Hi Melih,

in the meantime, Michael passed the project on to me. May I know which version of dashing-icinga2 you are currently running (git describe --long)? We changed the “default layout” to a more basic view with less different and intricate widgets after release 3.0.0, so maybe this is what you are seeing.

In any case, I’d need you to paste your dashboards/icinga2.erb file so I can see what should get rendered by Dashing.

melihoztok · October 5, 2021, 5:20am

Hi Daniel,

i am running Dashing v3.0.0-32-g5ed16c9. i download complete of files and folders from your git repo.

This is my icinga2.erb and my dashing screen

<script type='text/javascript'>
$(function() {
  // These settings override the defaults set in application.coffee. You can do this on a per dashboard basis.
  Dashing.widget_margins = [5,5]
  Dashing.widget_base_dimensions = [300,300]
  //Experimental: widget size based on window size.
  //Dashing.widget_base_dimensions = [$( window ).width()/5, $( window ).height()/2.2];
  Dashing.numColumns = 4
});
</script>

<% content_for :title do %>Icinga 2<% end %>
<div class="gridster">
  <ul>
    <!-- Statistics -->
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-view="Clock" data-title="Europe/Istanbul" data-timezone="Europe/Istanbul"></div>
    </li>

    <li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
      <div data-id="icinga-stats" data-view="List" data-unordered="true" data-title="Statistics"></div>
    </li>

    <!-- <li data-row="1" data-col="3" data-sizex="1" data-sizey="1">
      <div
        data-id="bar-chart-acks"
        data-view="Chartjs"
        data-type="horizontalBar"
        data-header="Acknowledgements"
        data-title="Acknowledgements"
        data-labels="Hosts,Services"
        data-colornames="blue,green"
        data-datasets="42,404"
        data-height="300"
        data-width="300"
      ></div>
    </li> -->


    <!-- <li data-row="2" data-col="1" data-sizex="1" data-sizey="1">
      <div
        data-id="doughnut-pie-hosts"
        data-view="Chartjs"
        data-type="doughnut"
        data-title="Hosts"
        data-labels="Up,Down"
        data-colornames="green,red"
        data-datasets="20,13"
        data-height="300"
        data-width="300"
      ></div>
    </li>
    <li data-row="2" data-col="2" data-sizex="1" data-sizey="1">
      <div
        data-id="doughnut-pie-services"
        data-view="Chartjs"
        data-type="doughnut"
        data-title="Services"
        data-labels="OK,Warning,Critical,Unknown"
        data-colornames="green,yellow,red,purple"
        data-datasets="20,13,12,0"
        data-height="300"
        data-width="300"
      ></div>
    </li> -->

    <!-- Service and Hosts wie im alten Dashboard -->
    <li data-row="2" data-col="1" data-sizex="1" data-sizey="1">
      <div
           data-id="icinga-host-meter"
           data-view="Meter"
           data-title="Host Problems"
           data-min="0"
           data-max="100"
      ></div>
    </li>
    <li data-row="2" data-col="2" data-sizex="1" data-sizey="1">
      <div 
           data-id="icinga-service-meter"
           data-view="Meter"
           data-title="Service Problems"
           data-min="0" data-max="100"
      ></div>
    </li>

    <!-- <li data-row="2" data-col="3" data-sizex="1" data-sizey="1">
      <div
        data-id="bar-chart-downtimes"
        data-view="Chartjs"
        data-type="horizontalBar"
        data-header="Downtimes"
        data-title="Downtimes"
        data-labels="Hosts,Services"
        data-colornames="blue,green"
        data-datasets="42,404"
        data-height="300"
        data-width="300"
      ></div>
    </li> -->

    <!-- <li data-row="2" data-col="3" data-sizex="1" data-sizey="1">
      <div
        data-id="bar-chart-endpoints"
        data-view="Chartjs"
        data-type="bar"
        data-header="Endpoints"
        data-title="Endpoints"
        data-labels="Connected,Not Connected"
        data-colornames="green,red"
        data-datasets="42,404"
        data-height="300"
        data-width="300"
      ></div>
    </li> -->

    

    <!-- <li data-row="2" data-col="1" data-sizex="1" data-sizey="1">
      <div
        data-id="bar-chart-checks"
        data-view="Chartjs"
        data-type="horizontalBar"
        data-header="Active Checks"
        data-title="Active Checks"
        data-labels="Hosts/min,Services/min"
        data-colornames="aqua,lime"
        data-datasets="42,404"
        data-height="300"
        data-width="300"
      ></div>
    </li> -->

    <!-- Problems -->
    <!--
    <li data-row="1" data-col="3" data-sizex="1" data-sizey="1">
      <div data-id="icinga-host-meter" data-view="Meter" data-title="Host Problems" data-min="0" data-max="100"></div>
    </li>
    <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">
      <div data-id="icinga-service-meter" data-view="Meter" data-title="Service Problems" data-min="0" data-max="100"></div>
    </li>
    -->

    <!-- Handled -->
    <!--
    <li data-row="2" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="handled-stats" data-view="List" data-unordered="true" data-title="Handled"></div>
    </li>
    -->
    <!-- Unhandled Host and Service Problems -->
    <!--
    <li data-row="2" data-col="2" data-sizex="1" data-sizey="1">
      <div data-id="icinga-host-problems" data-view="Simplelist" data-title="Unhandled Hosts"></div>
    </li>
    <li data-row="2" data-col="3" data-sizex="1" data-sizey="1">
      <div data-id="icinga-service-problems" data-view="Simplelist" data-title="Unhandled Services"></div>
    </li>
    -->

    <!-- Takes two rows for all service problems by severity -->
    <li data-row="1" data-col="3" data-sizex="2" data-sizey="2">
      <div data-id="icinga-severity" data-view="List" data-unordered="true" data-title="Service and Host Problems"></div>
    </li>

    <!-- Icinga Web 2 iFrame. getIcingaWeb2Url() is defined in config.ru and reads from config/icinga2*.json -->
    <!-- <li data-row="3" data-col="1" data-sizex="2" data-sizey="2">
      <div data-id="iframe" data-view="Iframe" data-title="Icinga Web Host Problems" data-url="<%=getIcingaWeb2Url()%>/monitoring/list/hosts?host_problem=1&sort=host_severity&showFullscreen&showCompact"></div>
    </li>
    <li data-row="3" data-col="3" data-sizex="2" data-sizey="2">
      <div data-id="iframe" data-view="Iframe" data-title="Icinga Web Service Problems" data-url="<%=getIcingaWeb2Url()%>/monitoring/list/services?service_problem=1&sort=service_severity&dir=desc&showFullscreen&showCompact"></div>
    </li>-->
  </ul>

</div>

dbodky · October 5, 2021, 8:10am

Hi Melih,

good news: You are running the most recent version and got all the stuff you need right there in your dashboards/icinga2.erb file. Just uncomment the widget definitions for the flashier ChartJS widgets by deleting the  markers around the respective <li> [...] </li> blocks.

Best,
Daniel

melihoztok · October 7, 2021, 8:36am

Hi Daniel,

Thank you for your support. The template worked as well as it could when I deleted the marks. But I still have minor problems. First, the charts show no data about “Hosts”. The second problem is iframe authentication. Our icinga website is loaded in ifram but stuck login screen. This my new icinga.erb and i add the new screenshots. Thanks a lot.

<script type='text/javascript'>
$(function() {
  // These settings override the defaults set in application.coffee. You can do this on a per dashboard basis.
  Dashing.widget_margins = [5,5]
  Dashing.widget_base_dimensions = [300,300]
  //Experimental: widget size based on window size.
  //Dashing.widget_base_dimensions = [$( window ).width()/5, $( window ).height()/2.2];
  Dashing.numColumns = 4
});
</script>

<% content_for :title do %>Icinga 2<% end %>
<div class="gridster">
  <ul>

  <!--Statistics -->
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-view="Clock" data-title="Europe/Istanbul" data-timezone="Europe/Istanbul"></div>
    </li>

    <li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
      <div data-id="icinga-stats" data-view="List" data-unordered="true" data-title="Statistics"></div>
    </li>

    <li data-row="1" data-col="3" data-sizex="1" data-sizey="1">
      <div
        data-id="bar-chart-acks"
        data-view="Chartjs"
        data-type="horizontalBar"
        data-header="Acknowledgements"
        data-title="Acknowledgements"
        data-labels="Hosts,Services"
        data-colornames="blue,green"
        data-datasets="42,404"
        data-height="300"
        data-width="300"
      ></div>
    


    <li data-row="2" data-col="1" data-sizex="1" data-sizey="1">
      <div
        data-id="doughnut-pie-hosts"
        data-view="Chartjs"
        data-type="doughnut"
        data-title="Hosts"
        data-labels="Up,Down"
        data-colornames="green,red"
        data-datasets="20,13"
        data-height="300"
        data-width="300"
      ></div>
    </li>

    <li data-row="2" data-col="2" data-sizex="1" data-sizey="1">
      <div
        data-id="doughnut-pie-services"
        data-view="Chartjs"
        data-type="doughnut"
        data-title="Services"
        data-labels="OK,Warning,Critical,Unknown"
        data-colornames="green,yellow,red,purple"
        data-datasets="20,13,12,0"
        #data-height="200"
        #data-width="200"
      ></div>
    </li>

      <!--Service and Hosts wie im alten Dashboard -->
    <li data-row="2" data-col="1" data-sizex="1" data-sizey="1">
      <div
           data-id="icinga-host-meter"
           data-view="Meter"
           data-title="Host Problems"
           data-labels="OK,Warning,Critical,Unknown"
           data-colornames="green,yellow,red,purple"
           data-datasets="20,13,12,0"
           data-min="0"
           data-max="100"
      ></div>
    </li>
    
    <li data-row="2" data-col="2" data-sizex="1" data-sizey="1">
      <div 
           data-id="icinga-service-meter"
           data-view="Meter"
           data-title="Service Problems"
           data-min="0" 
           data-max="100"
           data-labels="Min,Max"
           data-colornames="green,red"
      ></div>
    </li>

    <li data-row="2" data-col="3" data-sizex="1" data-sizey="1">
      <div
        data-id="bar-chart-downtimes"
        data-view="Chartjs"
        data-type="horizontalBar"
        data-header="Downtimes"
        data-title="Downtimes"
        data-labels="Hosts,Services"
        data-colornames="blue,green"
        data-datasets="42,404"
        data-height="300"
        data-width="300"
      ></div>
    </li>

    <li data-row="2" data-col="3" data-sizex="1" data-sizey="1">
      <div
        data-id="bar-chart-endpoints"
        data-view="Chartjs"
        data-type="bar"
        data-header="Endpoints"
        data-title="Endpoints"
        data-labels="Connected,Not Connected"
        data-colornames="green,red"
        data-datasets="42,404"
        data-height="300"
        data-width="300"
      ></div>
    </li>

    <li data-row="2" data-col="1" data-sizex="1" data-sizey="1">
      <div
        data-id="bar-chart-checks"
        data-view="Chartjs"
        data-type="horizontalBar"
        data-header="Active Checks"
        data-title="Active Checks"
        data-labels="Hosts/min,Services/min"
        data-colornames="aqua,lime"
        data-datasets="42,404"
        data-height="300"
        data-width="300"
      ></div>
    </li>

    <!-- Problems -->
        <li data-row="1" data-col="3" data-sizex="1" data-sizey="1">
      <div data-id="icinga-host-meter" data-view="Meter" data-title="Host Problems" data-min="0" data-max="100"></div>
    </li>

    <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">
      <div data-id="icinga-service-meter" data-view="Meter" data-title="Service Problems" data-min="0" data-max="100"></div>
    </li>
    
    <!-- Handled
        <li data-row="2" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="handled-stats" data-view="List" data-unordered="true" data-title="Handled"></div>
    </li>
    
         Unhandled Host and Service Problems
        <li data-row="2" data-col="2" data-sizex="1" data-sizey="1">
      <div data-id="icinga-host-problems" data-view="Simplelist" data-title="Unhandled Hosts"></div>
    </li>

    <li data-row="2" data-col="3" data-sizex="1" data-sizey="1">
      <div data-id="icinga-service-problems" data-view="Simplelist" data-title="Unhandled Services"></div>
    </li>
    -->

    <!-- Takes two rows for all service problems by severity -->
    <li data-row="1" data-col="3" data-sizex="2" data-sizey="2">
      <div data-id="icinga-severity" data-view="List" data-unordered="true" data-title="Service and Host Problems"></div>
    </li>

    <!-- Icinga Web 2 iFrame. getIcingaWeb2Url() is defined in config.ru and reads from config/icinga2*.json -->
    <li data-row="3" data-col="1" data-sizex="2" data-sizey="2">
      <div data-id="iframe" data-view="Iframe" data-title="Icinga Web Host Problems" data-url="<admin:dq27Zh@%=getIcingaWeb2Url()%>/monitoring/list/hosts?host_problem=1&sort=host_severity&showFullscreen&showCompact"></div>
    </li>
    <li data-row="3" data-col="3" data-sizex="2" data-sizey="2">
      <div data-id="iframe" data-view="Iframe" data-title="Icinga Web Service Problems" data-url="<%=getIcingaWeb2Url()%>/monitoring/list/services?service_problem=1&sort=service_severity&dir=desc&showFullscreen&showCompact"></div>
    </li>
  </ul>

</div>

dbodky · October 7, 2021, 10:11am

Hi Melih,

thanks for the update. Regarding Icingaweb2: Just log into Icingaweb2 once and keep the browser session open. Dashing-Icinga2 was developed with permanent dashboards in mind, displayed e.g. on a TV mounted to a wall without much user interaction. If you end your browser session, you will have to log into Icingaweb2 again the next time you start your browser.

For your host problem, I have no obvious solution, my setup (same as yours on dashing-icinga2’s side with all widgets enabled) shows the correct information.

Could you share the output of

$ curl -ksSi -u <api_user:api_password> https://<apihost:apiport>/v1/status/CIB

with us, please? The data for the Hosts widget is taken directly from this API response and this might provide some insight.

melihoztok · October 7, 2021, 10:41am

Daniel,

OK i unterstand the iframe issue. Here is my output;

HTTP/1.1 200 OK
Server: Icinga/2.11.4-1
Content-Type: application/json
Content-Length: 1438

{"results":[{"name":"CIB","perfdata":[],"status":{"active_host_checks":0.9166666666666666,"active_host_checks_15min":833.0,"active_host_checks_1min":55.0,"active_host_checks_5min":281.0,"active_service_checks":5.233333333333333,"active_service_checks_15min":4933.0,"active_service_checks_1min":314.0,"active_service_checks_5min":1634.0,"avg_execution_time":0.5307904125278832,"avg_latency":0.17841160253727392,"current_concurrent_checks":8.0,"current_pending_callbacks":0.0,"max_execution_time":12.817291975021362,"max_latency":1.1027369499206543,"min_execution_time":0.0,"min_latency":0.0,"num_hosts_acknowledged":0.0,"num_hosts_down":0.0,"num_hosts_flapping":0.0,"num_hosts_handled":0.0,"num_hosts_in_downtime":1.0,"num_hosts_pending":0.0,"num_hosts_problem":0.0,"num_hosts_unreachable":0.0,"num_hosts_up":126.0,"num_services_acknowledged":0.0,"num_services_critical":14.0,"num_services_flapping":0.0,"num_services_handled":9.0,"num_services_in_downtime":65.0,"num_services_ok":799.0,"num_services_pending":0.0,"num_services_problem":20.0,"num_services_unknown":4.0,"num_services_unreachable":0.0,"num_services_warning":2.0,"passive_host_checks":0.0,"passive_host_checks_15min":0.0,"passive_host_checks_1min":0.0,"passive_host_checks_5min":0.0,"passive_service_checks":0.4,"passive_service_checks_15min":363.0,"passive_service_checks_1min":24.0,"passive_service_checks_5min":120.0,"remote_check_queue":0.0,"uptime":47826.36212897301}}]}

dbodky · October 7, 2021, 10:53am

Thank you.

the response looks fine and the relevant data in num_hosts_up and num_hosts_down should lead to rendering a pie chart with just one colour (it does for me, using the same repository version).

Could you disable every single widget in your dashboard/icinga2.erb by commenting them out, except for this one and check if this resolves the problems?

<li data-row="2" data-col="1" data-sizex="1" data-sizey="1">
      <div
        data-id="doughnut-pie-hosts"
        data-view="Chartjs"
        data-type="doughnut"
        data-title="Hosts"
        data-labels="Up,Down"
        data-colornames="green,red"
        data-datasets="20,13"
        data-height="300"
        data-width="300"
      ></div>
</li>

The problem might be due to Dashing rendering too many widgets in the same place, since some of the available widget declarations in dashboards/icinga2.erb overlap if you activate them at the same time.

Edit: Try reloading the page once after starting dashing. I noticed that upon loading the dashboard the first time after starting the server, the same widget would not get rendered. A refresh did the trick for me.

melihoztok · October 7, 2021, 11:48am

Daniel,

I will try this at nigth. What does it mean "data-datasets=“20,13"” ? Should i change it?

dbodky · October 7, 2021, 12:01pm

This is a default dataset which is used when you run the dashboard without a valid API backend to query. Basically mock values in order to display an example view. Thanks for trying my suggestions, I would ask you to open an issue over at https://github.com/mocdaniel/dashing-icinga2 in case your problems persist afterwards, we had quite a conversation in here already

Best,
Daniel

NiclasE · March 27, 2024, 9:36am

First of all… great and simple dashboard.
I just have a question. Is it possible to alter the queries a bit so for instance I can instead of just showing host up/down base that query on host templates? An example: I have a host template for Windows servers, and another for network snmp devices. I would like to split them in the dashboard so I can see if a window server or network device is down. Is that possible?

NiclasE · March 27, 2024, 4:42pm

Just noticed I replied to a very old thread… so maybe a Ping @dbodky will help