source: Dev/branches/rest-dojo-ui/client/util/checkstyle/checkstyleReport.html @ 256

Last change on this file since 256 was 256, checked in by hendrikvanantwerpen, 13 years ago

Reworked project structure based on REST interaction and Dojo library. As
soon as this is stable, the old jQueryUI branch can be removed (it's
kept for reference).
File size: 14.7 KB
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3<head>
4        <style type="text/css">
5                @import "../../dojo/resources/dojo.css";
6                @import "../../dojox/grid/resources/Grid.css";
7                @import "../../dojox/grid/resources/soriaGrid.css";
8
9                html, body, #main{     
10                        width: 100%;    /* make the body expand to fill the visible window */
11                        height: 100%;
12                        overflow: hidden;       /* erase window level scrollbars */
13                        padding: 0 0 0 0;
14                        margin: 0 0 0 0;
15                        font: 10pt Arial,Myriad,Tahoma,Verdana,sans-serif;
16                }
17               
18                #checks label {
19                        padding: 4px;
20                        float: left;
21                }
22                #checks input {
23                        float: right;
24                }
25                #checks div {
26                        height: 15px;
27                        padding: 4px;
28                        margin-top: 5px;
29                }
30        </style>
31
32        <!-- required: the default dijit theme: -->
33        <link id="themeStyles" rel="stylesheet" href="../../dijit/themes/soria/soria.css">
34
35        <!-- required: dojo.js -->
36        <script type="text/javascript" src="../../dojo/dojo.js"
37                djConfig="isDebug: true, parseOnLoad: true"></script>
38
39        <script type="text/javascript">
40                dojo.require("dijit.dijit"); // optimize: load dijit layer
41                dojo.require("dijit.layout.BorderContainer");
42                dojo.require("dijit.form.FilteringSelect");
43                dojo.require("dijit.form.Button");
44                dojo.require("dijit.form.ToggleButton");
45                dojo.require("dijit.layout.TabContainer");
46                dojo.require("dijit.layout.ContentPane");
47                dojo.require("dojox.grid.DataGrid");
48                dojo.require("dojo.data.ItemFileReadStore");
49                dojo.require("dojo.date.locale");
50                dojo.require("dijit.Dialog");
51        </script>
52
53       
54        <script type="text/javascript" src="checkstyleUtil.js"></script>
55        <script type="text/javascript">
56                var singleFileStore;
57                var errorQuery;
58                var saveErrorMsg = "You may need to rename the checkstyle.php.rename.html file to checkstyle.php."
59                                                                + "\nPlease read the readme.txt file in the /util/checkstyle folder.";
60
61                dojo.addOnLoad(function(){
62                        checkstyleStore.fetch({query: {date : '*'}, onComplete: function(items){
63                                var checkstyleReportDate = new Date(checkstyleStore.getValue(items[0], "date"));
64                                var dateStr = dojo.date.locale.format((new Date(checkstyleReportDate)), {formatLength: "medium"});
65                                       
66                                document.title = "Dojo Checkstyle report generated on " + dateStr;
67                                dojo.byId("reportDate").innerHTML = dateStr;   
68                        }});
69                       
70                        dojo.connect(dijit.byId("messagesGrid"), "onRowClick", doEdit);
71                       
72                });
73                var cachedFiles = {};
74                var changedFiles = [];
75                var navKeys = {};
76                dojo.forEach([dojo.keys.UP_ARROW, dojo.keys.DOWN_ARROW,
77                                                dojo.keys.LEFT_ARROW, dojo.keys.RIGHT_ARROW,
78                                                dojo.keys.ENTER], function(code){
79                                                        navKeys[code] = true;
80                                                });
81                function updateLine(evt) {
82                        evt = dojo.fixEvent(evt);
83                        if (navKeys[evt.keyCode]) {
84                                dojo.byId("lineNumber").innerHTML = getCursorPosition(evt.target);
85                        }
86                }
87               
88                function getCursorPosition(textarea) {
89                        if(textarea.selectionStart){
90                                return textarea.selectionStart;
91                        }else if(dojo.doc.selection){ //IE
92                                var range = dojo.doc.selection.createRange();
93                                return range;
94                        }
95                }
96
97                function onFolderClick(evt) {
98                        var folderName = evt.grid.store.getValue(
99                                                                evt.grid.getItem(evt.rowIndex), "file");
100                        if (dojo.trim(folderName) == "All") {
101                                folderName = "";
102                        } else if (folderName.charAt(folderName.length - 1) != "/"){
103                                folderName += "/";
104                        }
105
106                        showAllErrors({file: folderName + "*", folder: 0});
107                        dijit.byId("mainTab").selectChild(dijit.byId("errorsTab"));
108                }
109                var chartInitialized = false;
110
111                dojo.subscribe("mainTab-selectChild", function(tab){
112                        if(chartInitialized || tab.id != "chartTab"){
113                                return;
114                        }
115                        chartInitialized = true;
116                        checkstyleStore.fetch({query: {file: "*"}, onComplete: initializeChart});
117                });
118                function initializeChart(items) {
119                       
120                        dojo.require("dojox.charting.DataChart");
121                        dojo.require("dojox.charting.action2d.Highlight");
122                        dojo.require("dojox.charting.action2d.Tooltip");
123                        dojo.require("dojox.charting.plot2d.Columns");
124                       
125                        var folderCounts = {};
126                                               
127                        dojo.forEach(items, function(item){
128                          var fileName = checkstyleStore.getValue(item, "file");
129                         
130                          var parts = fileName.split("/");
131                          if (parts.length < 2) {
132                                return;
133                          }
134                          var folderName = parts[0] + "/" + parts[1];
135                         
136                          if (!folderCounts[folderName]) {
137                                folderCounts[folderName] = 0;
138                          }
139                          folderCounts[folderName]++;
140                        });
141                       
142                        var folderCountsArr = [];
143
144                        for (var x in folderCounts) {
145                          folderCountsArr.push({"folder": x, count: folderCounts[x]});
146                        }
147                        folderCountsArr.sort(function(a, b){
148                          if(a.count < b.count) {
149                                return 1;
150                          } else if(a.count > b.count){
151                                return -1;
152                          }
153                          return 0;
154                        });
155
156                        if (folderCountsArr.length > 20) {
157                                folderCountsArr = folderCountsArr.slice(0, 20);
158                        }
159                        dojo.forEach(folderCountsArr, function(item, index){
160                                item.id = index + 1;
161                        });
162                        var chartStore = new dojo.data.ItemFileReadStore({
163                                data: {
164                                        identifier: 'id',
165                                        label: 'folder',
166                                        items: folderCountsArr
167                                }
168                        });
169                        var chart = new dojox.charting.DataChart("chart", {
170                                displayRange:12,
171                                yaxis:{
172                                        max: folderCountsArr[0].count + 10,
173                                        min: Math.max(0, folderCountsArr[folderCountsArr.length -1].count - 10),
174                                        majorTickStep: Math.round(folderCountsArr[0].count / 10),
175                                        maxLabelSize:20,
176                                        labelFunc: function(val) {
177                                                return val;
178                                        }
179                                },
180                                xaxis: {
181                                        labelFunc: "seriesLabels",
182                                        maxLabelSize:30
183                                },
184                                scroll:false,
185                                type: dojox.charting.plot2d.Columns
186                        });
187                       
188                       
189                        var dc = dojox.charting;
190                        new dc.action2d.Highlight(chart, "default");
191                        new dc.action2d.Tooltip(chart, "default");
192                       
193                        chart.setStore(chartStore, {folder: "*"}, "count");     
194                }
195               
196                function formatMessage(item) {
197                        return (singleFileStore || checkstyleStore).getValue(item, "msg");
198                }
199               
200                function doEdit(item) {
201                        var grid = dijit.byId("messagesGrid");
202                        var textarea = dojo.byId("editInput");
203                       
204                        var q = {folder: 0};
205                       
206                        if (errorQuery) {
207                                q.file = errorQuery.file;
208                        }
209                       
210                        grid.store.fetch({
211                                query: q,
212                                start: item.rowIndex,
213                                count: 1,
214                                onComplete: function(items) {
215                                        var file = grid.store.getValue(items[0], "file");
216                                        var line = grid.store.getValue(items[0], "line");
217
218                                        if (textarea._file != file) {
219                                                if (textarea._file) {
220                                                        if(cachedFiles[textarea._file] && cachedFiles[textarea._file] != textarea.value) {
221                                                                changedFiles.push(textarea._file);
222                                                        }
223                                                        cachedFiles[textarea._file] = textarea.value;
224                                                }
225                                                textarea._file = file;
226                                                if (cachedFiles[file]) {
227                                                        textarea.value = cachedFiles[file];
228                                                }
229                                                else {
230                                                        loadFile(file, line);
231                                                }
232                                        } else {
233                                                gotoLine(line);
234                                        }
235                                }
236                        });
237                }
238               
239                function loadFile(file, line) {
240                        var textarea = dojo.byId("editInput");
241                        textarea.value = "Loading....";
242                        dojo.xhrGet({
243                                url: "../../" + file,
244                                type: "text",
245                                load: function(text)  {
246                                        textarea.value = text;
247                                        dijit.byId("showFileErrorsBtn").attr("disabled", false);
248                                        gotoLine(line);
249                                }
250                        });
251                }
252               
253                function gotoLine(line) {
254                        var count = line;
255                        var textarea = dojo.byId("editInput");
256                        var str = textarea.value;
257                        var i;
258                        for (i = 0; i < str.length && count > 1; i++) {
259                                if (str.charAt(i) == "\n") {
260                                        count--;
261                                }
262                        }
263                        var nextNL = str.indexOf("\n", i + 1);
264                        selectChars(textarea, i, nextNL < 0 ? str.length - 1 : nextNL);
265                }
266               
267                function selectChars(textarea, start, end) {
268                       
269                        if(textarea.setSelectionRange){
270                                setTimeout(function(){
271                                //      textarea.focus();
272                                        textarea.setSelectionRange(start, start + 1);   
273                                        var ev = document.createEvent("KeyEvents");
274                                        ev.initKeyEvent("keypress", true, true, window, false, false, false, false, 0,
275                                                textarea.value.charCodeAt(start));
276                                        textarea.dispatchEvent(ev);
277                                        textarea.setSelectionRange(start, end);
278                                        textarea.focus();
279                                }, 10);
280                               
281                        }else if(dojo.doc.selection){ //IE
282                               
283                                var range = dojo.doc.selection.createRange();
284                                // delete overflow characters
285                                range.moveStart("character", start);
286                                range.text = '';
287                                // show cursor
288                                range.select();
289                        }
290                }
291               
292                function showCurrentErrors(){
293                        dijit.byId("showAllErrorsBtn").attr("checked", false);
294                        dijit.byId("showFileErrorsBtn").attr("checked", true);
295                       
296                        var textarea = dojo.byId("editInput");
297                        var value = textarea.value;
298                        checkstyleUtil.clear();
299
300                        checkstyleUtil.applyRules(textarea._file, value);
301                        var report = checkstyleUtil.generateReport(true);
302                        var storeData = dojo.eval("(" + report + ")");
303                       
304                        singleFileStore = new dojo.data.ItemFileReadStore({
305                                data: storeData
306                        });
307
308                        var grid = dijit.byId("messagesGrid");
309                        errorQuery = null;
310                        grid.setStore(singleFileStore, {folder: 0}, grid.attr("queryOptions"));
311                }
312
313                function showAllErrors(query){
314                        errorQuery = query;
315               
316                        dijit.byId("showFileErrorsBtn").attr("checked", false);
317                        dijit.byId("showAllErrorsBtn").attr("checked", true);
318                        var grid = dijit.byId("messagesGrid");
319                        singleFileStore = null;
320                        grid.setStore(checkstyleStore, query || grid.attr("query"), grid.attr("queryOptions"));
321                }
322               
323                function makeSimpleFixes() {
324                        var textarea = dojo.byId("editInput");
325               
326                        textarea.value = checkstyleUtil.makeSimpleFixes(textarea.value);
327                       
328                        if(dojo.indexOf(changedFiles, textarea._file) < 0) {
329                                changedFiles.push(textarea._file);
330                        }
331                        showCurrentErrors();
332                }
333               
334                function saveFile(fileName, contents, callback) {
335                        var textarea = dojo.byId("editInput");
336                        fileName = fileName || textarea._file;
337                        contents = contents || textarea.value;
338                       
339                        dojo.xhrPost({
340                                url: "checkstyle.php",
341                                content: {
342                                        action: "save",
343                                        filename: fileName,
344                                        contents: contents
345                                },
346                                handle: function(text, reqObj){
347                                        if (reqObj.xhr.readyState != 4) {
348                                                return;
349                                        }
350                                        if (reqObj.xhr.status == 200) {
351                                                if (!callback) {
352                                                        alert("File " + fileName + " saved");
353                                                } else {
354                                                        callback(true);
355                                                }
356                                                var idx = dojo.indexOf(changedFiles, fileName);
357                                                array.splice(idx, 1);
358                                        }
359                                        else if (callback){
360                                                callback(false);
361                                        } else {
362                                                alert("Failed to save file " + fileName + ". " + saveErrorMsg);
363                                        }
364                                }
365                        });
366                }
367               
368                function showSaveDialog(){
369                        if (changedFiles.length == 0) {
370                                alert("No files have been altered yet.");
371                                return;
372                        }
373                       
374                        var checksNode = dojo.byId("checks");
375                        dojo.empty(checksNode);
376                       
377                        dojo.forEach(changedFiles, function(fileName){
378                                dojo.create("div", {
379                                        innerHTML: "<label for='" + fileName + "'>" + fileName + "</label>"
380                                                + "<input type='checkbox' id='" + fileName + "'></input>"
381                                }, checksNode);
382                        });
383                        dijit.byId("changedFilesDlg").show();
384                }
385               
386                function saveAllChangedFiles(){
387                        var successes = 0;
388                        var inputs = dojo.query("input", "checks").forEach(
389                                function(input) {
390                                        if (!input.checked) {
391                                                return;
392                                        }
393                                        var fileName = dojo.attr(input, "id");
394                                        saveFile(fileName, cachedFiles[fileName], function(success){
395                                                if (!success) {
396                                                        alert("Failed to save " + fileName
397                                                                + saveErrorMsg);
398                                                } else {
399                                                        successes++;
400                                                        if (successes == inputs.length) {
401                                                                alert("All files saved successfully");
402                                                                dijit.byId("changedFilesDlg").hide();
403                                                        }
404                                                }
405                                        });
406                                }
407                        );
408                }
409               
410                var checkstyleStore;
411               
412                dojo.xhrGet({
413                        url: "checkstyleData.js",
414                        sync: true,
415                        handleAs: "json",
416                        load: function(data) {
417                                checkstyleStore = new dojo.data.ItemFileReadStore({
418                                        data: data
419                                });
420                        },
421                        error: function(){
422                                alert("Error: could not load the checkstyle data. You should run the checkstyle tool in util/checkstyle/");
423                        }
424                });
425        </script>
426</head>
427<body class="soria">
428       
429        <div dojoType="dijit.layout.BorderContainer" design="sidebar" id="main">
430                <div id="folders" dojoType="dijit.layout.ContentPane" region="leading"
431                        style="width: 200px;padding: 0;" splitter="true">
432                        <table dojoType="dojox.grid.DataGrid"id="folderGrid"
433                                store="checkstyleStore" style="height: 100%; width: 100%;"
434                                query="{ folder: 1 }" rowsPerPage="20" rowSelector="20px"
435                                onCellClick="onFolderClick(arguments[0])"
436                                >
437                                <thead>
438                                        <tr>
439                                                <th field="file" width="auto">Folders</th>
440                                        </tr>
441                                </thead>
442                        </table>
443                </div>
444                <div id="header" dojoType="dijit.layout.ContentPane" region="top" style="height: 50px;">
445                        <h1>Checkstyle results from <span id="reportDate"></span>
446                                Total errors:<span id="totalErrors"></span>
447                        </h1>
448                </div>
449                <div id="mainTab" dojoType="dijit.layout.TabContainer" region="center" style="padding: 0;">
450                        <div id="errorsTab" dojoType="dijit.layout.BorderContainer" title="Error List" style="height:100%;width:100%;">
451                                <table dojoType="dojox.grid.DataGrid" id="messagesGrid"
452                                        class="checkstyleGrid" store="checkstyleStore"
453                                        query="{ folder: 0 }" rowsPerPage="50" rowSelector="20px"
454                                        region="top"
455                                        style="height:50%;"
456                                        >
457                                        <script type="dojo/connect" event="_onFetchBegin" args="size, req">
458                                                dojo.byId("totalErrors").innerHTML = size;
459                                        </script>
460                                        <thead>
461                                                <tr>
462                                                        <th field="file" width="300px">File</th>
463                                                        <th field="line" width="40px">Line</th>
464                                                        <th field="msg" width="auto" formatter="formatMessage">Message</th>
465                                                </tr>
466                                        </thead>
467                                </table>
468                                <div dojoType="dijit.layout.ContentPane" region="bottom" splitter="true" style="height:45%;">
469                                        <div>
470                                                <div dojoType="dijit.form.ToggleButton"
471                                                         id="showFileErrorsBtn"
472                                                         label="Show File Errors"
473                                                         iconClass="dijitRadioIcon"
474                                                         onclick="showCurrentErrors()"
475                                                         disabled="true"
476                                                         ></div>
477                                                <div dojoType="dijit.form.ToggleButton"
478                                                         id="showAllErrorsBtn"
479                                                         label="Show All Errors"
480                                                         iconClass="dijitRadioIcon"
481                                                         checked="true"
482                                                         onclick="showAllErrors()"></div>
483                                                <div dojoType="dijit.form.Button"
484                                                         id="makeFixesBtn"
485                                                         label="Make Fixes"
486                                                         onclick="makeSimpleFixes()"></div>
487                                                <div dojoType="dijit.form.Button"
488                                                         id="saveFileBtn"
489                                                         label="Save"
490                                                         onclick="saveFile()"></div>
491                                                <div dojoType="dijit.form.Button"
492                                                         id="saveAllFileBtn"
493                                                         label="Save All"
494                                                         onclick="showSaveDialog()"></div>
495                                        </div>
496                                        <div>
497                                                <textarea id="editInput" rows="7" cols="100"></textarea>
498                                        </div>
499                                </div>
500                        </div>
501                        <div id="chartTab" dojoType="dijit.layout.BorderContainer" style="width:100%;height:100%;" title="Worst Modules">
502                                <div dojoType="dijit.layout.ContentPane" region="top">
503                                        This chart displays the folders of depth 2 in descending order of checkstyle violations.
504                                </div>
505                                <div dojoType="dijit.layout.ContentPane" region="center">
506                                        <div id="chart" style="height:400px; width: 1000px;"></div>
507                                </div>
508                        </div>
509                </div>
510        </div>
511        <div dojoType="dijit.Dialog" id="changedFilesDlg" title="Save Changed Files">
512                <div id="checks">
513                       
514                </div>
515                <div dojoType="dijit.form.Button" label="Save" onclick="saveAllChangedFiles()"></div>
516                <div dojoType="dijit.form.Button" label="Cancel" onclick="dijit.byId('changedFilesDlg').hide();"></div>
517        </div>
518</body>
519</html>
Note: See TracBrowser for help on using the repository browser.