[임대현] [NOBTS] linkInfoDetail에서 unknown links 에 svg 삽입 및 summary를 servermap 데이터 활용

git-svn-id: http://svn.bds.nhncorp.com/pe/hippo-web/trunk@2716 84d0f5b1-2673-498c-a247-62c4ff18d310

src/main/webapp/scripts/directives/linkInfoDetails.js

@@ -16,7 +16,8 @@ pinpointApp.directive('linkInfoDetails', [ 'linkInfoDetailsConfig', function (co
             var htQuery;
 
             // define private variables of methods;
-            var reset, showDetailInformation, getLinkStatisticsData, renderStatisticsTimeSeriesHistogram, renderStatisticsSummary, showApplicationStatistics;
+            var reset, showDetailInformation, getLinkStatisticsData, renderStatisticsTimeSeriesHistogram,
+                renderStatisticsSummary, showApplicationStatistics, parseHistogramForD3;
 
             /**
              * reset
@@ -47,8 +48,13 @@ pinpointApp.directive('linkInfoDetails', [ 'linkInfoDetailsConfig', function (co
              * @param data
              */
             showDetailInformation = function (data) {
+                console.log('data', data);
                 if (data.rawdata) {
                     scope.linkCategory = 'UnknownLinkInfoBox';
+                    for (var key in data.targetinfo) {
+                        console.log('data.rawdata.$$hashKey', data.targetinfo[key]);
+                        renderStatisticsSummary('.linkInfoDetails .summaryCharts_' + data.targetinfo[key].sequence + ' svg', parseHistogramForD3(data.rawdata[data.targetinfo[key].applicationName].histogram));
+                    }
                 } else {
                     scope.linkCategory = 'LinkInfoBox';
                     showApplicationStatistics(
@@ -57,7 +63,8 @@ pinpointApp.directive('linkInfoDetails', [ 'linkInfoDetailsConfig', function (co
                         data.sourceinfo.serviceTypeCode,
                         data.sourceinfo.applicationName,
                         data.targetinfo.serviceTypeCode,
-                        data.targetinfo.applicationName
+                        data.targetinfo.applicationName,
+                        data.histogram
                     );
                 }
 
@@ -139,13 +146,13 @@ pinpointApp.directive('linkInfoDetails', [ 'linkInfoDetailsConfig', function (co
              * render statics summary
              * @param data
              */
-            renderStatisticsSummary = function (data) {
+            renderStatisticsSummary = function (querySelector, data) {
                 nv.addGraph(function () {
                     var chart = nv.models.discreteBarChart().x(function (d) {
                         return d.label;
                     }).y(function (d) {
-                        return d.value;
-                    }).staggerLabels(false).tooltips(false).showValues(true);
+                            return d.value;
+                        }).staggerLabels(false).tooltips(false).showValues(true);
 
                     chart.xAxis.tickFormat(function (d) {
                         if (angular.isNumber(d)) {
@@ -164,7 +171,7 @@ pinpointApp.directive('linkInfoDetails', [ 'linkInfoDetailsConfig', function (co
 
                     chart.color(config.myColors);
 
-                    d3.select('.linkInfoDetails .infoBarChart svg')
+                    d3.select(querySelector)
                         .datum(data)
                         .transition()
                         .duration(0)
@@ -184,8 +191,9 @@ pinpointApp.directive('linkInfoDetails', [ 'linkInfoDetailsConfig', function (co
              * @param srcApplicationName
              * @param destServiceType
              * @param destApplicationName
+             * @param histogram
              */
-            showApplicationStatistics = function (begin, end, srcServiceType, srcApplicationName, destServiceType, destApplicationName) {
+            showApplicationStatistics = function (begin, end, srcServiceType, srcApplicationName, destServiceType, destApplicationName, histogram) {
                 var params = {
                     "from": begin,
                     "to": end,
@@ -195,15 +203,34 @@ pinpointApp.directive('linkInfoDetails', [ 'linkInfoDetailsConfig', function (co
                     "destApplicationName": destApplicationName
                 };
 
+                scope.showLinkInfoChart = true;
+                scope.showLinkInfoBarChart = true;
+                renderStatisticsSummary('.linkInfoDetails .infoBarChart svg', parseHistogramForD3(histogram));
                 getLinkStatisticsData(params, function (query, result) {
-                    scope.showLinkInfoChart = true;
-                    scope.showLinkInfoBarChart = true;
-                    scope.$digest();
                     renderStatisticsTimeSeriesHistogram(result.timeseriesHistogram);
-                    renderStatisticsSummary(result.histogramSummary);
                 });
             };
 
+            /**
+             * parse histogram for d3.js
+             * @param histogram
+             */
+            parseHistogramForD3 = function (histogram) {
+                var histogramSummary = [
+                    {
+                        "key": "Responsetime Histogram",
+                        "values": []
+                    }
+                ];
+                for (var key in histogram) {
+                    histogramSummary[0].values.push({
+                        "label": key,
+                        "value": histogram[key]
+                    });
+                }
+                return histogramSummary;
+            };
+
             /**
              * scope event on linkInfoDetails.reset
              */

src/main/webapp/scripts/directives/serverMap.js

@@ -555,7 +555,7 @@ pinpointApp.directive('serverMap', [ 'serverMapConfig', '$rootScope', '$window',
                                     "text": 0,
                                     "error": 0,
                                     "slow": 0,
-                                    "rawdata": [],
+                                    "rawdata": {},
                                     "histogram": {}
                                 };
                             }

src/main/webapp/views/linkInfoDetails.html

@@ -2,26 +2,30 @@
 	<div class='info' ng-switch="linkCategory">
 
 		<div ng-switch-when="UnknownLinkInfoBox">
-            <dl ng-repeat="target in targetinfo">
-                <dt>
+            <div class="alert alert-info text-center">
+                Unknown Links
+            </div>
+            <ul class="unstyled">
+                <li ng-repeat="target in targetinfo">
                     <img ng-src="/images/icons/{{sourceinfo[0].serviceType | icons}}.png" width="20" height="10" /> {{sourceinfo[0].applicationName}}
                     <i class="icon-arrow-right"></i>
                     <img ng-src="/images/icons/{{target.serviceType | icons}}.png" width="20" height="10" /> {{target.applicationName}}
-                    <a class="btn btn-mini" href ng-click="showDetailInformation(target.applicationName)" title="show details">
+                    <a class="btn btn-mini" href ng-click="showDetailInformation(target.applicationName)" title="Show Link Information">
                         <i class="icon-tasks"></i>
                     </a>
                     <a class="btn btn-mini" href ng-click="passingTransactionMap(sourceinfo[0].serviceType, sourceinfo[0].applicationName, target.serviceType, target.applicationName)" title="filter transaction">
-                    	<i class="icon-filter"></i>
+                        <i class="icon-filter"></i>
                     </a>
-                </dt>
-                <dd>
-                    <ul class="unstyled">
-                        <li>request count : {{rawdata[target.applicationName].count}} /
-                            <span ng-style="rawdata[target.applicationName].error && 'color:#FF0000'">{{rawdata[target.applicationName].error}}</span>
-                        </li>
-                    </ul>
-                </dd>
-            </dl>
+                    <br>
+                    <div class="summaryCharts_{{target.sequence}}">
+                        <svg style='height:120px' />
+                    </div>
+                    <!--<ul>-->
+                        <!--<li>Request Count : {{rawdata[target.applicationName].count | number}}</li>-->
+                        <!--<li ng-class="rawdata[target.applicationName].error && 'text-error'">Error Count : {{rawdata[target.applicationName].error | number}}</li>-->
+                    <!--</ul>-->
+                </li>
+            </ul>
 		</div>
 
 		<div ng-switch-when="LinkInfoBox" class="alert alert-info text-center">