1.. _module-pw_web-log-viewer: 2 3========== 4Log viewer 5========== 6The log viewer component integrates into web tooling across frameworks like 7Angular or React. You can customize the component to suit your requirements 8and enable stakeholders to access logs with minimal code and hardware setup. 9 10This guide assumes that you have ``pw_console`` set up and running. 11See :ref:`module-pw_console-user_guide-start`. 12 13.. figure:: https://storage.googleapis.com/pigweed-media/pw_web/open-from-console.png 14 :alt: Example of pw_console log viewer with **Open in browser** selected, no 15 logs, and a pop-up with the URL to the web log viewer. The other pane shows 16 logs since 'Open in Browser' is not selected. 17 18 Press :kbd:`Shift+O` or click **Open in browser** in the log pane to start a 19 websocket log server. 20 21----------- 22Filter logs 23----------- 24Filters by default apply to all columns. 25 26.. figure:: https://storage.googleapis.com/pigweed-media/pw_web/filter.png 27 :alt: Filter example with the query 'log', the log viewer highlights and 28 filters matches. 29 30 Log viewer highlights and filters matches to 'log'. 31 32To filter on a specific column, add the header name with a colon before the 33filter. For example, the ``message`` column uses the format 34``message:<filter>``. 35 36The supported qualifiers are: 37 38* ``severity``: Filters log level, such as ``info``, ``debug``, 39 ``warning``, ``error``, and ``critical``. 40* ``<column_name>``: Any column header name can be prefixed. 41 42Filter syntax 43============= 44.. list-table:: 45 :widths: 30 30 40 46 :header-rows: 1 47 48 * - Filter with 49 - | Syntax 50 - | Examples 51 52 * - Freeform text 53 - | ``string`` 54 - | ``hello`` 55 | ``message:hello`` 56 57 * - Freeform text with spaces 58 - | ``"string in quotes"`` 59 - | ``"hello world"`` 60 | ``message:"hello world"`` 61 62 * - Regular expressions 63 - | ``/regex/`` 64 - | ``/^hello world$/`` 65 | ``message:/^hello world$/`` 66 67Logical operators 68================= 69The language interprets spaces as ``AND`` between conditions ``column:value`` 70or strings ``"a phrase"``. 71 72.. list-table:: 73 :widths: 10 10 40 40 74 :header-rows: 1 75 76 * - Operator 77 - | Syntax 78 - | Use 79 - | Example 80 81 * - AND 82 - | ``" "`` 83 - | Between conditions ``column:value`` 84 | or strings ``"a phrase"`` 85 - | ``severity:warn "hello world"`` 86 87 * - OR 88 - | ``|`` 89 - | Between conditions ``column:value`` 90 | or strings ``"a phrase"`` 91 - | ``severity:warn | "hello world"`` 92 | ``message:hello | message:world`` 93 94 * - NOT 95 - | ``!`` 96 - | Before condition ``column:value`` 97 - | ``!severity:warn`` 98 | ``!message:goodbye`` 99 100Parenthesis ``(`` and ``)`` dennote order of operations. Example of use is 101``(message:hello | message:"hello world") !severity:error``. 102 103--------------------------- 104Pause and resume autoscroll 105--------------------------- 106The log viewer autoscrolls to the bottom as new entries appear. Autoscroll 107pauses when the view scrolls up. To resume autoscroll, scroll to the bottom of 108the view or press the **Jump to bottom** button. 109 110.. figure:: https://storage.googleapis.com/pigweed-media/pw_web/jump-to-bottom.png 111 :alt: Autoscroll pauses when view scrolls up, **Jump to bottom** on center 112 bottom of page resumes autoscroll. 113 114------------------------ 115Toggle column visibility 116------------------------ 117Column visibility changes with the checkboxes under the toggle column menu. 118 119.. figure:: https://storage.googleapis.com/pigweed-media/pw_web/toggle-fields.png 120 :alt: Toggle fields button in topbar opens checkbox list of fields to toggle 121 visibility. 122 123-------------- 124Resize columns 125-------------- 126Use resize handles between columns to adjust the width of content. 127 128.. figure:: https://storage.googleapis.com/pigweed-media/pw_web/column-resize.png 129 :alt: Mouse cursor changes to column resize cursor between columns. 130 131---------- 132Clear logs 133---------- 134To remove logs and display new logs, click the **Clear logs** button. 135 136.. figure:: https://storage.googleapis.com/pigweed-media/pw_web/clear-logs.png 137 :alt: Clear logs button in topbar removes all logs from view. 138 139 Example of **Clear logs** button press. 140 141---------------- 142Toggle word-wrap 143---------------- 144To toggle between word wrapped and clipped context, click the **Word wrap** 145button. 146 147.. figure:: https://storage.googleapis.com/pigweed-media/pw_web/word-wrap.png 148 :alt: Example of word wrap button on, where longer messages become multiple 149 lines in height. 150 151 Example of **Word wrap** active. 152 153----------- 154Split views 155----------- 156To split a log view, click the **Split right** button or the **Split down** button in the **Additional actions** (kabob) menu. 157 158.. figure:: https://storage.googleapis.com/pigweed-media/pw_web/split-view-buttons.png 159 :alt: Split Right/Split Down can be found under the additional actions menu in the toolbar. 160 161 **Split Right** and **Split Down** are in the **Additional actions** menu. 162 163.. figure:: https://storage.googleapis.com/pigweed-media/pw_web/split-views.png 164 :alt: Clicking on Split Right/Split Down creates a view to the right of or below the active view. 165 166 This creates a copy of the active view. 167 168------------ 169Resize views 170------------ 171To resize split views, click and drag the resize handle between them. You can also focus on the resize handle element and use :kbd:`←` and :kbd:`→` to adjust the size of the views. 172 173.. figure:: https://storage.googleapis.com/pigweed-media/pw_web/resizing-views.png 174 :alt: Resize split views with the handle located at the border of the views. 175 176 The resize handle can be found between adjacent views. 177 178------------- 179Download logs 180------------- 181To download a .txt file of logs click the **Download logs** button under the 182kabob menu. 183 184.. figure:: https://storage.googleapis.com/pigweed-media/pw_web/more-actions.png 185 :alt: Download logs is found under the more actions button in the top menu. 186 187 **Download logs** in the kabob menu. 188 189.. figure:: https://storage.googleapis.com/pigweed-media/pw_web/download-file.png 190 :alt: Logs save to a .txt file 191 192 Logs save to a .txt file. 193
