Adding in the delete api and the delete and create UI.

static/js/directives/ui/global-message-tab.js

@@ -0,0 +1,81 @@
+/**
+ * An element for managing global messages.
+ */
+angular.module('quay').directive('globalMessageTab', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/global-message-tab.html',
+    replace: false,
+    transclude: true,
+    restrict: 'C',
+    scope: {
+      'isEnabled': '=isEnabled'
+    },
+    controller: function ($scope, $element, ApiService) {
+      $scope.newMessage = {};
+      $scope.creatingMessage = false;
+
+      $scope.showCreateMessage = function () {
+        $scope.createdMessage = null;
+        $('#createMessageModal').modal('show');
+      };
+
+      $scope.createNewMessage = function () {
+        $scope.creatingMessage = true;
+        $scope.createdMessage = null;
+
+        var errorHandler = ApiService.errorDisplay('Cannot create message', function () {
+          $scope.creatingMessage = false;
+          $('#createMessageModal').modal('hide');
+        });
+
+        var data = {
+          message: $scope.newMessage
+        };
+
+        ApiService.createMessages(data, null).then(function (resp) {
+          $scope.creatingMessage = false;
+          $scope.createdMessage = {content: $scope.newMessage.content};
+          $scope.newMessage = {};
+          $scope.loadMessageInternal();
+        }, errorHandler)
+      };
+
+      $scope.showDeleteMessage = function (uuid) {
+        $scope.messageToDelete = uuid;
+        $('#confirmDeleteMessageModal').modal({});
+      };
+
+      $scope.deleteMessage = function (uuid) {
+        $('#confirmDeleteMessageModal').modal('hide');
+        ApiService.deleteGlobalMessage(null, {uuid: uuid}).then(function (resp) {
+          $scope.loadMessageInternal();
+        }, ApiService.errorDisplay('Can not delete message'));
+      };
+
+      $scope.loadMessageOfTheDay = function () {
+        if ($scope.messages) {
+          return;
+        }
+
+        $scope.loadMessageInternal();
+      };
+
+      $scope.loadMessageInternal = function () {
+        ApiService.getMessages().then(function (resp) {
+          $scope.messages = resp['messages'];
+        }, function (resp) {
+          $scope.messages = [];
+          $scope.messagesErrors = ApiService.getErrorMessage(resp);
+        });
+      };
+
+      $scope.$watch('isEnabled', function (value) {
+        if (value) {
+          $scope.loadMessageInternal();
+        }
+      });
+    }
+  };
+  return directiveDefinitionObject;
+});