quay/static/js/core-ui.js

angular.module("core-ui", [])
  .factory('CoreDialog', [function() {
    var service = {};
    service['fatal'] = function(title, message) {
      bootbox.dialog({
        "title": title,
        "message": "<div class='alert-icon-container-container'><div class='alert-icon-container'><div class='alert-icon'></div></div></div>" + message,
        "buttons": {},
        "className": "co-dialog fatal-error",
        "closeButton": false
      });
    };

    return service;
  }])

  .directive('corLogBox', function() {
    var directiveDefinitionObject = {
      priority: 1,
      templateUrl: '/static/directives/cor-log-box.html',
      replace: true,
      transclude: true,
      restrict: 'C',
      scope: {
        'logs': '=logs'
      },
      controller: function($rootScope, $scope, $element, $timeout) {
        $scope.hasNewLogs = false;

        var scrollHandlerBound = false;
        var isAnimatedScrolling = false;
        var isScrollBottom = true;

        var scrollHandler = function() {
          if (isAnimatedScrolling) { return; }
          var element = $element.find("#co-log-viewer")[0];
          isScrollBottom = element.scrollHeight - element.scrollTop === element.clientHeight;
          if (isScrollBottom) {
            $scope.hasNewLogs = false;
          }
        };

        var animateComplete = function() {
          isAnimatedScrolling = false;
        };

        $scope.moveToBottom = function() {
          $scope.hasNewLogs = false;
          isAnimatedScrolling = true;
          isScrollBottom = true;

          $element.find("#co-log-viewer").animate(
            { scrollTop: $element.find("#co-log-content").height() }, "slow", null, animateComplete);
        };

        $scope.$watch('logs', function(value, oldValue) {
          if (!value) { return; }

          $timeout(function() {
            if (!scrollHandlerBound) {
              $element.find("#co-log-viewer").on('scroll', scrollHandler);
              scrollHandlerBound = true;
            }

            if (!isScrollBottom) {
              $scope.hasNewLogs = true;
              return;
            }

            $scope.moveToBottom();
          }, 500);
        });
      }
    };
    return directiveDefinitionObject;
  })

  .directive('corOptionsMenu', function() {
    var directiveDefinitionObject = {
      priority: 1,
      templateUrl: '/static/directives/cor-options-menu.html',
      replace: true,
      transclude: true,
      restrict: 'C',
      scope: {},
      controller: function($rootScope, $scope, $element) {
      }
    };
    return directiveDefinitionObject;
  })

  .directive('corOption', function() {
    var directiveDefinitionObject = {
      priority: 1,
      templateUrl: '/static/directives/cor-option.html',
      replace: true,
      transclude: true,
      restrict: 'C',
      scope: {
        'optionClick': '&optionClick'
      },
      controller: function($rootScope, $scope, $element) {
      }
    };
    return directiveDefinitionObject;
  })


  .directive('corTitle', function() {
    var directiveDefinitionObject = {
      priority: 1,
      templateUrl: '/static/directives/cor-title.html',
      replace: true,
      transclude: true,
      restrict: 'C',
      scope: {},
      controller: function($rootScope, $scope, $element) {
      }
    };
    return directiveDefinitionObject;
  })

  .directive('corTitleContent', function() {
    var directiveDefinitionObject = {
      priority: 1,
      templateUrl: '/static/directives/cor-title-content.html',
      replace: true,
      transclude: true,
      restrict: 'C',
      scope: {},
      controller: function($rootScope, $scope, $element) {
      }
    };
    return directiveDefinitionObject;
  })

  .directive('corTitleLink', function() {
    var directiveDefinitionObject = {
      priority: 1,
      templateUrl: '/static/directives/cor-title-link.html',
      replace: true,
      transclude: true,
      restrict: 'C',
      scope: {},
      controller: function($rootScope, $scope, $element) {
      }
    };
    return directiveDefinitionObject;
  })

  .directive('corTabPanel', function() {
    var directiveDefinitionObject = {
      priority: 1,
      templateUrl: '/static/directives/cor-tab-panel.html',
      replace: true,
      transclude: true,
      restrict: 'C',
      scope: {},
      controller: function($rootScope, $scope, $element) {
      }
    };
    return directiveDefinitionObject;
  })

  .directive('corTabContent', function() {
    var directiveDefinitionObject = {
      priority: 2,
      templateUrl: '/static/directives/cor-tab-content.html',
      replace: true,
      transclude: true,
      restrict: 'C',
      scope: {},
      controller: function($rootScope, $scope, $element) {
      }
    };
    return directiveDefinitionObject;
  })

 .directive('corTabs', function() {
    var directiveDefinitionObject = {
      priority: 3,
      templateUrl: '/static/directives/cor-tabs.html',
      replace: true,
      transclude: true,
      restrict: 'C',
      scope: {},
      controller: function($rootScope, $scope, $element) {
      }
    };
    return directiveDefinitionObject;
  })

 .directive('corFloatingBottomBar', function() {
    var directiveDefinitionObject = {
      priority: 3,
      templateUrl: '/static/directives/cor-floating-bottom-bar.html',
      replace: true,
      transclude: true,
      restrict: 'C',
      scope: {},
      controller: function($rootScope, $scope, $element, $timeout, $interval) {
        var handler = function() {
          $element.removeClass('floating');
          $element.css('width', $element[0].parentNode.clientWidth + 'px');

          var windowHeight = $(window).height();
          var rect = $element[0].getBoundingClientRect();
          if (rect.bottom > windowHeight) {
            $element.addClass('floating');
          }
        };

        $(window).on("scroll", handler);
        $(window).on("resize", handler);

        var previousHeight = $element[0].parentNode.clientHeight;
        var stop = $interval(function() {
          var currentHeight = $element[0].parentNode.clientWidth;
          if (previousHeight != currentHeight) {
            currentHeight = previousHeight;
            handler();
          }
        }, 100);

        $scope.$on('$destroy', function() {
          $(window).off("resize", handler);
          $(window).off("scroll", handler);
          $interval.cancel(stop);
        });
      }
    };
    return directiveDefinitionObject;

 })

  .directive('corLoaderInline', function() {
      var directiveDefinitionObject = {
        templateUrl: '/static/directives/cor-loader-inline.html',
        replace: true,
        restrict: 'C',
        scope: {
        },
        controller: function($rootScope, $scope, $element) {
        }
      };
      return directiveDefinitionObject;
  })

  .directive('corLoader', function() {
      var directiveDefinitionObject = {
        templateUrl: '/static/directives/cor-loader.html',
        replace: true,
        restrict: 'C',
        scope: {
        },
        controller: function($rootScope, $scope, $element) {
        }
      };
      return directiveDefinitionObject;
  })

 .directive('corTab', function() {
    var directiveDefinitionObject = {
      priority: 4,
      templateUrl: '/static/directives/cor-tab.html',
      replace: true,
      transclude: true,
      restrict: 'C',
      scope: {
        'tabActive': '@tabActive',
        'tabTitle': '@tabTitle',
        'tabTarget': '@tabTarget',
        'tabInit': '&tabInit',
        'tabShown': '&tabShown',
        'tabHidden': '&tabHidden'
      },
      controller: function($rootScope, $scope, $element) {
        $element.find('a[data-toggle="tab"]').on('hidden.bs.tab', function (e) {
          $scope.tabHidden({});
        });

        $element.find('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
          $scope.tabShown({});
        });
      }
    };
    return directiveDefinitionObject;
  })

 .directive('corStep', function() {
    var directiveDefinitionObject = {
      priority: 4,
      templateUrl: '/static/directives/cor-step.html',
      replace: true,
      transclude: false,
      requires: '^corStepBar',
      restrict: 'C',
      scope: {
        'icon': '@icon',
        'title': '@title',
        'text': '@text'
      },
      controller: function($rootScope, $scope, $element) {
      }
    };
    return directiveDefinitionObject;
  })

  .directive('realtimeAreaChart', function () {
    var directiveDefinitionObject = {
      priority: 0,
      templateUrl: '/static/directives/realtime-area-chart.html',
      replace: false,
      transclude: false,
      restrict: 'C',
      scope: {
        'data': '=data',
        'labels': '=labels',
        'colors': '=colors',
        'counter': '=counter'
      },
      controller: function($scope, $element) {
        var graph = null;
        var series = [];
        var palette = new Rickshaw.Color.Palette( { scheme: 'spectrum14' } );
        var colors = $scope.colors || [];

        var setupGraph = function() {
          for (var i = 0; i < $scope.labels.length; ++i) {
            series.push({
              name: $scope.labels[i],
              color: i >= colors.length ? palette.color(): $scope.colors[i],
              stroke: 'rgba(0,0,0,0.15)',
              data: []
            });
          }

          var options = {
            element: $element.find('.chart')[0],
            renderer: 'area',
            stroke: true,
            series: series,
            min: 0,
            padding: {
              'top': 0.3,
              'left': 0,
              'right': 0,
              'bottom': 0.3
            }
          };

          if ($scope.minimum != null) {
            options['min'] = $scope.minimum == 'auto' ? 'auto' : $scope.minimum * 1;
          } else {
            options['min'] = 0;
          }

          if ($scope.maximum != null) {
            options['max'] = $scope.maximum == 'auto' ? 'auto' : $scope.maximum * 1;
          }

          graph = new Rickshaw.Graph(options);

          xaxes = new Rickshaw.Graph.Axis.Time({
            graph: graph,
            timeFixture: new Rickshaw.Fixtures.Time.Local()
          });

          yaxes = new Rickshaw.Graph.Axis.Y({
            graph: graph,
            tickFormat: Rickshaw.Fixtures.Number.formatKMBT
          });

          hoverDetail = new Rickshaw.Graph.HoverDetail({
            graph: graph,
            xFormatter: function(x) {
              return new Date(x * 1000).toString();
            }
          });
        };

        var refresh = function(data) {
          if (!data || $scope.counter < 0) { return; }
          if (!graph) {
            setupGraph();
          }

          var timecode = new Date().getTime() / 1000;
          for (var i = 0; i < $scope.data.length; ++i) {
            var arr = series[i].data;
            arr.push(
              {'x': timecode, 'y': $scope.data[i] }
            );

            if (arr.length > 10) {
              series[i].data = arr.slice(arr.length - 10, arr.length);
            }
          }

          graph.renderer.unstack = true;
          graph.update();
        };

        $scope.$watch('counter', function() {
          refresh($scope.data_raw);
        });

        $scope.$watch('data', function(data) {
          $scope.data_raw = data;
          refresh($scope.data_raw);
        });
      }
    };
    return directiveDefinitionObject;
  })


  .directive('realtimeLineChart', function () {
    var directiveDefinitionObject = {
      priority: 0,
      templateUrl: '/static/directives/realtime-line-chart.html',
      replace: false,
      transclude: false,
      restrict: 'C',
      scope: {
        'data': '=data',
        'labels': '=labels',
        'counter': '=counter',
        'labelTemplate': '@labelTemplate',
        'minimum': '@minimum',
        'maximum': '@maximum'
      },
      controller: function($scope, $element) {
        var graph = null;
        var xaxes = null;
        var yaxes = null;
        var hoverDetail = null;
        var series = [];
        var counter = 0;
        var palette = new Rickshaw.Color.Palette( { scheme: 'spectrum14' } );

        var setupGraph = function() {
          var options = {
            element: $element.find('.chart')[0],
            renderer: 'line',
            series: series,
            padding: {
              'top': 0.3,
              'left': 0,
              'right': 0,
              'bottom': 0.3
            }
          };

          if ($scope.minimum != null) {
            options['min'] = $scope.minimum == 'auto' ? 'auto' : $scope.minimum * 1;
          } else {
            options['min'] = 0;
          }

          if ($scope.maximum != null) {
            options['max'] = $scope.maximum == 'auto' ? 'auto' : $scope.maximum * 1;
          }

          graph = new Rickshaw.Graph(options);
          xaxes = new Rickshaw.Graph.Axis.Time({
            graph: graph,
            timeFixture: new Rickshaw.Fixtures.Time.Local()
          });

          yaxes = new Rickshaw.Graph.Axis.Y({
            graph: graph,
            tickFormat: Rickshaw.Fixtures.Number.formatKMBT
          });

          hoverDetail = new Rickshaw.Graph.HoverDetail({
            graph: graph,
            xFormatter: function(x) {
              return new Date(x * 1000).toString();
            }
          });
        };

        var refresh = function(data) {
          if (data == null) { return; }
          if (!graph) {
            setupGraph();
          }

          if (typeof data == 'number') {
            data = [data];
          }

          if ($scope.labels) {
            data = data.slice(0, $scope.labels.length);
          }

          if (series.length == 0){
            for (var i = 0; i < data.length; ++i) {
              var title = $scope.labels ? $scope.labels[i] : $scope.labelTemplate.replace('{x}', i + 1);
              series.push({
                'color': palette.color(),
                'data': [],
                'name': title
              })
            }
          }

          counter++;
          var timecode = new Date().getTime() / 1000;

          for (var i = 0; i < data.length; ++i) {
            var arr = series[i].data;
            arr.push({
              'x': timecode,
              'y': data[i]
            })

            if (arr.length > 10) {
              series[i].data = arr.slice(arr.length - 10, arr.length);
            }
          }

          graph.update();
        };

        $scope.$watch('counter', function(counter) {
          refresh($scope.data_raw);
        });

        $scope.$watch('data', function(data) {
          $scope.data_raw = data;
        });
      }
    };
    return directiveDefinitionObject;
  })

 .directive('corStepBar', function() {
    var directiveDefinitionObject = {
      priority: 4,
      templateUrl: '/static/directives/cor-step-bar.html',
      replace: true,
      transclude: true,
      restrict: 'C',
      scope: {
        'progress': '=progress'
      },
      controller: function($rootScope, $scope, $element) {
        $scope.$watch('progress', function(progress) {
          var index = 0;
          for (var i = 0; i < progress.length; ++i) {
            if (progress[i]) {
              index = i;
            }
          }

          $element.find('.transclude').children('.co-step-element').each(function(i, elem) {
            $(elem).removeClass('active');
            if (i <= index) {
              $(elem).addClass('active');
            }
          });
        });
      }
    };
    return directiveDefinitionObject;
  });