From a3a34d4afe60e6ebb68829b87ee9276e0f7fe007 Mon Sep 17 00:00:00 2001 From: Nuwan Chathuranga Date: Wed, 9 Jun 2021 23:28:59 +0530 Subject: [PATCH] show latency scores alone with latency badge in musician hover bubble show internet and audio latency scores next to latency badge --- web/app/assets/javascripts/session_utils.js | 25 ++++++++--- .../stylesheets/client/hoverBubble.scss | 5 +++ .../clients/_account_session_detail.html.haml | 4 +- web/spec/features/musician_hover_spec_1.rb | 42 ++++++++++++------- web/spec/features/musician_hover_spec_2.rb | 22 ++++++---- web/spec/support/utilities.rb | 26 ++++++++---- 6 files changed, 86 insertions(+), 38 deletions(-) diff --git a/web/app/assets/javascripts/session_utils.js b/web/app/assets/javascripts/session_utils.js index cbddaf972..4698ce35d 100644 --- a/web/app/assets/javascripts/session_utils.js +++ b/web/app/assets/javascripts/session_utils.js @@ -80,32 +80,39 @@ } sessionUtils.changeLatencyDataStructure = function(data) { - var alteredData = { + var _data = { id: data.user_id, audio_latency: data.audio_latency, full_score: data.ars['total_latency'], internet_score: data.ars['internet_latency'] } - return alteredData; + return _data; } - sessionUtils.scoreInfo = function(full_score, isSameUser) { + sessionUtils.scoreInfo = function(userSession, isSameUser) { + var full_score = userSession.full_score; + var internet_score = userSession.internet_score; + var audio_latency = userSession.audio_latency; + var latencyDescription; var latencyStyle; var iconName; var description; + var latencyInfo; if(isSameUser) { latencyDescription = LATENCY.ME.description; latencyStyle = LATENCY.ME.style; iconName = 'purple'; description = 'me'; + latencyInfo = ''; } else if (full_score <= LATENCY.FAILED.max) { latencyDescription = LATENCY.FAILED.description; latencyStyle = LATENCY.FAILED.style; iconName = 'gray'; description = 'failed'; + latencyInfo = ''; } // else if (!full_score) { // latencyDescription = LATENCY.UNKNOWN.description; @@ -118,42 +125,48 @@ latencyStyle = LATENCY.UNKNOWN.style; iconName = 'purple'; description = 'missing'; + latencyInfo = ''; } else if (full_score <= LATENCY.GOOD.max) { latencyDescription = LATENCY.GOOD.description; latencyStyle = LATENCY.GOOD.style; iconName = 'green'; description = 'good'; + latencyInfo = 'Internet '+ internet_score + 'ms + Audio '+ audio_latency + 'ms'; } else if (full_score <= LATENCY.MEDIUM.max) { latencyDescription = LATENCY.MEDIUM.description; latencyStyle = LATENCY.MEDIUM.style; iconName = 'yellow'; description = 'fair'; + latencyInfo = 'Internet '+ internet_score + 'ms + Audio '+ audio_latency + 'ms'; } else if (full_score <= LATENCY.POOR.max) { latencyDescription = LATENCY.POOR.description; latencyStyle = LATENCY.POOR.style; iconName = 'red'; description = 'poor'; + latencyInfo = 'Internet '+ internet_score + 'ms + Audio '+ audio_latency + 'ms'; } else if (full_score > LATENCY.UNACCEPTABLE.min) { latencyStyle = LATENCY.UNACCEPTABLE.style; latencyDescription = LATENCY.UNACCEPTABLE.description; iconName = 'blue'; description = 'unacceptable'; + latencyInfo = 'Internet '+ internet_score + 'ms + Audio '+ audio_latency + 'ms'; } return { latency_style: latencyStyle, latency_text: latencyDescription, icon_name: iconName, - description: description + description: description, + latency_info: latencyInfo }; } - sessionUtils.createLatency = function(user) { - return sessionUtils.scoreInfo(user.full_score, user.id === context.JK.currentUserId) + sessionUtils.createLatency = function(userLatency) { + return sessionUtils.scoreInfo(userLatency, userLatency.id === context.JK.currentUserId) } function clearAudioTimeout() { diff --git a/web/app/assets/stylesheets/client/hoverBubble.scss b/web/app/assets/stylesheets/client/hoverBubble.scss index 407760f1c..408195d32 100644 --- a/web/app/assets/stylesheets/client/hoverBubble.scss +++ b/web/app/assets/stylesheets/client/hoverBubble.scss @@ -101,6 +101,11 @@ color:white; } + + .latency-info{ + margin-left: 8px; + } + .latency-unknown { background-color:$latencyBadgeUnknown; } diff --git a/web/app/views/clients/_account_session_detail.html.haml b/web/app/views/clients/_account_session_detail.html.haml index 0b62b7217..7e964205d 100644 --- a/web/app/views/clients/_account_session_detail.html.haml +++ b/web/app/views/clients/_account_session_detail.html.haml @@ -163,5 +163,7 @@ // also used by musicians page %script{type: 'text/template', id: 'template-account-session-latency'} - .latency{class: "{{data.latency_style}}", 'data-user-id' => "{{data.id}}", 'data-audio-latency' => "{{data.audio_latency || ''}}", 'data-full-score' => "{{data.full_score || ''}}", 'data-internet-score' => "{{data.internet_score || ''}}"} + %span.latency{class: "{{data.latency_style}}", 'data-user-id' => "{{data.id}}", 'data-audio-latency' => "{{data.audio_latency || ''}}", 'data-full-score' => "{{data.full_score || ''}}", 'data-internet-score' => "{{data.internet_score || ''}}"} {{data.latency_text}} + %span.latency-info + {{data.latency_info}} diff --git a/web/spec/features/musician_hover_spec_1.rb b/web/spec/features/musician_hover_spec_1.rb index 14f5ff9fa..30a6634d4 100644 --- a/web/spec/features/musician_hover_spec_1.rb +++ b/web/spec/features/musician_hover_spec_1.rb @@ -28,7 +28,7 @@ describe "Musician Hover", :js => true, :type => :feature, :capybara_feature => describe "Latency badge" do it "show GOOD" do - response_body = mock_latency_response([{ user: user2, latency: 1.0}]) #sessionUtils.LATENCY.GOOD : {description: "GOOD", style: "latency-good", min: 0.0, max: 40.0}, + response_body = mock_latency_response([{ user: user2, ars_total_latency: 1.0, ars_internet_latency: 0.5, audio_latency: 0.5 }]) #sessionUtils.LATENCY.GOOD : {description: "GOOD", style: "latency-good", min: 0.0, max: 40.0}, stub_request(:post, latency_data_uri) .with(:headers => {'Accept'=>'*/*', 'Content-Type'=>'application/json', 'User-Agent'=>'Ruby'}) @@ -37,11 +37,15 @@ describe "Musician Hover", :js => true, :type => :feature, :capybara_feature => site_search(user2.first_name, expand: true) find("#search-results a[user-id=\"#{user2.id}\"][hoveraction=\"musician\"]", text: user2.name).hover_intent find('h3', text: user2.name) - find("#musician-latency-badge div.latency", text: 'GOOD') + find("#musician-latency-badge .latency", text: 'GOOD') + #sleep(2) + #save_screenshot("latency-good.png") + find("#musician-latency-badge .latency-info", text: 'Internet 0.5ms + Audio 0.5ms') + end it "show POOR" do - response_body = mock_latency_response([ {user: user2, latency: 71.0 }]) #sessionUtils.LATENCY.POOR : {description: "POOR", style: "latency-poor", min: 70.0, max: 100}, + response_body = mock_latency_response([ {user: user2, ars_total_latency: 71.0, ars_internet_latency: 35, audio_latency: 36 }]) #sessionUtils.LATENCY.POOR : {description: "POOR", style: "latency-poor", min: 70.0, max: 100}, stub_request(:post, latency_data_uri) .with(:headers => {'Accept'=>'*/*', 'Content-Type'=>'application/json', 'User-Agent'=>'Ruby'}) .to_return( body: response_body, status: 200) @@ -49,11 +53,14 @@ describe "Musician Hover", :js => true, :type => :feature, :capybara_feature => site_search(user2.first_name, expand: true) find("#search-results a[user-id=\"#{user2.id}\"][hoveraction=\"musician\"]", text: user2.name).hover_intent find('h3', text: user2.name) - find("#musician-latency-badge div.latency", text: 'POOR') + find("#musician-latency-badge .latency", text: 'POOR') + #sleep(2) + #save_screenshot("latency-poor.png") + find("#musician-latency-badge .latency-info", text: 'Internet 35ms + Audio 36ms') end it "show FAIR" do - response_body = mock_latency_response([ { user: user2, latency: 41.0 }]) #sessionUtils.LATENCY.FAIR : {description: "FAIR", style: "latency-fair", min: 40.0, max: 70.0}, + response_body = mock_latency_response([ { user: user2, ars_total_latency: 41.0, ars_internet_latency: 21.0, audio_latency: 20.0 }]) #sessionUtils.LATENCY.FAIR : {description: "FAIR", style: "latency-fair", min: 40.0, max: 70.0}, stub_request(:post, latency_data_uri) .with(:headers => {'Accept'=>'*/*', 'Content-Type'=>'application/json', 'User-Agent'=>'Ruby'}) .to_return( body: response_body, status: 200) @@ -61,15 +68,18 @@ describe "Musician Hover", :js => true, :type => :feature, :capybara_feature => site_search(user2.first_name, expand: true) find("#search-results a[user-id=\"#{user2.id}\"][hoveraction=\"musician\"]", text: user2.name).hover_intent find('h3', text: user2.name) - find("#musician-latency-badge div.latency", text: 'FAIR') + find("#musician-latency-badge .latency", text: 'FAIR') + #sleep(2) + #save_screenshot("latency-fair.png") + find("#musician-latency-badge .latency-info", text: 'Internet 21ms + Audio 20ms') end it "show latency badge when there are set of musicians in search result" do response_body = mock_latency_response([ - { user: user2, latency: 1.0 }, #GOOD - { user: user3, latency: 71.0 }, #POOR - { user: user4, latency: 41.0 }, #FAIR - { user: user5, latency: 101.0 } #UNACCEPTABLE + { user: user2, ars_total_latency: 1.0, ars_internet_latency: 0.4, audio_latency: 0.6 }, #GOOD + { user: user3, ars_total_latency: 71.0, ars_internet_latency: 35, audio_latency: 36 }, #POOR + { user: user4, ars_total_latency: 41.0, ars_internet_latency: 15, audio_latency: 26.0 }, #FAIR + { user: user5, ars_total_latency: 101.0, ars_internet_latency: 31.75, audio_latency: 70.25 } #UNACCEPTABLE ]) stub_request(:post, latency_data_uri) @@ -82,7 +92,8 @@ describe "Musician Hover", :js => true, :type => :feature, :capybara_feature => selector = "#search-results a[user-id=\"#{user2.id}\"][hoveraction=\"musician\"]" find(selector, text: user2.name).hover_intent find('h3', text: user2.name) - find("#musician-latency-badge div.latency", text: 'GOOD') + find("#musician-latency-badge .latency", text: 'GOOD') + find("#musician-latency-badge .latency-info", text: 'Internet 0.4ms + Audio 0.6ms') page.execute_script("$('#{selector}').mouseleave();") sleep(1) @@ -90,7 +101,8 @@ describe "Musician Hover", :js => true, :type => :feature, :capybara_feature => selector = "#search-results a[user-id=\"#{user3.id}\"][hoveraction=\"musician\"]" find(selector, text: user3.name).hover_intent find('h3', text: user3.name) - find("#musician-latency-badge div.latency", text: 'POOR') + find("#musician-latency-badge .latency", text: 'POOR') + find("#musician-latency-badge .latency-info", text: 'Internet 35ms + Audio 36ms') page.execute_script("$('#{selector}').mouseleave();") sleep(1) @@ -98,7 +110,8 @@ describe "Musician Hover", :js => true, :type => :feature, :capybara_feature => selector = "#search-results a[user-id=\"#{user4.id}\"][hoveraction=\"musician\"]" find(selector, text: user4.name).hover_intent find('h3', text: user4.name) - find("#musician-latency-badge div.latency", text: 'FAIR') + find("#musician-latency-badge .latency", text: 'FAIR') + find("#musician-latency-badge .latency-info", text: 'Internet 15ms + Audio 26ms') page.execute_script("$('#{selector}').mouseleave();") sleep(1) @@ -106,7 +119,8 @@ describe "Musician Hover", :js => true, :type => :feature, :capybara_feature => selector = "#search-results a[user-id=\"#{user5.id}\"][hoveraction=\"musician\"]" find(selector, text: user5.name).hover_intent find('h3', text: user5.name) - find("#musician-latency-badge div.latency", text: 'UNACCEPTABLE') + find("#musician-latency-badge .latency", text: 'UNACCEPTABLE') + find("#musician-latency-badge .latency-info", text: 'Internet 31.75ms + Audio 70.25ms') page.execute_script("$('#{selector}').mouseleave();") sleep(1) diff --git a/web/spec/features/musician_hover_spec_2.rb b/web/spec/features/musician_hover_spec_2.rb index cce502e11..aeea8e820 100644 --- a/web/spec/features/musician_hover_spec_2.rb +++ b/web/spec/features/musician_hover_spec_2.rb @@ -17,8 +17,8 @@ describe "Musician Hover", :js => true, :type => :feature, :capybara_feature => end describe "Latency badge" do - it "show ME (same user)" do - response_body = mock_latency_response([{ user: user1, latency: 1.0 }]) + it "show ME" do + response_body = mock_latency_response([{ user: user1, ars_total_latency: 1.0, ars_internet_latency: 0.1, audio_latency: 0.5 }]) stub_request(:post, latency_data_uri) .with(:headers => {'Accept'=>'*/*', 'Content-Type'=>'application/json', 'User-Agent'=>'Ruby'}) .to_return( body: response_body, status: 200) @@ -26,7 +26,8 @@ describe "Musician Hover", :js => true, :type => :feature, :capybara_feature => site_search(user1.first_name, expand: true) find("#search-results a[user-id=\"#{user1.id}\"][hoveraction=\"musician\"]", text: user1.name).hover_intent find('h3', text: user1.name) - find("#musician-latency-badge div.latency", text: 'ME') + find("#musician-latency-badge .latency", text: 'ME') + find("#musician-latency-badge .latency-info").should have_content("") end @@ -38,7 +39,8 @@ describe "Musician Hover", :js => true, :type => :feature, :capybara_feature => site_search(user2.first_name, expand: true) find("#search-results a[user-id=\"#{user2.id}\"][hoveraction=\"musician\"]", text: user2.name).hover_intent find('h3', text: user2.name) - find("#musician-latency-badge", text: 'FAILED') + find("#musician-latency-badge .latency", text: 'FAILED') + find("#musician-latency-badge .latency-info").should have_content("") end it "show UNKNOWN" do @@ -50,11 +52,12 @@ describe "Musician Hover", :js => true, :type => :feature, :capybara_feature => site_search(user2.first_name, expand: true) find("#search-results a[user-id=\"#{user2.id}\"][hoveraction=\"musician\"]", text: user2.name).hover_intent find('h3', text: user2.name) - find("#musician-latency-badge div.latency", text: 'UNKNOWN') + find("#musician-latency-badge .latency", text: 'UNKNOWN') + find("#musician-latency-badge .latency-info").should have_content("") end - it "show UNACCEPTABLE", focus: true do - response_body = mock_latency_response([{ user: user2, latency: 101.0 }]) #sessionUtils.LATENCY.UNACCEPTABLE : {description: "UNACCEPTABLE", style: "latency-unacceptable", min: 100.0, max: 10000000}, + it "show UNACCEPTABLE" do + response_body = mock_latency_response([{ user: user2, ars_total_latency: 101.0, ars_internet_latency: 81, audio_latency: 20 }]) #sessionUtils.LATENCY.UNACCEPTABLE : {description: "UNACCEPTABLE", style: "latency-unacceptable", min: 100.0, max: 10000000}, stub_request(:post, latency_data_uri) .with(:headers => {'Accept'=>'*/*', 'Content-Type'=>'application/json', 'User-Agent'=>'Ruby'}) .to_return( body: response_body, status: 200) @@ -62,7 +65,10 @@ describe "Musician Hover", :js => true, :type => :feature, :capybara_feature => site_search(user2.first_name, expand: true) find("#search-results a[user-id=\"#{user2.id}\"][hoveraction=\"musician\"]", text: user2.name).hover_intent find('h3', text: user2.name) - find("#musician-latency-badge div.latency", text: 'UNACCEPTABLE') + find("#musician-latency-badge .latency", text: 'UNACCEPTABLE') + #sleep(2) + #save_screenshot("latency-unaccptable.png") + find("#musician-latency-badge .latency-info", text: 'Internet 81ms + Audio 20ms') end end diff --git a/web/spec/support/utilities.rb b/web/spec/support/utilities.rb index 516ae1689..47a2a757a 100644 --- a/web/spec/support/utilities.rb +++ b/web/spec/support/utilities.rb @@ -801,23 +801,31 @@ def mock_latency_response(collection) resp = [] if collection && collection.any? resp = collection.map do |latency_item| - user = latency_item[:user] - latency = latency_item[:latency] + user = latency_item[:user] + latency = latency_item[:latency] + audio_latency = latency_item[:audio_latency] + audio_latency_unknown = latency_item[:audio_latency_unknown] + ars_internet_latency = latency_item[:ars_internet_latency] + ars_total_latency = latency_item[:ars_total_latency] + p2p_internet_latency = latency_item[:p2p_internet_latency] + p2p_total_latency = latency_item[:p2p_total_latency] + wifi = latency_item[:wifi] + { "user_id": user.id, "first_name": user.first_name, "last_name": user.last_name, - "audio_latency": 4.0, - "audio_latency_unknown": false, + "audio_latency": audio_latency, + "audio_latency_unknown": audio_latency_unknown, "ars": { - "internet_latency": latency, - "total_latency": latency + "internet_latency": ars_internet_latency, + "total_latency": ars_total_latency }, "p2p": { - "internet_latency": latency, - "total_latency": latency + "internet_latency": p2p_internet_latency, + "total_latency": p2p_total_latency }, - "wifi": false + "wifi": wifi } end end