feature #42195 [WebProfilerBundle] Redesigned the log section (javiereguiluz)

This PR was squashed before being merged into the 5.4 branch.

Discussion
----------

[WebProfilerBundle] Redesigned the log section

| Q             | A
| ------------- | ---
| Branch?       | 5.4
| Bug fix?      | no
| New feature?  | yes
| Deprecations? | no
| Tickets       | Fix #42155
| License       | MIT
| Doc PR        | -

This PR is not fully polished, but it's ready for review, both code/design and UX/usability. The main missing feature is dark mode styles.

### Before

The logs were divided in sections (that's the main issue reported in #42155). If the app had errors, we displayed errors section first:

![before-error](https://user-images.githubusercontent.com/73419/126186615-8407abe3-e54f-41e7-bf43-f1aaf09ebdf3.png)

If there are no errors but there are deprecations, we display that section:

![before-deprecation](https://user-images.githubusercontent.com/73419/126186625-3e5915eb-a824-4497-8f95-aeaf81d003cf.png)

Abut filtering data, it depends on each section. For example, some allow to filter by log channel:

![before-filter-channel](https://user-images.githubusercontent.com/73419/126186644-49f039c8-d7ce-4790-abb1-c311a57111e7.gif)

And others allow to filter by priority:

![before-filter-priority](https://user-images.githubusercontent.com/73419/126186656-2447dc54-91eb-4b64-bd5d-c35e4aaedaaa.gif)

### After

This PR proposes to display a single table with all the logs (and separate the "container compilation" logs because they are a bit different than the others):

![after-logs](https://user-images.githubusercontent.com/73419/126186675-d9df2990-0e3c-491a-b331-4c022b64adbe.png)

**Question**: log timestamps now display milliseconds. Do you like this or is it enough with seconds?

Deprecations and errors are now more highlighted on each row (this needs a bit more polishing):

![after-deprecation-error](https://user-images.githubusercontent.com/73419/126186699-220055ef-1d57-4e5c-95dc-791238dc22b3.png)

Filters are now super dynamic and always available:

![after-filters](https://user-images.githubusercontent.com/73419/126186731-d147e642-d7ab-4047-845c-3943187a1f00.gif)

Container logs are still available at the bottom of the page:

![after-container](https://user-images.githubusercontent.com/73419/126186743-02ced909-2871-4491-b764-46194f89287a.gif)

So, what do you think?

Commits
-------

bcb3329279 [WebProfilerBundle] Redesigned the log section

Author: fabpot

DataCollector/LoggerDataCollector.php

@@ -28,6 +28,7 @@ class LoggerDataCollector extends DataCollector implements LateDataCollectorInte
     private $containerPathPrefix;
     private $currentRequest;
     private $requestStack;
+    private $processedLogs;
 
     public function __construct(object $logger = null, string $containerPathPrefix = null, RequestStack $requestStack = null)
     {
@@ -80,6 +81,81 @@ public function getLogs()
         return $this->data['logs'] ?? [];
     }
 
+    public function getProcessedLogs()
+    {
+        if (null !== $this->processedLogs) {
+            return $this->processedLogs;
+        }
+
+        $rawLogs = $this->getLogs();
+        if ([] === $rawLogs) {
+            return $this->processedLogs = $rawLogs;
+        }
+
+        $logs = [];
+        foreach ($this->getLogs()->getValue() as $rawLog) {
+            $rawLogData = $rawLog->getValue();
+
+            if ($rawLogData['priority']->getValue() > 300) {
+                $logType = 'error';
+            } elseif (isset($rawLogData['scream']) && false === $rawLogData['scream']->getValue()) {
+                $logType = 'deprecation';
+            } elseif (isset($rawLogData['scream']) && true === $rawLogData['scream']->getValue()) {
+                $logType = 'silenced';
+            } else {
+                $logType = 'regular';
+            }
+
+            $logs[] = [
+                'type' => $logType,
+                'errorCounter' => isset($rawLogData['errorCounter']) ? $rawLogData['errorCounter']->getValue() : 1,
+                'timestamp' => $rawLogData['timestamp_rfc3339']->getValue(),
+                'priority' => $rawLogData['priority']->getValue(),
+                'priorityName' => $rawLogData['priorityName']->getValue(),
+                'channel' => $rawLogData['channel']->getValue(),
+                'message' => $rawLogData['message'],
+                'context' => $rawLogData['context'],
+            ];
+        }
+
+        // sort logs from oldest to newest
+        usort($logs, static function ($logA, $logB) {
+            return $logA['timestamp'] <=> $logB['timestamp'];
+        });
+
+        return $this->processedLogs = $logs;
+    }
+
+    public function getFilters()
+    {
+        $filters = [
+            'channel' => [],
+            'priority' => [
+                'Debug' => 100,
+                'Info' => 200,
+                'Warning' => 300,
+                'Error' => 400,
+                'Critical' => 500,
+                'Alert' => 550,
+                'Emergency' => 600,
+            ],
+        ];
+
+        $allChannels = [];
+        foreach ($this->getProcessedLogs() as $log) {
+            if ('' === trim($log['channel'])) {
+                continue;
+            }
+
+            $allChannels[] = $log['channel'];
+        }
+        $channels = array_unique($allChannels);
+        sort($channels);
+        $filters['channel'] = $channels;
+
+        return $filters;
+    }
+
     public function getPriorities()
     {
         return $this->data['priorities'] ?? [];
@@ -132,7 +208,7 @@ private function getContainerDeprecationLogs(): array
         $logs = [];
         foreach (unserialize($logContent) as $log) {
             $log['context'] = ['exception' => new SilencedErrorContext($log['type'], $log['file'], $log['line'], $log['trace'], $log['count'])];
-            $log['timestamp'] = $bootTime;
+            $log['timestamp'] = (new \DateTimeImmutable())->setTimestamp($bootTime)->format(\DateTimeInterface::RFC3339_EXTENDED);
             $log['priority'] = 100;
             $log['priorityName'] = 'DEBUG';
             $log['channel'] = null;