If you look carefully at the URL of our shiny new dashboard, you will see that it actually says http://localhost:3030/sample and displays a sample dashboard that was automatically generated. We will use this sample dashboard to make some changes in order to display some metrics from our application directly as well as get some raw metrics from the Graphite data API endpoint.

To demonstrate how to connect the data from the application /actuator/metrics endpoint so as to display it in the Dashing dashboard, we will change the Buzzwords widget to display the counts of our data repositories, as follows:

1. Before we start, we will need to add the 'httparty', '>= 0.13.3' gem to the Gemfile file located in the bookpub_dashboard directory, which will enable us to use an HTTP client in order to extract the monitoring metrics from the HTTP endpoints.
2. After adding the gem, run the bundle command one more time to install the newly added gem.
3. Next, we will need to modify the sample.erb dashboard definition located in the bookpub_dashboard/dashboards directory, replacing <div data-id="buzzwords" data-view="List" data-unordered="true" data-title="Buzzwords" data-moreinfo="# of times said around the office"></div> with <div data-id="repositories" data-view="List" data-unordered="true" data-title="Repositories Count" data-moreinfo="# of entries in data repositories"></div>.
4. With the widget replaced, we will create a new data provisioning job file named repo_counters.rb in the bookpub_dashboard/jobs directory with the following content:

require 'httparty' 
 
repos = ['AuthorRepository', 'ReviewerRepository', 'BookRepository', 'PublisherRepository'] 
 
SCHEDULER.every '10s' do 
  data = JSON.parse(HTTParty.get("http://localhost:8081/metrics").body) 
  repo_counts = [] 
 
  repos.each do |repo| 
    current_count = data["counter.datasource.#{repo}"] 
    repo_counts << { label: repo, value: current_count } 
  end 
 
  send_event('repositories', { items: repo_counts }) 
end 

5. With all the code changes in place, let's start our dashboard by executing the dashing start command. Go to http://localhost:3030/sample in the browser to see our new widget displaying the data as shown in the following icon:

6. If we use the remote Shell to log in to the application, as we did earlier in this chapter, and add a publisher, we would see the counter on the dashboard increase.
7. Another way to push the data to the dashboard is to use their RESTful API. Let's update the text in the top left text widget by executing curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "text": "My RESTful dashboard update!" }' http://localhost:3030/widgets/welcome.

8. If everything has worked correctly, we should see the text updated to our new value, My RESTful dashboard update!, under the Hello title.

9. In an environment where multiple instances of the same application kind are running, it is probably not a good idea to directly pull the data from each node, especially if they are very dynamic and can come and go as they please. It is advised that you consume the data from a more static and well-known location, such as a Graphite instance. To get a demonstration of volatile data metrics, we will consume the memory pool data for the Eden, Survivor, and OldGen spaces and display them instead of the Convergence, Synergy, and Valuation graph dashboards. We will start by replacing the content of the sample.rb job file located in the bookpub_dashboard/jobs directory with the following content:

require 'httparty' 
require 'date' 
 
eden_key = "bookpub.app.jvm.memory.used.area.heap.id.PS_Eden_Space" 
survivor_key = "bookpub.app.jvm.memory.used.area.heap.id.PS_Survivor_Space" 
oldgen_key = "bookpub.app.jvm.memory.used.area.heap.id.PS_Old_Gen" 
 
SCHEDULER.every '60s' do 
  data = JSON.parse(HTTParty.get("http://localhost:8888/render/?from=-11minutes&target=#{eden_key}&target=#{survivor_key}&target=#{oldgen_key}&format=json&maxDataPoints=11").body) 
 
  data.each do |metric| 
    target = metric["target"] 
    # Remove the last data point, which typically has empty value 
    data_points = metric["datapoints"][0...-1] 
    if target == eden_key 
      points = [] 
      data_points.each_with_index do |entry, idx| 
        value = entry[0] rescue 0 
        points << { x: entry[1], y: value.round(0)} 
      end 
      send_event('heap_eden', points: points) 
    elsif target == survivor_key 
      current_survivor = data_points.last[0] rescue 0 
      current_survivor = current_survivor / 1048576 
      send_event("heap_survivor", { value: 
                   current_survivor.round(2)}) 
    elsif target == oldgen_key 
      current_oldgen = data_points.last[0] rescue 0 
      last_oldgen = data_points[-2][0] rescue 0 
      send_event("heap_oldgen", { 
                   current: current_oldgen.round(2), 
                   last: last_oldgen.round(2)
                 }) 
    end 
  end 
end 

10. In the sample.erb template located in the bookpub_dashboard/dashboards directory, we will replace the Synergy, Valuation, and Convergence graphs with the following alternatives:

• <div data-id="synergy" data-view="Meter" data-title="Synergy" data-min="0" data-max="100"></div> gets replaced with <div data-id="heap_survivor" data-view="Meter" data-title="Heap: Survivor" data-min="0" data-max="100" data-moreinfo="In megabytes"></div>
• <div data-id="valuation" data-view="Number" data-title="Current Valuation" data-moreinfo="In billions" data-prefix="$"></div> gets replaced with <div data-id="heap_oldgen" data-view="Number" data-title="Heap: OldGen" data-moreinfo="In bytes" ></div>
• <div data-id="convergence" data-view="Graph" data-title="Convergence" style="background-color:#ff9618"></div> gets replaced with <div data-id="heap_eden" data-view="Graph" data-title="Heap: Eden" style="background-color:#ff9618" data-moreinfo="In bytes"></div>

11. After all the changes are made, we can restart the dashboard application and reload our browser to http://localhost:3030 to see the following result: