Particular · WojcikMike · Jun 22, 2018 · Jun 8, 2018 · Jun 8, 2018 · Jun 14, 2018
diff --git a/src/ServicePulse.Host.Tests/ServicePulse.Host.Tests.csproj b/src/ServicePulse.Host.Tests/ServicePulse.Host.Tests.csproj
@@ -83,6 +83,7 @@
     <Content Include="tests\js\jasmine_test_example.js" />
     <Content Include="tests\js\jasmine_test_example_tests.js" />
     <Content Include="tests\js\angular-mocks.js" />
+    <Content Include="tests\js\services\services.messageTypeParser.spec.js" />
     <Content Include="tests\js\services\services.monitoring.spec.js" />
     <Content Include="tests\js\views\failed_groups\controller.spec.js" />
     <Content Include="tests\js\views\message\controller.spec.js" />

diff --git a/src/ServicePulse.Host.Tests/SpecsRunner.html b/src/ServicePulse.Host.Tests/SpecsRunner.html
@@ -130,6 +130,7 @@
     <script src="tests/js/configuration/configuration.spec.js"></script>
     <script src="tests/js/services/services.spec.js"></script>
     <script src="tests/js/services/services.monitoring.spec.js"></script>
+    <script src="tests/js/services/services.messageTypeParser.spec.js"></script>
 
     <script src="tests/js/views/redirect/edit/controller.spec.js"></script>
     <script src="tests/js/views/pending_retries/controller.spec.js"></script>

diff --git a/src/ServicePulse.Host.Tests/tests/js/services/services.messageTypeParser.spec.js b/src/ServicePulse.Host.Tests/tests/js/services/services.messageTypeParser.spec.js
@@ -0,0 +1,68 @@
+describe('messageTypeParser', function () {
+    beforeEach(module('services.messageTypeParser'));
+
+    var oneTypeMessageType = {
+        "id": "IMyEvent, Shared, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null",
+        "typeName": "IMyEvent",
+        "assemblyName": "Shared",
+        "assemblyVersion": "0.0.0.0",
+        "culture": "Neutral",
+        "publicKeyToken": "123123123"
+    };
+    var twoTypeMessageType = {
+        "id":
+            "Some.Very.Long.Shared.Namespace.Is.Found.Here.EventMessage, Shared, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null;IMyEvent, Shared, Version=0.0.0.0, Culture=neutral, PublicKeyToken=123123123",
+        "typeName":
+            "Some.Very.Long.Shared.Namespace.Is.Found.Here.EventMessage, Shared, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null;IMyEvent, Shared, Version=0.0.0.0, Culture=neutral, PublicKeyToken=123123123",
+        "assemblyName": null,
+        "assemblyVersion": null,
+        "culture": null,
+        "publicKeyToken": null
+    };
+
+
+    var messageTypeParser;
+
+    beforeEach(inject(function (_messageTypeParser_) {
+        messageTypeParser = _messageTypeParser_;
+    }));
+
+    it('should not parse message type if there is only one class in', function () {
+        var sut = {};
+        Object.assign(sut, oneTypeMessageType);
+        messageTypeParser.parseTheMessageTypeData(sut);
+
+        expect(sut.typeName).toEqual('IMyEvent');
+        expect(sut.assemblyName).toEqual('Shared');
+    });
+
+    it('should parse message type if there is more than one class in', function () {
+        var sut = {};
+        Object.assign(sut, twoTypeMessageType);
+        messageTypeParser.parseTheMessageTypeData(sut);
+
+        expect(sut.typeName).toEqual('Some.Very.Long.Shared.Namespace.Is.Found.Here.EventMessage, IMyEvent');
+        expect(sut.assemblyName).toEqual(null);
+        expect(sut.messageTypeHierarchy[0].typeName).toEqual('Some.Very.Long.Shared.Namespace.Is.Found.Here.EventMessage');
+        expect(sut.messageTypeHierarchy[1].typeName).toEqual('IMyEvent');
+        expect(sut.messageTypeHierarchy[0].assemblyName).toEqual(' Shared');
+        expect(sut.messageTypeHierarchy[1].assemblyName).toEqual(' Shared');
+    });
+
+    it('should fill tooltip text with all parameters when present', function () {
+        var sut = {};
+        Object.assign(sut, oneTypeMessageType);
+        messageTypeParser.parseTheMessageTypeData(sut);
+
+        expect(sut.tooltipText).toEqual('IMyEvent | Shared-0.0.0.0 | Culture=Neutral | PublicKeyToken=123123123');
+    });
+
+    it('should fill tooltip text with all parameters from both types when present', function () {
+        var sut = {};
+        Object.assign(sut, twoTypeMessageType);
+        messageTypeParser.parseTheMessageTypeData(sut);
+
+        expect(sut.tooltipText).toEqual('Some.Very.Long.Shared.Namespace.Is.Found.Here.EventMessage | Shared-0.0.0.0<br> IMyEvent | Shared-0.0.0.0 | Culture=neutral | PublicKeyToken=123123123');
+    });
+
+});
diff --git a/src/ServicePulse.Host/ServicePulse.Host.csproj b/src/ServicePulse.Host/ServicePulse.Host.csproj
@@ -84,6 +84,7 @@
   <ItemGroup>
     <Content Include="app\css\animate-css\animate.css" />
     <Content Include="app\css\animate-css\animate.min.css" />
+    <Content Include="app\css\particular.ie.css" />
     <Content Include="app\css\particular.css" />
     <Content Include="app\img\endpoint-lost.svg" />
     <Content Include="app\img\endpoint.svg" />
@@ -116,6 +117,7 @@
     <Content Include="app\js\directives\ui.particular.nodata.js" />
     <Content Include="app\js\directives\ui.particular.nodata.tpl.html" />
     <Content Include="app\js\services\services.historyperiods.js" />
+    <Content Include="app\modules\monitoring\js\services\services.messageTypeParser.js" />
     <Content Include="app\modules\shell\constant.moment.js" />
     <Content Include="app\js\services\constant.rxjs.js" />
     <Content Include="app\js\services\factory.shareddata.js" />

diff --git a/src/ServicePulse.Host/app/css/particular.css b/src/ServicePulse.Host/app/css/particular.css
@@ -422,7 +422,26 @@ body {
     font-size: 14px !important;
     font-weight: bold;
     margin-bottom: 3px;
-    word-wrap: break-word;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.righ-side-ellipsis {
+    direction: rtl;
+    text-align: left;
+}
+
+@supports (-ms-ime-align:auto) {
+    .righ-side-ellipsis {
+        direction: ltr;
+    }
+}
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    .righ-side-ellipsis {
+        direction: ltr;
+    }
 }
 
 .break {
@@ -1827,6 +1846,11 @@ p.col-sort-active {
     width: 200px;
 }
 
+.endpoint-row .tooltip-inner {
+    width: auto;
+    max-width: 600px;
+}
+
 .endpoint-status {
     display: inline-block;
     position: absolute;
@@ -2000,7 +2024,7 @@ h1 .endpoint-status i.fa-envelope, .endpoint-status i.fa-exclamation-triangle {
     color: #8C8C8C;
     font-weight: normal;
     font-size: 12px;
-    float: left;
+    display: inline-block;
 }
 
 i.fa-exclamation-triangle {
@@ -2106,6 +2130,9 @@ i.fa-exclamation-triangle {
 .row.message-type-properties {
     position: relative;
     top: -5px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
 i.fa.pa-endpoint-lost.endpoints-overview, i.fa.pa-monitoring-lost.endpoints-overview {
@@ -2187,4 +2214,9 @@ div.alert.alert-warning strong {
 .alert.alert-warning {
     font-size: 16px;
     margin-bottom: 32px;
-}
+}
+
+.lead.righ-side-ellipsis {
+    color: #00729C !important;
+}
+
diff --git a/src/ServicePulse.Host/app/css/particular.ie.css b/src/ServicePulse.Host/app/css/particular.ie.css
@@ -0,0 +1,4 @@
+/*Hack to keep the default ellipsis on monitoring details screen for message types.*/
+.righ-side-ellipsis {
+    direction: ltr;
+}
diff --git a/src/ServicePulse.Host/app/index.html b/src/ServicePulse.Host/app/index.html
@@ -5,7 +5,9 @@
     <style>
         /* This helps the ng-show/ng-hide animations start at the right place. */
         /* Since Angular has this but needs to load, this gives us the class early. */
-        .ng-hide { display: none !important; }
+        .ng-hide {
+            display: none !important;
+        }
     </style>
 
     <title page-title pattern="%s • ServicePulse"></title>
@@ -16,17 +18,20 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <link rel="shortcut icon" href="img/ServicePulse.ico">
-    
+
     <!-- 3rd Party Library Styles -->
     <link rel="stylesheet" href="modules/dist/vendor.css">
-     
+
     <!-- Particular Styles -->
     <link rel="stylesheet" href="css/particular.css">
     <!--[if lt IE 9 ]>
         <script type="text/javascript">
             window.location = 'NoIE.html';
         </script>
     <![endif]-->
+    <!--[if IE]>
+        <link rel="stylesheet" href="css/particular.ie.css">
+    <![endif]-->
 
 </head>
 <body ng-controller="AppCtrl">

diff --git a/src/ServicePulse.Host/app/js/services/services.module.js b/src/ServicePulse.Host/app/js/services/services.module.js
@@ -11,7 +11,8 @@
         'services.notifications',
         'services.exceptionHandler',
         'services.uri',
-        'services.endpoints'
+        'services.endpoints',
+        'services.messageTypeParser'
     ]);
 
 

diff --git a/src/ServicePulse.Host/app/modules/monitoring/js/endpoint_details.controller.js b/src/ServicePulse.Host/app/modules/monitoring/js/endpoint_details.controller.js
@@ -12,7 +12,8 @@
         $filter,
         smallGraphsMinimumYAxis,
         largeGraphsMinimumYAxis,
-        connectivityNotifier
+        connectivityNotifier,
+        messageTypeParser
     ) {
 
         $scope.endpointName = $routeParams.endpointName;
@@ -78,7 +79,10 @@
                     });
 
                     $scope.loading = false;
-                    $scope.endpoint.messageTypes.forEach((messageType) => fillDisplayValues(messageType));
+                    $scope.endpoint.messageTypes.forEach((messageType) => {
+                        fillDisplayValues(messageType);
+                        messageTypeParser.parseTheMessageTypeData(messageType);
+                    });
 
                     $scope.endpoint.isStale = true;
                     $scope.endpoint.isScMonitoringDisconnected = false;
@@ -131,7 +135,8 @@
         '$filter',
         'smallGraphsMinimumYAxis',
         'largeGraphsMinimumYAxis',
-        'connectivityNotifier'
+        'connectivityNotifier',
+        'messageTypeParser'
     ];
 
     angular.module('endpoint_details')

diff --git a/src/ServicePulse.Host/app/modules/monitoring/js/endpoint_details.module.js b/src/ServicePulse.Host/app/modules/monitoring/js/endpoint_details.module.js
@@ -3,6 +3,7 @@
 
     angular.module('endpoint_details', []);
 
+    require('./services/services.messageTypeParser');
     require('./services/services.connectivityNotifier');
     require('./endpoint_details.controller');
     require('./endpoint_details.route.js');

diff --git a/src/ServicePulse.Host/app/modules/monitoring/js/services/services.messageTypeParser.js b/src/ServicePulse.Host/app/modules/monitoring/js/services/services.messageTypeParser.js
@@ -0,0 +1,58 @@
+;
+(function (window, angular, $, undefined) {
+    'use strict';
+
+    function Service() {
+
+        function parseTheMessageTypeData(messageType) {
+            if (!messageType.typeName)
+                return;
+
+            if (messageType.typeName.indexOf(';') > 0) {
+                var messageTypeHierarchy = messageType.typeName.split(';');
+                messageTypeHierarchy = messageTypeHierarchy.map((item) => {
+                    var obj = {};
+                    var segments = item.split(',');
+                    obj.typeName = segments[0];
+                    obj.assemblyName = segments[1];
+                    obj.assemblyVersion = segments[2].substring(segments[2].indexOf('=') + 1);
+
+                    if (!segments[4].endsWith('=null')) { //SC monitoring fills culture only if PublicKeyToken is filled
+                        obj.culture = segments[3];
+                        obj.publicKeyToken = segments[4];
+                    }
+                    return obj;
+                });
+                messageType.messageTypeHierarchy = messageTypeHierarchy;
+                messageType.typeName =
+                    messageTypeHierarchy.reduce((sum, item) => (sum ? `${sum}, ` : '') + item.typeName, '');
+                messageType.containsTypeHierarchy = true;
+                messageType.tooltipText = messageTypeHierarchy.reduce((sum, item) => (sum ? `${sum}<br> ` : '') +
+                    `${item.typeName} |${item.assemblyName}-${item.assemblyVersion}` + (item.culture ? ` |${item.culture}` : '') + (item.publicKeyToken ? ` |${item.publicKeyToken}` : ''),
+                    '');
+            } else {
+                var tooltip = `${messageType.typeName} | ${messageType.assemblyName}-${messageType.assemblyVersion}`;
+                if (messageType.culture && messageType.culture != 'null') {
+                    tooltip += ` | Culture=${messageType.culture}`;
+                }
+
+                if (messageType.publicKeyToken && messageType.publicKeyToken != 'null') {
+                    tooltip += ` | PublicKeyToken=${messageType.publicKeyToken}`;
+                }
+
+                messageType.tooltipText = tooltip;
+            }
+        }
+
+        var service = {
+            parseTheMessageTypeData: parseTheMessageTypeData
+        };
+
+        return service;
+    }
+
+    Service.$inject = [];
+
+    angular.module('services.messageTypeParser', ['sc'])
+        .service('messageTypeParser', Service);
+}(window, window.angular, window.jQuery));
diff --git a/src/ServicePulse.Host/app/modules/monitoring/views/endpoint_details.html b/src/ServicePulse.Host/app/modules/monitoring/views/endpoint_details.html
@@ -8,8 +8,8 @@
             <a href="/#/monitored_endpoints">All endpoints</a>
         </div>
         <div class="col-sm-9 no-side-padding list-section">
-            <h1>
-                {{endpointName}}
+            <h1 uib-tooltip="{{endpointName}}">
+                <div class="righ-side-ellipsis">{{endpointName}}</div>
                 <div class="endpoint-status">
                     <span ng-if="endpoint.isStale" class="warning">
                         <i class="fa pa-endpoint-lost endpoint-details" uib-tooltip="Unable to connect to endpoint"></i>
@@ -221,7 +221,7 @@ <h5 ng-class="{active: showInstancesBreakdown}">
                 <busy ng-show="loading" message="Loading details"></busy>
 
                 <div ng-show="!loading" class="row box box-no-click table-head-row">
-                    <div class="col-sm-2 col-xl-8">
+                    <div class="col-sm-4 col-xl-8">
                         <div class="row box-header">
                             <div class="col-sm-12">
                                 Instance Name
@@ -263,9 +263,9 @@ <h5 ng-class="{active: showInstancesBreakdown}">
                         <div class="row box endpoint-row" ng-repeat="instance in endpoint.instances">
                             <div class="col-sm-12 no-side-padding">
                                 <div class="row">
-                                    <div class="col-sm-2 col-xl-8 endpoint-name">
+                                    <div class="col-sm-4 col-xl-8 endpoint-name">
                                         <div class="row box-header">
-                                            <div class="col-lg-max-9 no-side-padding lead">
+                                            <div class="col-lg-max-9 no-side-padding lead righ-side-ellipsis" uib-tooltip="{{instance.name}}">
                                                 {{instance.name}}
                                             </div>
                                             <div class="col-lg-4 endpoint-status">
@@ -346,7 +346,7 @@ <h5 ng-class="{active: showInstancesBreakdown}">
                 <busy ng-show="loading" message="Loading details"></busy>
 
                 <div ng-show="!loading" class="row box box-no-click table-head-row">
-                    <div class="col-sm-2 col-xl-8">
+                    <div class="col-sm-4 col-xl-8">
                         <div class="row box-header">
                             <div class="col-sm-12">
                                 Message type name
@@ -388,10 +388,10 @@ <h5 ng-class="{active: showInstancesBreakdown}">
                         <div class="row box endpoint-row" ng-repeat="messageType in endpoint.messageTypes">
                             <div class="col-sm-12 no-side-padding">
                                 <div class="row">
-                                    <div class="col-sm-2 col-xl-8 endpoint-name">
+                                    <div class="col-sm-4 col-xl-8 endpoint-name" uib-tooltip-html="messageType.tooltipText">
                                         <div class="row box-header">
-                                            <div class="col-lg-max-9 no-side-padding lead message-type-label">
-                                                <div class="lead">
+                                            <div class="col-lg-max-9 no-side-padding lead message-type-label righ-side-ellipsis">
+                                                <div class="lead" >
                                                     {{messageType.typeName ? messageType.typeName : 'Unknown'}}
                                                 </div>
                                             </div>
@@ -405,7 +405,12 @@ <h5 ng-class="{active: showInstancesBreakdown}">
                                             </div>
                                         </div>
                                         <div class="row message-type-properties">
-                                            <div ng-show="{{messageType.typeName && messageType.typeName != 'null'}}" class="message-type-part">{{messageType.assemblyName + '-' + messageType.assemblyVersion}}</div>
+                                            <div ng-show="{{messageType.typeName && messageType.typeName != 'null' && !messageType.containsTypeHierarchy}}" class="message-type-part">
+                                                {{messageType.assemblyName + '-' + messageType.assemblyVersion}}
+                                            </div>
+                                            <div ng-show="{{messageType.typeName && messageType.typeName != 'null' && messageType.containsTypeHierarchy}}" class="message-type-part" ng-repeat="type in messageType.messageTypeHierarchy">
+                                                {{type.assemblyName + '-' + type.assemblyVersion}}  
+                                            </div>
                                             <div ng-show="{{messageType.culture && messageType.culture != 'null'}}" class="message-type-part">{{'Culture=' + messageType.culture}}</div>
                                             <div ng-show="{{messageType.publicKeyToken && messageType.publicKeyToken != 'null'}}" class="message-type-part">{{'PublicKeyToken=' + messageType.publicKeyToken}}</div>
                                         </div>

diff --git a/src/ServicePulse.Host/app/modules/monitoring/views/monitored_endpoints.html b/src/ServicePulse.Host/app/modules/monitoring/views/monitored_endpoints.html
@@ -68,7 +68,7 @@ <h1>Endpoints overview</h1>
                         <div class="row">
                                 <div class="col-sm-2 col-xl-7 endpoint-name name-overview">
                                     <div class="row box-header">
-                                        <div class="col-lg-max-8 no-side-padding lead">
+                                        <div class="col-lg-max-8 no-side-padding lead righ-side-ellipsis" uib-tooltip="{{endpoint.name}}">
                                             <a ng-click="endpoint.isExpanded = !endpoint.isExpanded" ng-href="{{getDetailsUrl(endpoint)}}">{{endpoint.name}}</a>
                                         </div>
                                         <div class="col-lg-5 no-side-padding endpoint-status">