pinpoint/src/main/webapp/views/nodeInfoDetails.html

<div class="nodeInfoDetails" ng-init="nodeIcon='USER'" ng-show="showNodeInfoDetails">

    <div ng-if="unknownGroup">

        <div style="padding-bottom:10px;">
            <div style="float:left;width:265px;padding-right:5px">
                <div class="form-group input-group-sm has-feedback" style="margin-bottom:0;">
                    <input type="text" class="form-control" ng-model="nodeSearch" ng-change="updateNodeSearch(nodeSearch)" placeholder="coming soon.">
                    <span class="glyphicon glyphicon-search form-control-feedback" style="top:0;"></span>
                </div>
            </div>
            <div>
                <div class="btn-group btn-group-sm">
                    <button type="button" class="btn btn-default" ng-click="nodeOrderByName()">Name <span class="glyphicon" ng-class="nodeOrderByNameClass"></span></button>
                    <button type="button" class="btn btn-default" ng-click="nodeOrderByCount()">Count <span class="glyphicon" ng-class="nodeOrderByCountClass"></span></button>
                </div>
            </div>
        </div>

        <div class="panel panel-default" ng-repeat="node in unknownGroup | orderBy:nodeOrderBy:nodeOrderByDesc">
            <div class="panel-heading">
                {{node.applicationName}} <span class="badge" style="position:absolute;right:20px;">{{node.count | number}}</span>
            </div>

            <div ng-init="showNodeResponseSummary=false" class="panel-body summaryCharts_{{node.applicationName | applicationNameToClassName}}" style="position: relative; padding:0">
                <div class="response-summary" ng-show="showNodeResponseSummary">
                    <svg style='height:120px;width:350px;'/>
                </div>
                <div class="load" ng-hide="showNodeResponseSummary">
                    <svg style='height:120px;width:350px;'/>
                </div>


                <a class="btn btn-default btn-xs" href title="Show Load" data-toggle="tooltip" data-placement="left" style="position: absolute;top: 20px; right:5px;"
                   ng-click="showNodeResponseSummary=!showNodeResponseSummary" ng-show="showNodeResponseSummary">
                    <span class="glyphicon glyphicon-stats"></span>
                </a>
                <a class="btn btn-default btn-xs" href title="Show Response Summary" data-toggle="tooltip" data-placement="left" style="position: absolute;top: 20px; right:5px;"
                   ng-click="showNodeResponseSummary=!showNodeResponseSummary;renderNodeResponseSummary(node.applicationName)" ng-show="!showNodeResponseSummary">
                    <span class="glyphicon glyphicon-stats"></span>
                </a>
                <a class="btn btn-default btn-xs" href ng-click="showNodeDetailInformation(node.applicationName)"
                   title="Show Node Information" data-toggle="tooltip" data-placement="left" style="position: absolute;top: 50px; right:5px;">
                    <span class="glyphicon glyphicon-info-sign"></span>
                </a>
                <!--<a class="btn btn-default btn-xs" href title="Filter Transaction" data-toggle="tooltip" data-placement="left" style="position: absolute;top: 50px; right:5px;"-->
                   <!--ng-click="passingTransactionMapFromLinkInfoDetails(target.applicationName, target.serviceType)">-->
                    <!--<span class="glyphicon glyphicon-filter"></span>-->
                <!--</a>-->
            </div>
        </div>

    </div>

    <div class='histogram' ng-show="showNodeResponseSummary">
        <h5>Response Summary</h5>
        <svg style='height:150px;' />
    </div>

    <div class='timeSeriesHistogram' ng-show="showNodeLoad">
        <h5>Load</h5>
        <svg style='height:150px' />
    </div>

    <div ng-show="showServers">
        <h5>Servers</h5>
        <ul class="server-list list-unstyled">
            <li ng-repeat="(key, server) in serverList">
                <span class="glyphicon glyphicon-home"></span>
                {{server.name.split(':')[0]}}
                <a class="btn btn-default btn-xs" href="http://nsight.nhncorp.com/dashboard_server/{{server.name.split(':')[0].replace('.nhnsystem.com','')}}" target="_blank" title="System resource monitoring site">NSight</a>
                <ul style="padding-left: 15px;">
                    <li ng-repeat="instance in server.instanceList">
                        <span class="glyphicon glyphicon-hdd"></span>
                        {{instance.name}}
                        <a class="btn btn-default btn-xs" ng-show="instance.hasInspector" ng-href="#/inspector/{{node.text}}@{{node.serviceTypeCode}}/{{oNavbarVo.getPeriod()}}/{{oNavbarVo.getQueryEndTime()}}/{{instance.name}}" target="_blank" title="Inspect Agents" alt="Inspect Agents">Inspector</a>
                        <a class="btn btn-default btn-xs" href="http://hubble.arcuscloud.nhncorp.com/" target="_blank" title="Arcus monitoring site" ng-show="nodeCategory == 'ARCUS'">Hubble</a>
                        <button type="button" class="btn btn-xs" ng-click="instance.showChart=!instance.showChart"
                                ng-show="agentHistogram[instance.name]" ng-class="{true:'btn-danger', false:'btn-default'}[agentHistogram[instance.name].Error > 0]">
                            <span class="glyphicon" ng-class="{true:'glyphicon-minus',false:'glyphicon-plus'}[instance.showChart==true]"></span>
                        </button>
                        <div ng-show="instance.showChart">
                            <div class="agentHistogram_{{instance.name | applicationNameToClassName}}">
                                <h6>Response Summary</h6>
                                <svg style='height:150px;width:350px' />
                            </div>
                            <div class="agentTimeSeriesHistogram_{{instance.name | applicationNameToClassName}}">
                                <h6>Load</h6>
                                <svg style='height:150px;width:350px' />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

</div>