gm/rebaseline_server/static/view.html - Issue 25045003: HTTP GM results viewer: server now returns category summaries along with testData

Side by Side Diff: gm/rebaseline_server/static/view.html

Issue 25045003: HTTP GM results viewer: server now returns category summaries along with testData (Closed) Base URL: http://skia.googlecode.com/svn/trunk/

Patch Set: add_comment Created 7 years, 2 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch | Annotate | Revision Log

OLD	NEW
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2	2

3 <html ng-app="Loader">	3 <html ng-app="Loader">

4	4

5 <head>	5 <head>

6 <title>Current GM Results</title>	6 <title>Current GM Results</title>

7 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js" ></script>	7 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js" ></script>

8 <script src="loader.js"></script>	8 <script src="loader.js"></script>

9 </head>	9 </head>

10	10

11 <body>	11 <body>

12 <div ng-controller="Loader.Controller">	12 <div ng-controller="Loader.Controller">

13	13

14 <!-- TODO(epoger): Add a warning banner if the server is running in	14 <!-- TODO(epoger): Add a warning banner if the server is running in

15 --export mode	15 --export mode

16 -->	16 -->

17	17

	18 <!-- TODO(epoger): Add some indication of how old the

	19 expected/actual data is -->

	20

18 Settings:	21 Settings:

19 <ul>	22 <ul>

20 <!-- TODO(epoger): Now that we get multiple result types in a single	23 <!-- TODO(epoger): Now that we get multiple result types in a single

21 fetch, modify the UI: add a column showing resultType, and allow	24 fetch, modify the UI: add a column showing resultType, and allow

22 the user to sort/filter on that column just like all the	25 the user to sort/filter on that column just like all the

23 others. -->	26 others. -->

24 <li>show results of type	27 <li>show results of type

25 <select ng-model="showResultsOfType"	28 <select ng-model="showResultsOfType"

26 ng-init="showResultsOfType='failed'">	29 ng-init="showResultsOfType='failed'">

27 <option>failed</option>	30 <option ng-repeat="(resultType, count) in categories['resultType']"
	epoger 2013/09/27 18:12:39 For now, I'm still showing the resultTypes in a dr For now, I'm still showing the resultTypes in a dropdown, but now that dropdown shows how many results there are of each type. In a future CL, I will allow filtering on multiple categories, not just resultTypes. borenet 2013/09/27 19:22:01 Please pre-select the category that you're display Show quoted text On 2013/09/27 18:12:39, epoger wrote: > For now, I'm still showing the resultTypes in a dropdown, but now that dropdown > shows how many results there are of each type. > > In a future CL, I will allow filtering on multiple categories, not just > resultTypes. Please pre-select the category that you're displaying on page load. epoger 2013/09/27 21:38:13 Unfortunately, for the reasons outlined in http:// Show quoted text On 2013/09/27 19:22:01, borenet wrote: > On 2013/09/27 18:12:39, epoger wrote: > > For now, I'm still showing the resultTypes in a dropdown, but now that > dropdown > > shows how many results there are of each type. > > > > In a future CL, I will allow filtering on multiple categories, not just > > resultTypes. > > Please pre-select the category that you're displaying on page load. Unfortunately, for the reasons outlined in http://stackoverflow.com/questions/15326164/setting-the-selected-item-in-angu... , that is tricky to do. Given that the dropdown list will be going away very soon in favor of sorting/filtering on all columns (as described in the TODO above), I would rather leave it as-is if that's OK with you. borenet 2013/09/30 13:06:02 I know nothing of angular, but in jinja/django I t Show quoted text On 2013/09/27 21:38:13, epoger wrote: > On 2013/09/27 19:22:01, borenet wrote: > > On 2013/09/27 18:12:39, epoger wrote: > > > For now, I'm still showing the resultTypes in a dropdown, but now that > > dropdown > > > shows how many results there are of each type. > > > > > > In a future CL, I will allow filtering on multiple categories, not just > > > resultTypes. > > > > Please pre-select the category that you're displaying on page load. > > Unfortunately, for the reasons outlined in > http://stackoverflow.com/questions/15326164/setting-the-selected-item-in-angu... > , that is tricky to do. > > Given that the dropdown list will be going away very soon in favor of > sorting/filtering on all columns (as described in the TODO above), I would > rather leave it as-is if that's OK with you. I know nothing of angular, but in jinja/django I think you could add something like this in your option tag: selected="{{ 1 if resultType == showResultsOfType else 0 }}"
28 <option>failure-ignored</option>	31 value="{{resultType}}">

	32 {{resultType}} ({{count}})

	33 </option>

29 <!--	34 <!--

30 <option>no-comparison</option>

31

32 TODO(epoger): For now, I have disabled viewing the

33 no-comparison results because there are so many of them, and

34 the browser takes forever to download all the images. Maybe

35 we should use some sort of lazy-loading technique

36 (e.g. http://www.appelsiini.net/projects/lazyload ), so that

37 the images are only loaded as they become viewable...

38 -->

39 <!--

40 <option>succeeded</option>

41

42 TODO(epoger): See results.py: for now, I have disabled	35 TODO(epoger): See results.py: for now, I have disabled

43 returning succeeded tests as part of the JSON, because it	36 returning succeeded tests as part of the JSON, because it

44 makes the returned JSON too big (and slows down the client).	37 makes the returned JSON too big (and slows down the client).

	38

	39 Also, we should use some sort of lazy-loading technique

	40 (e.g. http://www.appelsiini.net/projects/lazyload ), so that

	41 the images are only loaded as they become viewable...

	42 that will help with long lists like resultType='no-comparison'.

45 -->	43 -->

46 </select>	44 </select>

	45 <br>

	46 TODO(epoger): 'no-comparison' will probably take forever;

	47 see HTML source for details

	48 <br>

	49 TODO(epoger): 'succeeded' will not show any results;

	50 see HTML source for details

47 </li>	51 </li>

48 <li>image size	52 <li>image size

49 <input type="text" ng-model="imageSize" ng-init="imageSize=100"	53 <input type="text" ng-model="imageSize" ng-init="imageSize=100"

50 maxlength="4"/>	54 maxlength="4"/>
	borenet 2013/09/27 19:22:01 Can you make this only update the image size when Can you make this only update the image size when a button is pressed, or on "enter", lost focus, etc? That will save a lot of work when this feature is used. epoger 2013/09/27 21:38:13 Added an "apply" button. Show quoted text On 2013/09/27 19:22:01, borenet wrote: > Can you make this only update the image size when a button is pressed, or on > "enter", lost focus, etc? That will save a lot of work when this feature is > used. Added an "apply" button.
51 </li>	55 </li>

52 </ul>	56 </ul>

53	57

54 <p>	58 <p>

	59 Click on each column header to re-sort by that column...<br>
	borenet 2013/09/27 19:22:01 Can we at least make the column headers change the Can we at least make the column headers change the cursor on mouseover? It's not clear (except from this label) that clicking on them should do anything. Also, I can sort by the images, which I don't think makes much sense. epoger 2013/09/27 21:38:13 In the long term, improving the column sorting as Show quoted text On 2013/09/27 19:22:01, borenet wrote: > Can we at least make the column headers change the cursor on mouseover? It's > not clear (except from this label) that clicking on them should do anything. In the long term, improving the column sorting as alluded to in the TODO below will make this clearer (and allow sort-up and sort-down). In the meanwhile, I made the headers buttons... is that clearer? Show quoted text > Also, I can sort by the images, which I don't think makes much sense. Au contraire... I like that I can see all tests which resulted in identical images, all in one bunch. But if you don't like that, I recommend you don't click there. :-) borenet 2013/09/30 13:06:02 I think the clearest thing is something like a rad Show quoted text On 2013/09/27 21:38:13, epoger wrote: > On 2013/09/27 19:22:01, borenet wrote: > > Can we at least make the column headers change the cursor on mouseover? It's > > not clear (except from this label) that clicking on them should do anything. > > In the long term, improving the column sorting as alluded to in the TODO below > will make this clearer (and allow sort-up and sort-down). > > In the meanwhile, I made the headers buttons... is that clearer? > I think the clearest thing is something like a radio button, which displays just the column header when not selected and displays an arrow when selected. Something like what we see on the issue tracker, although that's even simpler in that it just displays arrows next to every column header. Using an anchor tag with href="#" should get you the right mouse pointer. Show quoted text > > Also, I can sort by the images, which I don't think makes much sense. > > Au contraire... I like that I can see all tests which resulted in identical > images, all in one bunch. But if you don't like that, I recommend you don't > click there. :-) > Fair enough! epoger 2013/09/30 15:04:59 Good idea. Changed 'em to radio buttons for now. Show quoted text On 2013/09/30 13:06:02, borenet wrote: > I think the clearest thing is something like a radio button, which displays just > the column header when not selected and displays an arrow when selected. Good idea. Changed 'em to radio buttons for now. Show quoted text > Something like what we see on the issue tracker, although that's even simpler in > that it just displays arrows next to every column header. Using an anchor tag > with href="#" should get you the right mouse pointer. I will improve the sort UI soon, aiming for something along the lines of http://jsfiddle.net/vojtajina/js64b/14/ borenet 2013/09/30 15:31:23 SGTM. That example looks great. Show quoted text On 2013/09/30 15:04:59, epoger wrote: > On 2013/09/30 13:06:02, borenet wrote: > > I think the clearest thing is something like a radio button, which displays > just > > the column header when not selected and displays an arrow when selected. > > Good idea. Changed 'em to radio buttons for now. > > > Something like what we see on the issue tracker, although that's even simpler > in > > that it just displays arrows next to every column header. Using an anchor tag > > with href="#" should get you the right mouse pointer. > > I will improve the sort UI soon, aiming for something along the lines of > http://jsfiddle.net/vojtajina/js64b/14/ SGTM. That example looks great.
55 <!-- TODO(epoger): Show some sort of "loading" message, instead of	60 <!-- TODO(epoger): Show some sort of "loading" message, instead of

56 an empty table, while the data is loading. Otherwise, if there are	61 an empty table, while the data is loading. Otherwise, if there are

57 a lot of failures and it takes a long time to load them, the user	62 a lot of failures and it takes a long time to load them, the user

58 might think there are NO failures and leave the page! -->	63 might think there are NO failures and leave the page! -->

59 <table border="1">	64 <table border="1">

60 <tr>	65 <tr>

61 <th ng:click="sortColumn='builder'">Builder</th>	66 <th ng:click="sortColumn='builder'">Builder</th>

62 <th ng:click="sortColumn='test'">Test</th>	67 <th ng:click="sortColumn='test'">Test</th>

63 <th ng:click="sortColumn='config'">Config</th>	68 <th ng:click="sortColumn='config'">Config</th>

64 <th ng:click="sortColumn='expectedHashDigest'">Expected Image</th>	69 <th ng:click="sortColumn='expectedHashDigest'">Expected Image</th>

65 <th ng:click="sortColumn='actualHashDigest'">Actual Image</th>	70 <th ng:click="sortColumn='actualHashDigest'">Actual Image</th>

66 <!-- TODO(epoger): Add more columns, such as...	71 <!-- TODO(epoger): Add more columns, such as...

67 pixel diff	72 pixel diff

68 notes/bugs	73 notes/bugs

69 ignoreFailure boolean	74 ignoreFailure boolean

70 -->	75 -->

71 </tr>	76 </tr>

72 <!-- TODO(epoger): improve the column sorting, as per	77 <!-- TODO(epoger): improve the column sorting, as per

73 http://jsfiddle.net/vojtajina/js64b/14/ -->	78 http://jsfiddle.net/vojtajina/js64b/14/ -->

74 <tr ng-repeat="result in results \| filter: { resultType: showResultsOfTy pe } \| orderBy: sortColumn">	79 <tr ng-repeat="result in testData \| filter: { resultType: showResultsOfT ype } \| orderBy: sortColumn">

75 <td>{{result.builder}}</td>	80 <td>{{result.builder}}</td>

76 <td>{{result.test}}</td>	81 <td>{{result.test}}</td>

77 <td>{{result.config}}</td>	82 <td>{{result.config}}</td>

78 <td>	83 <td>

79 <a target="_blank" href="http://chromium-skia-gm.commondatastorage.g oogleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.expectedHa shDigest}}.png">	84 <a target="_blank" href="http://chromium-skia-gm.commondatastorage.g oogleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.expectedHa shDigest}}.png">

80 <img width="{{imageSize}}" src="http://chromium-skia-gm.commondata storage.googleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.e xpectedHashDigest}}.png"/>	85 <img width="{{imageSize}}" src="http://chromium-skia-gm.commondata storage.googleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.e xpectedHashDigest}}.png"/>

81 </a>	86 </a>

82 </td>	87 </td>

83 <td>	88 <td>

84 <a target="_blank" href="http://chromium-skia-gm.commondatastorage.g oogleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.actualHashDi gest}}.png">	89 <a target="_blank" href="http://chromium-skia-gm.commondatastorage.g oogleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.actualHashDi gest}}.png">

85 <img width="{{imageSize}}" src="http://chromium-skia-gm.commondata storage.googleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.act ualHashDigest}}.png"/>	90 <img width="{{imageSize}}" src="http://chromium-skia-gm.commondata storage.googleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.act ualHashDigest}}.png"/>

86 </a>	91 </a>

87 </td>	92 </td>

88 </tr>	93 </tr>

89 </table>	94 </table>

90 </div>	95 </div>

91	96

92 <!-- TODO(epoger): Can we get the base URLs (commondatastorage and	97 <!-- TODO(epoger): Can we get the base URLs (commondatastorage and

93 issues list) from	98 issues list) from

94 http://skia.googlecode.com/svn/buildbot/site_config/global_variables.json	99 http://skia.googlecode.com/svn/buildbot/site_config/global_variables.json

95 ? I tried importing the	100 ? I tried importing the

96 http://skia.googlecode.com/svn/buildbot/skia_tools.js script and using	101 http://skia.googlecode.com/svn/buildbot/skia_tools.js script and using

97 that to do so, but I got Access-Control-Allow-Origin errors.	102 that to do so, but I got Access-Control-Allow-Origin errors.

98 -->	103 -->

99	104

100 </body>	105 </body>

101 </html>	106 </html>

OLD	NEW

« gm/rebaseline_server/results.py ('K') | « gm/rebaseline_server/static/loader.js ('k') | no next file » | no next file with comments »