traefik/static/app/sections/health/health.controller.js

(function (d3) {
  'use strict';

  angular.module('traefik.section.health')
    .controller('HealthController', ['$scope', '$interval', '$log', 'Health', function ($scope, $interval, $log, Health) {

      var vm = this;

      vm.graph = {
        averageResponseTime: {},
        totalStatusCodeCount: {}
      };

      vm.graph.totalStatusCodeCount.options = {
        "chart": {
          type: 'discreteBarChart',
          height: 200,
          margin: {
            top: 20,
            right: 20,
            bottom: 40,
            left: 55
          },
          x: function (d) {
            return d.label;
          },
          y: function (d) {
            return d.value;
          },
          showValues: true,
          valueFormat: function (d) {
            return d3.format('d')(d);
          },
          transitionDuration: 50,
          yAxis: {
            axisLabelDistance: 30
          }
        },
        "title": {
          "enable": true,
          "text": "Total Status Code Count",
          "css": {
            "textAlign": "center"
          }
        }
      };

      vm.graph.totalStatusCodeCount.data = [
        {
          key: "Total Status Code Count",
          values: [
            {
              "label": "200",
              "value": 0
            }
          ]
        }
      ];

      /**
       * Update Total Status Code Count graph
       *
       * @param {Object} totalStatusCodeCount Object from API
       */
      function updateTotalStatusCodeCount(totalStatusCodeCount) {

        // extract values
        vm.graph.totalStatusCodeCount.data[0].values = [];
        for (var code in totalStatusCodeCount) {
          if (totalStatusCodeCount.hasOwnProperty(code)) {
            vm.graph.totalStatusCodeCount.data[0].values.push({
              label: code,
              value: totalStatusCodeCount[code]
            });
          }
        }

        // Update Total Status Code Count graph render
        if (vm.graph.totalStatusCodeCount.api) {
          vm.graph.totalStatusCodeCount.api.update();
        } else {
          console.error('fail');
        }

      }

      vm.graph.averageResponseTime.options = {
        chart: {
          type: 'lineChart',
          height: 200,
          margin: {
            top: 20,
            right: 40,
            bottom: 40,
            left: 55
          },
          transitionDuration: 50,
          x: function (d) {
            return d.x;
          },
          y: function (d) {
            return d.y;
          },
          useInteractiveGuideline: true,
          xAxis: {
            tickFormat: function (d) {
              return d3.time.format('%X')(new Date(d));
            }
          },
          yAxis: {
            tickFormat: function (d) {
              return d3.format(',.1f')(d);
            }
          }
        },
        "title": {
          "enable": true,
          "text": "Average response time",
          "css": {
            "textAlign": "center"
          }
        }
      };

      var initialPoint = {
        x: Date.now() - 3000,
        y: 0
      };
      vm.graph.averageResponseTime.data = [
        {
          values: [initialPoint],
          key: 'Average response time (ms)',
          type: 'line',
          color: '#2ca02c'
        }
      ];

      /**
       * Update average response time graph
       *
       * @param {Number} x     Coordinate X
       * @param {Number} y     Coordinate Y
       */
      function updateAverageResponseTimeGraph(x, y) {

        // x multiply 1000 by because unix time is in seconds and JS Date are in milliseconds
        var data = {
          x: x * 1000,
          y: y * 1000
        };
        vm.graph.averageResponseTime.data[0].values.push(data);
        // limit graph entries
        if (vm.graph.averageResponseTime.data[0].values.length > 100) {
          vm.graph.averageResponseTime.data[0].values.shift();
        }

        // Update Average Response Time graph render
        if (vm.graph.averageResponseTime.api) {
          vm.graph.averageResponseTime.api.update();
        }
      }

      /**
       * Load all graph's datas
       *
       * @param {Object} health Health data from server
       */
      function loadData(health) {
        // Load datas and update Average Response Time graph render
        updateAverageResponseTimeGraph(health.unixtime, health.average_response_time_sec);

        // Load datas and update Total Status Code Count graph render
        updateTotalStatusCodeCount(health.total_status_code_count);

        // set data's view
        vm.health = health;
      }

      /**
       * Action when load datas failed
       *
       * @param {Object} error Error state object
       */
      function erroData(error) {
        vm.health = {};
        $log.error(error);
      }

      // first load
      Health.get(loadData, erroData);

      // Auto refresh data
      var intervalId = $interval(function () {
        Health.get(loadData, erroData);
      }, 3000);

      // Stop auto refresh when page change
      $scope.$on('$destroy', function () {
        $interval.cancel(intervalId);
      });

    }]);

})(d3);