[FEATURE] Add grouping by rows

Option is switchable with a checkbox.

Change-Id: Ib9855641ed0ffb96ebe35f2008f91d9cb383f0bb
Resolves: #78058
Releases: 3.0
Reviewed-on: https://review.typo3.org/50456
Reviewed-by: Francois Suter <[email protected]>
Tested-by: Francois Suter <[email protected]>

Author: Francois Suter

ChangeLog

@@ -1,3 +1,7 @@
+2016-10-31 Francois Suter <[email protected]>
+
+	* Added an option to visually group rows by run, resolves #78058
+
 2016-10-30 Francois Suter <[email protected]>
 
 	* Restored and improved log clearing feature, resolves #76972

Classes/Utility/Logger.php

@@ -61,9 +61,8 @@ public function __construct()
         // Read the extension configuration
         $this->extensionConfiguration = GeneralUtility::makeInstance(ExtensionConfiguration::class);
 
-        // Use microtime as unique ID (in format "sec.msec")
-        $microtimeParts = explode(' ', microtime());
-        $this->runId = $microtimeParts[1] . $microtimeParts[0];
+        // Generate a unique ID, including the global timestamp
+        $this->runId = $GLOBALS['EXEC_TIME'] . uniqid('.', true);
 
         // Create a list of instances of each available log writer
         foreach ($GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['devlog']['writers'] as $logWriterClass) {

Resources/Private/Language/JavaScript.xlf

@@ -47,6 +47,9 @@
 			<trans-unit id="1year" xml:space="preserve">
 				<source>1 year</source>
 			</trans-unit>
+			<trans-unit id="run_start" xml:space="preserve">
+				<source>Run started at %s</source>
+			</trans-unit>
 			<trans-unit id="clear_confirm_title" xml:space="preserve">
 				<source>Are you sure?</source>
 			</trans-unit>

Resources/Private/Language/locallang.xlf

@@ -42,6 +42,9 @@
 			<trans-unit id="autoReload" xml:space="preserve">
 				<source>Automatic reload</source>
 			</trans-unit>
+			<trans-unit id="groupRuns" xml:space="preserve">
+				<source>Group runs</source>
+			</trans-unit>
 			<trans-unit id="log_time" xml:space="preserve">
 				<source>Log time</source>
 			</trans-unit>

Resources/Private/Templates/ListModule/Index.html

@@ -26,6 +26,14 @@ <h1><f:translate id="title" /></h1>
 						</label>
 					</div>
 				</div>
+				<div class="form-group">
+					<div class="checkbox">
+						<label>
+							<input type="checkbox" name="groupruns" id="tx_devlog_groupruns" value="groupruns">
+							<f:translate id="groupRuns" />
+						</label>
+					</div>
+				</div>
 			</div>
 		</form>
 		<div class="clearfix"></div>
@@ -98,6 +106,7 @@ <h1><f:translate id="title" /></h1>
 						<f:translate id="extraData" />
 						<span id="tx_devlog_expand_all_icon"><core:icon identifier="actions-view-list-expand" /></span>
 					</th>
+					<th class="entry-id hidden">&nbsp;</th>
 				</tr>
 			</thead>
 		</table>

Resources/Public/JavaScript/ListModule.js

@@ -48,13 +48,16 @@ define(['jquery',
 		noEntriesMessage: null,
 		lastUpdateTime: null,
 		intervalID: 0,
+		groupRuns: false,
 		// List columns to avoid hard-coding numbers all over the code
 		columns: {
+			crdate: 0,
 			severity: 1,
 			key: 2,
 			ip: 5,
 			page: 6,
-			user: 7
+			user: 7,
+			id: 9
 		},
 		filters: []
 	};
@@ -122,9 +125,10 @@ define(['jquery',
 				DevlogListModule.table = DevlogListModule.tableView.DataTable({
 					data: data,
 					dom: 'tp',
-					// Default ordering is "crdate" column
+					// Default ordering is "run_id" and "crdate" columns
 					order: [
-						[0, 'desc']
+						[DevlogListModule.columns.id, 'desc'],
+						[DevlogListModule.columns.crdate, 'desc']
 					],
 					mark: true,
 					columnDefs: [
@@ -201,12 +205,40 @@ define(['jquery',
 									return data;
 								}
 							}
+						},
+						{
+							targets: 'entry-id',
+							data: 'run_id',
+							visible: false
 						}
 					],
+					// Group rows according to runs (reference: https://datatables.net/examples/advanced_init/row_grouping.html)
+					drawCallback: function() {
+						// Act only if runs should be grouped
+						if (!DevlogListModule.groupRuns) {
+							return;
+						}
+						var api = this.api();
+						var rows = api.rows({page: 'current'}).nodes();
+						var last = null;
+						// Grouping is performed on the column which contains the run id (and is hidden)
+						api.column(DevlogListModule.columns.id, {page: 'current'}).data().each(function(runId, i) {
+							if (last !== runId) {
+								var groupParts = runId.split('.');
+								var runDate = moment.unix(groupParts[0]);
+								var label = TYPO3.lang['run_start'].replace('%s', runDate.format('YYYY-MM-DD HH:mm:ss'));
+								$(rows).eq(i).before(
+									'<tr class="group"><td colspan="9">' + label + '</td></tr>'
+								);
+							}
+							last = runId;
+						});
+					},
 					initComplete: function() {
 						DevlogListModule.initializeSearchField();
 						DevlogListModule.initializeExtraDataToggle();
 						DevlogListModule.initializeReloadControls();
+						DevlogListModule.initializeGroupRunsButton();
 						DevlogListModule.initializeFilters();
 						DevlogListModule.initializeClearLogMenu();
 						DevlogListModule.toggleLoadingMask();
@@ -304,6 +336,29 @@ define(['jquery',
 		});
 	};
 
+	/**
+	 * Activates the "group runs" button.
+	 * Also activates the group rows for restoring groups after sorting.
+	 */
+	DevlogListModule.initializeGroupRunsButton = function () {
+		// Activate the group runs button
+		$('#tx_devlog_groupruns').on('click', function () {
+			DevlogListModule.groupRuns = $(this).prop('checked');
+			DevlogListModule.table.draw();
+		});
+		// Activate the group rows in order to restore grouping after sorting operations
+		DevlogListModule.tableView.on('click', 'tr.group', function () {
+			var currentOrder = DevlogListModule.table.order()[0];
+			// If already grouped, change ordering
+			if (currentOrder[0] === DevlogListModule.columns.id && currentOrder[1] === 'desc') {
+				DevlogListModule.table.order([DevlogListModule.columns.id, 'asc']).draw();
+			// Default ordering is descending
+			} else {
+				DevlogListModule.table.order([DevlogListModule.columns.id, 'desc']).draw();
+			}
+		});
+	};
+
 	/**
 	 * Initializes all filter selectors and set their options list.
 	 */

Resources/Public/StyleSheet/Devlog.css

@@ -35,6 +35,12 @@ a.next {
 	margin-bottom: 15px;
 }
 
+.group td {
+	background-color: #bbbbbb;
+	color: #ffffff;
+	font-style: italic;
+}
+
 mark {
 	background-color: #e8a33d;
 	color: #ffffff;