Repository: pinpoint-apm/pinpoint
Issue: quickstart: web UI keep showing "loading" without any data/chart output or completed.
Labels: bug
help wanted

I have followed the quickstart guide and installed hbase/collector/web_ui/testapp on single CentOS 7 VM to give it a try.

After finally launched the testapp, I then directored to pinpoint's web UI and testapp's web UI. 
In pinpoint's web UI, the TESTAPP is registered and can be selected. But it kept showing loading without data/chart output or end as attached screenshot.

The pinpoint Web logs are as below:

Starting ProtocolHandler ["http-bio-28080"]
13:35:46 INFO (p.w.c.z.ZookeeperClusterDataManager:131) Handle Zookeeper Event(WatchedEvent state:SyncConnected type:NodeDataChanged path:/pinpoint-cluster/collector/105723@centos_head) started.
13:35:46 INFO (p.w.c.z.ZookeeperClusterDataManager:270) pushCollectorClusterData() started.
13:35:46 INFO (p.w.c.z.ZookeeperClusterDataManager:277) pushCollectorClusterData() completed.
13:35:46 INFO (p.w.c.z.ZookeeperClusterDataManager:158) Handle Zookeeper Event(WatchedEvent state:SyncConnected type:NodeDataChanged path:/pinpoint-cluster/collector/105723@centos_head) completed.
13:37:51 DEBUG(c.n.p.w.c.MainController           :50 ) /applications [TESTAPP(STAND_ALONE:1000)]
13:40:31 DEBUG(c.n.p.r.s.PinpointServerAcceptor   :55 ) ping write success channel:[id: 0x96ac7d3c, /192.168.255.128:58215 => /192.168.255.128:29997]
13:40:31 DEBUG(c.n.p.r.s.PinpointServerAcceptor   :282) newPingTimeout
13:40:31 DEBUG(c.n.p.r.c.PacketDecoder            :96 ) receive pong. [id: 0x96ac7d3c, /192.168.255.128:58215 => /192.168.255.128:29997]
13:40:32 DEBUG(c.n.p.r.s.DefaultPinpointServer    :418) DefaultPinpointServer@1afb3544 handlePingPacket() started. packet:PingPacket{pingId:1(RUN_DUPLEX)}
13:40:32 DEBUG(c.n.p.w.c.c.ClusterAcceptor        :105) ping received PingPacket{pingId:1(RUN_DUPLEX)} DefaultPinpointServer@1afb3544(remote:/192.168.255.128:58215, state:RUN_DUPLEX)
13:40:32 DEBUG(c.n.p.r.s.DefaultPinpointServer    :55 ) pong write success. channel:[id: 0x96ac7d3c, /192.168.255.128:58215 => /192.168.255.128:29997]
13:45:31 DEBUG(c.n.p.r.s.PinpointServerAcceptor   :282) newPingTimeout
13:45:31 DEBUG(c.n.p.r.s.PinpointServerAcceptor   :55 ) ping write success channel:[id: 0x96ac7d3c, /192.168.255.128:58215 => /192.168.255.128:29997]
13:45:31 DEBUG(c.n.p.r.c.PacketDecoder            :96 ) receive pong. [id: 0x96ac7d3c, /192.168.255.128:58215 => /192.168.255.128:29997]
13:45:32 DEBUG(c.n.p.r.s.DefaultPinpointServer    :418) DefaultPinpointServer@1afb3544 handlePingPacket() started. packet:PingPacket{pingId:2(RUN_DUPLEX)}
13:45:32 DEBUG(c.n.p.w.c.c.ClusterAcceptor        :105) ping received PingPacket{pingId:2(RUN_DUPLEX)} DefaultPinpointServer@1afb3544(remote:/192.168.255.128:58215, state:RUN_DUPLEX)
13:45:32 DEBUG(c.n.p.r.s.DefaultPinpointServer    :55 ) pong write success. channel:[id: 0x96ac7d3c, /192.168.255.128:58215 => /192.168.255.128:29997]
13:50:32 DEBUG(c.n.p.r.s.PinpointServerAcceptor   :282) newPingTimeout
13:50:32 DEBUG(c.n.p.r.s.PinpointServerAcceptor   :55 ) ping write success channel:[id: 0x96ac7d3c, /192.168.255.128:58215 => /192.168.255.128:29997]
13:50:32 DEBUG(c.n.p.r.c.PacketDecoder            :96 ) receive pong. [id: 0x96ac7d3c, /192.168.255.128:58215 => /192.168.255.128:29997]
13:50:32 DEBUG(c.n.p.r.s.DefaultPinpointServer    :418) DefaultPinpointServer@1afb3544 handlePingPacket() started. packet:PingPacket{pingId:3(RUN_DUPLEX)}
13:50:32 DEBUG(c.n.p.w.c.c.ClusterAcceptor        :105) ping received PingPacket{pingId:3(RUN_DUPLEX)} DefaultPinpointServer@1afb3544(remote:/192.168.255.128:58215, state:RUN_DUPLEX)
13:50:32 DEBUG(c.n.p.r.s.DefaultPinpointServer    :55 ) pong write success. channel:[id: 0x96ac7d3c, /192.168.255.128:58215 => /192.168.255.128:29997]
13:55:32 DEBUG(c.n.p.r.s.PinpointServerAcceptor   :282) newPingTimeout
13:55:32 DEBUG(c.n.p.r.s.PinpointServerAcceptor   :55 ) ping write success channel:[id: 0x96ac7d3c, /192.168.255.128:58215 => /192.168.255.128:29997]
13:55:32 DEBUG(c.n.p.r.c.PacketDecoder            :96 ) receive pong. [id: 0x96ac7d3c, /192.168.255.128:58215 => /192.168.255.128:29997]
13:55:32 DEBUG(c.n.p.r.s.DefaultPinpointServer    :418) DefaultPinpointServer@1afb3544 handlePingPacket() started. packet:PingPacket{pingId:4(RUN_DUPLEX)}
13:55:32 DEBUG(c.n.p.w.c.c.ClusterAcceptor        :105) ping received PingPacket{pingId:4(RUN_DUPLEX)} DefaultPinpointServer@1afb3544(remote:/192.168.255.128:58215, state:RUN_DUPLEX)
13:55:32 DEBUG(c.n.p.r.s.DefaultPinpointServer    :55 ) pong write success. channel:[id: 0x96ac7d3c, /192.168.255.128:58215 => /192.168.255.128:29997]
# 

The collector logs is as below

06-19 14:05:32 [DEBUG](c.n.p.r.c.PacketDecoder            :113) received ping. sending pong. [id: 0x77c8d299, /192.168.255.128:58215 => /192.168.255.128:29997]
06-19 14:05:32 [DEBUG](c.n.p.r.c.PacketDecoder            :55) pong write success. channel:[id: 0x77c8d299, /192.168.255.128:58215 => /192.168.255.128:29997]
06-19 14:05:32 [DEBUG](c.n.p.r.c.DefaultPinpointClientHandler:236) DefaultPinpointClientHandler@558c6868 writePing() started. channel:[id: 0x77c8d299, /192.168.255.128:58215 => /192.168.255.128:29997]
06-19 14:05:32 [DEBUG](c.n.p.r.c.DefaultPinpointClientHandler:55) ping write success. channel:[id: 0x77c8d299, /192.168.255.128:58215 => /192.168.255.128:29997]
06-19 14:05:32 [DEBUG](c.n.p.r.c.PacketDecoder            :96) receive pong. [id: 0x77c8d299, /192.168.255.128:58215 => /192.168.255.128:29997]
06-19 14:05:46 [DEBUG](c.n.p.c.h.AgentStatHandler         :67) Received AgentStats=TAgentStatBatch(agentId:test-agent, startTimestamp:1466314545225, agentStats:[TAgentStat(timestamp:1466316321359, collect
Interval:5001, gc:TJvmGc(type:PARALLEL, jvmMemoryHeapUsed:79618104, jvmMemoryHeapMax:427294720, jvmMemoryNonHeapUsed:81700616, jvmMemoryNonHeapMax:-1, jvmGcOldCount:3, jvmGcOldTime:259, jvmGcDetailed:TJvm
GcDetailed(jvmGcNewCount:20, jvmGcNewTime:332, jvmPoolCodeCacheUsed:0.06694437662760416, jvmPoolNewGenUsed:0.09821334251990685, jvmPoolOldGenUsed:0.17922481655489209, jvmPoolSurvivorSpaceUsed:0.4384948730
46875, jvmPoolMetaspaceUsed:0.9626290338424217)), cpuLoad:TCpuLoad(jvmCpuLoad:0.00202020202020202, systemCpuLoad:0.01717171717171717), transaction:TTransaction(sampledNewCount:0, sampledContinuationCount:
0, unsampledNewCount:0, unsampledContinuationCount:0), activeTrace:TActiveTrace(histogram:TActiveTraceHistogram(version:0, histogramSchemaType:2, activeTraceCount:[0, 0, 0, 0]))), TAgentStat(timestamp:146
6316326358, collectInterval:4999, gc:TJvmGc(type:PARALLEL, jvmMemoryHeapUsed:79618104, jvmMemoryHeapMax:427294720, jvmMemoryNonHeapUsed:81700616, jvmMemoryNonHeapMax:-1, jvmGcOldCount:3, jvmGcOldTime:259,
 jvmGcDetailed:TJvmGcDetailed(jvmGcNewCount:20, jvmGcNewTime:332, jvmPoolCodeCacheUsed:0.06694437662760416, jvmPoolNewGenUsed:0.09821334251990685, jvmPoolOldGenUsed:0.17922481655489209, jvmPoolSurvivorSpa
ceUsed:0.438494873046875, jvmPoolMetaspaceUsed:0.9626290338424217)), cpuLoad:TCpuLoad(jvmCpuLoad:0.002014098690835851, systemCpuLoad:0.014098690835850957), transaction:TTransaction(sampledNewCount:0, samp
ledContinuationCount:0, unsampledNewCount:0, unsampledContinuationCount:0), activeTrace:TActiveTrace(histogram:TActiveTraceHistogram(version:0, histogramSchemaType:2, activeTraceCount:[0, 0, 0, 0]))), TAg
entStat(timestamp:1466316331358, collectInterval:5000, gc:TJvmGc(type:PARALLEL, jvmMemoryHeapUsed:79618104, jvmMemoryHeapMax:427294720, jvmMemoryNonHeapUsed:81700616, jvmMemoryNonHeapMax:-1, jvmGcOldCount
:3, jvmGcOldTime:259, jvmGcDetailed:TJvmGcDetailed(jvmGcNewCount:20, jvmGcNewTime:332, jvmPoolCodeCacheUsed:0.06694437662760416, jvmPoolNewGenUsed:0.09821334251990685, jvmPoolOldGenUsed:0.1792248165548920
9, jvmPoolSurvivorSpaceUsed:0.438494873046875, jvmPoolMetaspaceUsed:0.9626290338424217)), cpuLoad:TCpuLoad(jvmCpuLoad:0.0020181634712411706, systemCpuLoad:0.018163471241170535), transaction:TTransaction(s
ampledNewCount:0, sampledContinuationCount:0, unsampledNewCount:0, unsampledContinuationCount:0), activeTrace:TActiveTrace(histogram:TActiveTraceHistogram(version:0, histogramSchemaType:2, activeTraceCoun
t:[0, 0, 0, 0]))), TAgentStat(timestamp:1466316336358, collectInterval:5000, gc:TJvmGc(type:PARALLEL, jvmMemoryHeapUsed:79618104, jvmMemoryHeapMax:427294720, jvmMemoryNonHeapUsed:81700616, jvmMemoryNonHea
pMax:-1, jvmGcOldCount:3, jvmGcOldTime:259, jvmGcDetailed:TJvmGcDetailed(jvmGcNewCount:20, jvmGcNewTime:332, jvmPoolCodeCacheUsed:0.06694437662760416, jvmPoolNewGenUsed:0.09821334251990685, jvmPoolOldGenU
sed:0.17922481655489209, jvmPoolSurvivorSpaceUsed:0.438494873046875, jvmPoolMetaspaceUsed:0.9626290338424217)), cpuLoad:TCpuLoad(jvmCpuLoad:0.0010090817356205853, systemCpuLoad:0.015136226034308779), tran
saction:TTransaction(sampledNewCount:0, sampledContinuationCount:0, unsampledNewCount:0, unsampledContinuationCount:0), activeTrace:TActiveTrace(histogram:TActiveTraceHistogram(version:0, histogramSchemaT
ype:2, activeTraceCount:[0, 0, 0, 0]))), TAgentStat(timestamp:1466316341358, collectInterval:5000, gc:TJvmGc(type:PARALLEL, jvmMemoryHeapUsed:79618104, jvmMemoryHeapMax:427294720, jvmMemoryNonHeapUsed:817
01816, jvmMemoryNonHeapMax:-1, jvmGcOldCount:3, jvmGcOldTime:259, jvmGcDetailed:TJvmGcDetailed(jvmGcNewCount:20, jvmGcNewTime:332, jvmPoolCodeCacheUsed:0.06694793701171875, jvmPoolNewGenUsed:0.09821334251
990685, jvmPoolOldGenUsed:0.17922481655489209, jvmPoolSurvivorSpaceUsed:0.438494873046875, jvmPoolMetaspaceUsed:0.9626341055077218)), cpuLoad:TCpuLoad(jvmCpuLoad:0.002014098690835851, systemCpuLoad:0.0151
05740181268883), transaction:TTransaction(sampledNewCount:0, sampledContinuationCount:0, unsampledNewCount:0, unsampledContinuationCount:0), activeTrace:TActiveTrace(histogram:TActiveTraceHistogram(versio
n:0, histogramSchemaType:2, activeTraceCount:[0, 0, 0, 0]))), TAgentStat(timestamp:1466316346358, collectInterval:5000, gc:TJvmGc(type:PARALLEL, jvmMemoryHeapUsed:79618104, jvmMemoryHeapMax:427294720, jvm
MemoryNonHeapUsed:81701816, jvmMemoryNonHeapMax:-1, jvmGcOldCount:3, jvmGcOldTime:259, jvmGcDetailed:TJvmGcDetailed(jvmGcNewCount:20, jvmGcNewTime:332, jvmPoolCodeCacheUsed:0.06694793701171875, jvmPoolNew
GenUsed:0.09821334251990685, jvmPoolOldGenUsed:0.17922481655489209, jvmPoolSurvivorSpaceUsed:0.438494873046875, jvmPoolMetaspaceUsed:0.9626341055077218)), cpuLoad:TCpuLoad(jvmCpuLoad:0.0010090817356205853
, systemCpuLoad:0.014127144298688193), transaction:TTransaction(sampledNewCount:0, sampledContinuationCount:0, unsampledNewCount:0, unsampledContinuationCount:0), activeTrace:TActiveTrace(histogram:TActiv
eTraceHistogram(version:0, histogramSchemaType:2, activeTraceCount:[0, 0, 0, 0])))])
06-19 14:05:46 [DEBUG](c.n.p.r.s.DefaultPinpointServer    :418) DefaultPinpointServer@31d15709 handlePingPacket() started. packet:PingPacket{pingId:6(RUN_DUPLEX)}
06-19 14:05:46 [INFO ](c.n.p.c.r.h.AgentLifeCycleHandler  :65) handle lifecycle event - pinpointServer:DefaultPinpointServer@31d15709(remote:/127.0.0.1:41894, state:RUN_DUPLEX), state:Running
06-19 14:05:46 [DEBUG](c.n.p.c.d.h.HbaseAgentLifeCycleDao :54) insert agent life cycle. AgentLifeCycleBo{version=0, agentId='test-agent', startTimestamp=1466314545225, eventTimestamp=1466316346737, eventI
dentifier=4294967302, state=Running
06-19 14:05:46 [DEBUG](c.n.p.r.s.DefaultPinpointServer    :55) pong write success. channel:[id: 0x15937931, /127.0.0.1:41894 => /127.0.0.1:29994]
06-19 14:05:46 [INFO ](c.n.p.c.r.h.AgentEventHandler      :128) handle event: AgentEventBo{version=0, agentId='test-agent', startTimestamp=1466314545225, eventTimestamp=1466316346737, eventType='Agent pin
g'
06-19 14:05:46 [DEBUG](c.n.p.c.d.h.HbaseAgentEventDao     :56) insert event. AgentEventBo{version=0, agentId='test-agent', startTimestamp=1466314545225, eventTimestamp=1466316346737, eventType='Agent ping
'
# 

<img width="1007" alt="pinpoint_web" src="https://cloud.githubusercontent.com/assets/2519527/16175635/374b6cee-3627-11e6-95fd-fb83f0b4c8ef.png">

[quickstart_log.zip](https://github.com/naver/pinpoint/files/322142/quickstart_log.zip)

detailed logs are attached.

Thanks,


Issue comments:
Our quickstart web might be broken, will check and get back to you.

Yup, just reproduced your issue. We'll get right on this.
In the mean time, check out [1.5.2](https://github.com/naver/pinpoint/releases/tag/1.5.2) as this is our latest stable release.

Will let you know once a fix is up.
Thanks!

Fix applied.
Please pull source and rebuild.

Hi , I have pull source again and rebuild and retry. The major dashboard appeared and it's very nice.
But still found one chart keep "Loading" as attached screenshot.

<img width="1429" alt="pinpoint_one_chart_loading" src="https://cloud.githubusercontent.com/assets/2519527/16197191/af87dff0-3733-11e6-9ed0-3c6098c7d945.png">

Yup, sorry about that, it's just been fixed I think via #1861 
Please give it a try again.

Thanks, Now it's working


Pull request review comments:

Patch that resolved the issue:
diff --git a/web/src/main/webapp/common/services/url-vo.service.js b/web/src/main/webapp/common/services/url-vo.service.js
index 3af09e4b5769..11474699973e 100644
--- a/web/src/main/webapp/common/services/url-vo.service.js
+++ b/web/src/main/webapp/common/services/url-vo.service.js
@@ -25,11 +25,16 @@
 		 this.initUrlVo = function( pageName, $routeParams ) {
 			 switch( pageName ) {
 				 case "main":
-					 this.setApplication( $routeParams.application )
-						 .setReadablePeriod( $routeParams.readablePeriod )
-					 	 .setQueryEndDateTime( $routeParams.queryEndDateTime )
-						 .setCallee( PreferenceService.getCalleeByApp($routeParams.application) )
-					 	 .setCaller( PreferenceService.getCallerByApp($routeParams.application) );
+					 if ( $routeParams.readablePeriod === oPeriodType.REALTIME ) {
+						 this.setApplication( $routeParams.application )
+							 .setReadablePeriod( $routeParams.readablePeriod );
+					 } else {
+						 this.setApplication( $routeParams.application )
+							 .setReadablePeriod( $routeParams.readablePeriod )
+							 .setQueryEndDateTime( $routeParams.queryEndDateTime )
+							 .setCallee( PreferenceService.getCalleeByApp($routeParams.application) )
+							 .setCaller( PreferenceService.getCallerByApp($routeParams.application) );
+					 }
 					 break;
 				 case "filteredMap":
 					 this.setApplication( $routeParams.application )
diff --git a/web/src/main/webapp/features/navbar/navbar.directive.js b/web/src/main/webapp/features/navbar/navbar.directive.js
index 92714db6a9f8..9300d8b7996c 100644
--- a/web/src/main/webapp/features/navbar/navbar.directive.js
+++ b/web/src/main/webapp/features/navbar/navbar.directive.js
@@ -16,8 +16,8 @@
 		}
 	});
 	
-	pinpointApp.directive('navbarDirective', [ "navbarDirectiveConfig", "$route", "$rootScope", "$http","$document", "$timeout", "$window",  "webStorage", "helpContentService", "AnalyticsService", "PreferenceService", "TooltipService", "CommonAjaxService",
-	    function (cfg, $route, $rootScope, $http, $document, $timeout, $window, webStorage, helpContentService, analyticsService, preferenceService, tooltipService, commonAjaxService) {
+	pinpointApp.directive('navbarDirective', [ "navbarDirectiveConfig", "$route", "$rootScope", "$http","$document", "$timeout", "$window",  "webStorage", "helpContentService", "UrlVoService", "AnalyticsService", "PreferenceService", "TooltipService", "CommonAjaxService",
+	    function (cfg, $route, $rootScope, $http, $document, $timeout, $window, webStorage, helpContentService, UrlVoService, analyticsService, preferenceService, tooltipService, commonAjaxService) {
 	        return {
 	            restrict: 'EA',
 	            replace: true,
@@ -287,6 +287,9 @@
 								oNavbarVoService.setReadablePeriod(scope.readablePeriod);
 								oNavbarVoService.setQueryEndDateTime(moment(currentServerTime).format('YYYY-MM-DD-HH-mm-ss'));
 								oNavbarVoService.autoCalculateByQueryEndDateTimeAndReadablePeriod();
+								UrlVoService.setReadablePeriod(scope.readablePeriod);
+								UrlVoService.setQueryEndDateTime(moment(currentServerTime).format('YYYY-MM-DD-HH-mm-ss'));
+								UrlVoService.autoCalculateByQueryEndDateTimeAndReadablePeriod();
 								emitAsChanged();
 								setDateTime($fromPicker, oNavbarVoService.getQueryStartTime());
 								setDateTime($toPicker, oNavbarVoService.getQueryEndTime());
@@ -297,6 +300,9 @@
 								oNavbarVoService.setReadablePeriod( preferenceService.getRealtimeScatterXRangeStr() );
 								oNavbarVoService.setQueryEndDateTime(moment(currentServerTime).format('YYYY-MM-DD-HH-mm-ss'));
 								oNavbarVoService.autoCalculateByQueryEndDateTimeAndReadablePeriod();
+								UrlVoService.setReadablePeriod( preferenceService.getRealtimeScatterXRangeStr() );
+								UrlVoService.setQueryEndDateTime(moment(currentServerTime).format('YYYY-MM-DD-HH-mm-ss'));
+								UrlVoService.autoCalculateByQueryEndDateTimeAndReadablePeriod();
 								emitAsChanged();
 								setDateTime($fromPicker, oNavbarVoService.getQueryStartTime());
 								setDateTime($toPicker, oNavbarVoService.getQueryEndTime());
@@ -306,6 +312,10 @@
 	                        oNavbarVoService.setQueryStartTime(getQueryStartTime());
 	                        oNavbarVoService.setQueryEndTime(getQueryEndTime());
 	                        oNavbarVoService.autoCalcultateByQueryStartTimeAndQueryEndTime();
+							UrlVoService.setPeriodType( cfg.periodType.RANGE );
+							UrlVoService.setQueryStartTime(getQueryStartTime());
+							UrlVoService.setQueryEndTime(getQueryEndTime());
+							UrlVoService.autoCalcultateByQueryStartTimeAndQueryEndTime();
 	                        emitAsChanged();
 	                    }
 	                };


Test patch: