Adding retry button on one message (#672)

* Adding retry button on one message

* Position retry btn

* Showing the button only on hover

* Changing the message to more generic

Author: Michał Wójcik

src/ServicePulse.Host/app/css/particular.css

@@ -596,12 +596,20 @@ p.metadata {
     margin-bottom: 6px;
 }
 
+    p.metadata button {
+        position: absolute;
+        right: -35px;
+        top: 26px;
+    }
+
 span.metadata {
     display: inline-block;
     padding: 0px 20px 2px 0;
     color: #777f7f;
 }
 
+
+
 .metadata:first-child {
     padding-left: 0;
 }

src/ServicePulse.Host/app/js/views/failed_messages/controller.js

@@ -107,6 +107,27 @@
             vm.loadMoreResults(vm.selectedExceptionGroup);
         };
 
+        vm.viewMessage = function (message) {
+            $location.path(`/failed-messages/message/${message.id}`);
+        };
+
+        vm.retryMessage = function(message, $event) {
+            toastService.showInfo("Message retry requested");
+            serviceControlService.retryFailedMessages([message.id])
+                .then(function() {
+                        var indexOfMessage = vm.selectedIds.indexOf(message.id);
+                        if (indexOfMessage) {
+                            vm.selectedIds.splice(indexOfMessage, 1);
+                        }
+
+                        vm.failedMessages = vm.failedMessages.filter(function(item) {
+                            return item.id !== message.id;
+                        });
+                    }
+                );
+            $event.stopPropagation();
+        };
+
         vm.clipComplete = function(messageId) {
             toastService.showInfo(messageId + ' copied to clipboard');
         };

src/ServicePulse.Host/app/js/views/failed_messages/view.html

@@ -67,32 +67,32 @@ <h3 class="active group-title group-message-count">{{vm.selectedExceptionGroup.c
                     <multi-checkboxlist messages="vm.failedMessages" selected-ids="vm.selectedIds" message="message" multiselection="vm.multiselection"></multi-checkboxlist>
 
                     <div class="col-xs-11 failed-message-data" ng-mouseenter="message.hover2 = true" ng-mouseleave="message.hover2 = false">
-                        <a href="#/failed-messages/message/{{message.id}}">
+                        
+                        <div class="row" ng-class="{rowSelected: message.selected == true}" ng-click="vm.viewMessage(message)">
+                            <div class="col-sm-12">
+                                <div class="row box-header">
+                                    <div class="col-sm-12 no-side-padding">
+                                        <p class="lead break" ng-class="{'msg-type-hover': message.hover2}">{{message.message_type || 'Message Type Unknown - missing metadata EnclosedMessageTypes'}}</p>
+                                        <p class="metadata">
+                                            <span ng-if="message.retried" tooltip="Message is being retried" class="label sidebar-label label-info metadata-label">Retried</span>
+                                            <span ng-if="message.archived" tooltip="Message is being archived" class="label sidebar-label label-warning metadata-label">Archived</span>
+                                            <span ng-if="message.number_of_processing_attempts > 1" tooltip="This message has already failed {{message.number_of_processing_attempts}} times" class="label sidebar-label label-important metadata-label">{{message.number_of_processing_attempts}} Retry Failures</span>
+
+                                            <span class="metadata"><i class="fa fa-clock-o"></i> Failed: <sp-moment date="{{message.time_of_failure}}"></sp-moment></span>
+                                            <span class="metadata"><i class="fa pa-endpoint"></i> Endpoint: {{message.receiving_endpoint.name}}</span>
+                                            <span class="metadata"><i class="fa fa-laptop"></i> Machine: {{message.receiving_endpoint.host}}</span>
+                                            <span class="metadata" ng-show="message.redirect"><i class="fa pa-redirect-source pa-redirect-small"></i> Redirect: {{message.redirect}}</span>
+                                            <button type="button" class="btn btn-link btn-sm" ng-click="vm.retryMessage(message, $event)" ng-hide="!message.hover2" >
+                                                <i aria-hidden="true" class="fa fa-repeat no-link-underline">&nbsp</i>Request retry
+                                            </button>
+                                        </p>
+
+                                        <pre class="stacktrace-preview" isolate-click ng-show="message.panel === 0">{{ message.exception.message }}</pre>
 
-                            <div class="row" ng-class="{rowSelected: message.selected == true}">
-
-                                <div class="col-sm-12">
-                                    <div class="row box-header">
-                                        <div class="col-sm-12 no-side-padding">
-                                            <p class="lead break" ng-class="{'msg-type-hover': message.hover2}">{{message.message_type || 'Message Type Unknown - missing metadata EnclosedMessageTypes'}}</p>
-                                            <p class="metadata">
-                                                <span ng-if="message.retried" tooltip="Message is being retried" class="label sidebar-label label-info metadata-label">Retried</span>
-                                                <span ng-if="message.archived" tooltip="Message is being archived" class="label sidebar-label label-warning metadata-label">Archived</span>
-                                                <span ng-if="message.number_of_processing_attempts > 1" tooltip="This message has already failed {{message.number_of_processing_attempts}} times" class="label sidebar-label label-important metadata-label">{{message.number_of_processing_attempts}} Retry Failures</span>
-
-                                                <span class="metadata"><i class="fa fa-clock-o"></i> Failed: <sp-moment date="{{message.time_of_failure}}"></sp-moment></span>
-                                                <span class="metadata"><i class="fa pa-endpoint"></i> Endpoint: {{message.receiving_endpoint.name}}</span>
-                                                <span class="metadata"><i class="fa fa-laptop"></i> Machine: {{message.receiving_endpoint.host}}</span>
-                                                <span class="metadata" ng-show="message.redirect"><i class="fa pa-redirect-source pa-redirect-small"></i> Redirect: {{message.redirect}}</span>
-                                            </p>
-
-                                            <pre class="stacktrace-preview" isolate-click ng-show="message.panel === 0">{{ message.exception.message }}</pre>
-
-                                        </div>
                                     </div>
                                 </div>
                             </div>
-                        </a>
+                        </div>
                     </div>
                 </div>