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