├── .eslintrc.js ├── .gitignore ├── .neutrinorc.js ├── LICENSE ├── README.md ├── package.json ├── src ├── ansiparse.js ├── components │ ├── LazyLog │ │ ├── README.md │ │ ├── index.jsx │ │ └── index.module.css │ ├── Line │ │ ├── README.md │ │ ├── index.jsx │ │ └── index.module.css │ ├── LineContent │ │ ├── README.md │ │ ├── index.jsx │ │ └── index.module.css │ ├── LineNumber │ │ ├── README.md │ │ ├── index.jsx │ │ └── index.module.css │ ├── LinePart │ │ ├── README.md │ │ ├── index.jsx │ │ └── index.module.css │ ├── Loading │ │ ├── README.md │ │ ├── index.jsx │ │ └── index.module.css │ ├── ScrollFollow │ │ ├── README.md │ │ └── index.jsx │ ├── SearchBar │ │ ├── FilterLinesIcon │ │ │ ├── README.md │ │ │ ├── index.jsx │ │ │ └── index.module.css │ │ ├── README.md │ │ ├── index.jsx │ │ └── index.module.css │ └── index.js ├── encoding.js ├── request.js ├── search.js ├── stream.js ├── utils.js └── websocket.js └── yarn.lock /.eslintrc.js: -------------------------------------------------------------------------------- 1 | const { Neutrino } = require('neutrino'); 2 | 3 | module.exports = Neutrino({ root: __dirname }) 4 | .use('.neutrinorc') 5 | .call('eslintrc'); 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # build directory 61 | lib 62 | build 63 | styleguide 64 | es5 65 | 66 | # Webstorm project specific settings 67 | .idea/ 68 | -------------------------------------------------------------------------------- /.neutrinorc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | use: [ 3 | 'neutrino-preset-mozilla-frontend-infra/styleguide', 4 | ['neutrino-preset-mozilla-frontend-infra/react-components', { 5 | targets: { 6 | browsers: 'ie 9', 7 | }, 8 | style: { 9 | extract: false, 10 | } 11 | }], 12 | (neutrino) => { 13 | if (neutrino.options.command === 'styleguide:start') { 14 | neutrino.config.module.rules.delete('lint'); 15 | } 16 | }, 17 | ], 18 | }; 19 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Mozilla Public License Version 2.0 2 | ================================== 3 | 4 | 1. Definitions 5 | -------------- 6 | 7 | 1.1. "Contributor" 8 | means each individual or legal entity that creates, contributes to 9 | the creation of, or owns Covered Software. 10 | 11 | 1.2. "Contributor Version" 12 | means the combination of the Contributions of others (if any) used 13 | by a Contributor and that particular Contributor's Contribution. 14 | 15 | 1.3. "Contribution" 16 | means Covered Software of a particular Contributor. 17 | 18 | 1.4. "Covered Software" 19 | means Source Code Form to which the initial Contributor has attached 20 | the notice in Exhibit A, the Executable Form of such Source Code 21 | Form, and Modifications of such Source Code Form, in each case 22 | including portions thereof. 23 | 24 | 1.5. "Incompatible With Secondary Licenses" 25 | means 26 | 27 | (a) that the initial Contributor has attached the notice described 28 | in Exhibit B to the Covered Software; or 29 | 30 | (b) that the Covered Software was made available under the terms of 31 | version 1.1 or earlier of the License, but not also under the 32 | terms of a Secondary License. 33 | 34 | 1.6. "Executable Form" 35 | means any form of the work other than Source Code Form. 36 | 37 | 1.7. "Larger Work" 38 | means a work that combines Covered Software with other material, in 39 | a separate file or files, that is not Covered Software. 40 | 41 | 1.8. "License" 42 | means this document. 43 | 44 | 1.9. "Licensable" 45 | means having the right to grant, to the maximum extent possible, 46 | whether at the time of the initial grant or subsequently, any and 47 | all of the rights conveyed by this License. 48 | 49 | 1.10. "Modifications" 50 | means any of the following: 51 | 52 | (a) any file in Source Code Form that results from an addition to, 53 | deletion from, or modification of the contents of Covered 54 | Software; or 55 | 56 | (b) any new file in Source Code Form that contains any Covered 57 | Software. 58 | 59 | 1.11. "Patent Claims" of a Contributor 60 | means any patent claim(s), including without limitation, method, 61 | process, and apparatus claims, in any patent Licensable by such 62 | Contributor that would be infringed, but for the grant of the 63 | License, by the making, using, selling, offering for sale, having 64 | made, import, or transfer of either its Contributions or its 65 | Contributor Version. 66 | 67 | 1.12. "Secondary License" 68 | means either the GNU General Public License, Version 2.0, the GNU 69 | Lesser General Public License, Version 2.1, the GNU Affero General 70 | Public License, Version 3.0, or any later versions of those 71 | licenses. 72 | 73 | 1.13. "Source Code Form" 74 | means the form of the work preferred for making modifications. 75 | 76 | 1.14. "You" (or "Your") 77 | means an individual or a legal entity exercising rights under this 78 | License. For legal entities, "You" includes any entity that 79 | controls, is controlled by, or is under common control with You. For 80 | purposes of this definition, "control" means (a) the power, direct 81 | or indirect, to cause the direction or management of such entity, 82 | whether by contract or otherwise, or (b) ownership of more than 83 | fifty percent (50%) of the outstanding shares or beneficial 84 | ownership of such entity. 85 | 86 | 2. License Grants and Conditions 87 | -------------------------------- 88 | 89 | 2.1. Grants 90 | 91 | Each Contributor hereby grants You a world-wide, royalty-free, 92 | non-exclusive license: 93 | 94 | (a) under intellectual property rights (other than patent or trademark) 95 | Licensable by such Contributor to use, reproduce, make available, 96 | modify, display, perform, distribute, and otherwise exploit its 97 | Contributions, either on an unmodified basis, with Modifications, or 98 | as part of a Larger Work; and 99 | 100 | (b) under Patent Claims of such Contributor to make, use, sell, offer 101 | for sale, have made, import, and otherwise transfer either its 102 | Contributions or its Contributor Version. 103 | 104 | 2.2. Effective Date 105 | 106 | The licenses granted in Section 2.1 with respect to any Contribution 107 | become effective for each Contribution on the date the Contributor first 108 | distributes such Contribution. 109 | 110 | 2.3. Limitations on Grant Scope 111 | 112 | The licenses granted in this Section 2 are the only rights granted under 113 | this License. No additional rights or licenses will be implied from the 114 | distribution or licensing of Covered Software under this License. 115 | Notwithstanding Section 2.1(b) above, no patent license is granted by a 116 | Contributor: 117 | 118 | (a) for any code that a Contributor has removed from Covered Software; 119 | or 120 | 121 | (b) for infringements caused by: (i) Your and any other third party's 122 | modifications of Covered Software, or (ii) the combination of its 123 | Contributions with other software (except as part of its Contributor 124 | Version); or 125 | 126 | (c) under Patent Claims infringed by Covered Software in the absence of 127 | its Contributions. 128 | 129 | This License does not grant any rights in the trademarks, service marks, 130 | or logos of any Contributor (except as may be necessary to comply with 131 | the notice requirements in Section 3.4). 132 | 133 | 2.4. Subsequent Licenses 134 | 135 | No Contributor makes additional grants as a result of Your choice to 136 | distribute the Covered Software under a subsequent version of this 137 | License (see Section 10.2) or under the terms of a Secondary License (if 138 | permitted under the terms of Section 3.3). 139 | 140 | 2.5. Representation 141 | 142 | Each Contributor represents that the Contributor believes its 143 | Contributions are its original creation(s) or it has sufficient rights 144 | to grant the rights to its Contributions conveyed by this License. 145 | 146 | 2.6. Fair Use 147 | 148 | This License is not intended to limit any rights You have under 149 | applicable copyright doctrines of fair use, fair dealing, or other 150 | equivalents. 151 | 152 | 2.7. Conditions 153 | 154 | Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted 155 | in Section 2.1. 156 | 157 | 3. Responsibilities 158 | ------------------- 159 | 160 | 3.1. Distribution of Source Form 161 | 162 | All distribution of Covered Software in Source Code Form, including any 163 | Modifications that You create or to which You contribute, must be under 164 | the terms of this License. You must inform recipients that the Source 165 | Code Form of the Covered Software is governed by the terms of this 166 | License, and how they can obtain a copy of this License. You may not 167 | attempt to alter or restrict the recipients' rights in the Source Code 168 | Form. 169 | 170 | 3.2. Distribution of Executable Form 171 | 172 | If You distribute Covered Software in Executable Form then: 173 | 174 | (a) such Covered Software must also be made available in Source Code 175 | Form, as described in Section 3.1, and You must inform recipients of 176 | the Executable Form how they can obtain a copy of such Source Code 177 | Form by reasonable means in a timely manner, at a charge no more 178 | than the cost of distribution to the recipient; and 179 | 180 | (b) You may distribute such Executable Form under the terms of this 181 | License, or sublicense it under different terms, provided that the 182 | license for the Executable Form does not attempt to limit or alter 183 | the recipients' rights in the Source Code Form under this License. 184 | 185 | 3.3. Distribution of a Larger Work 186 | 187 | You may create and distribute a Larger Work under terms of Your choice, 188 | provided that You also comply with the requirements of this License for 189 | the Covered Software. If the Larger Work is a combination of Covered 190 | Software with a work governed by one or more Secondary Licenses, and the 191 | Covered Software is not Incompatible With Secondary Licenses, this 192 | License permits You to additionally distribute such Covered Software 193 | under the terms of such Secondary License(s), so that the recipient of 194 | the Larger Work may, at their option, further distribute the Covered 195 | Software under the terms of either this License or such Secondary 196 | License(s). 197 | 198 | 3.4. Notices 199 | 200 | You may not remove or alter the substance of any license notices 201 | (including copyright notices, patent notices, disclaimers of warranty, 202 | or limitations of liability) contained within the Source Code Form of 203 | the Covered Software, except that You may alter any license notices to 204 | the extent required to remedy known factual inaccuracies. 205 | 206 | 3.5. Application of Additional Terms 207 | 208 | You may choose to offer, and to charge a fee for, warranty, support, 209 | indemnity or liability obligations to one or more recipients of Covered 210 | Software. However, You may do so only on Your own behalf, and not on 211 | behalf of any Contributor. You must make it absolutely clear that any 212 | such warranty, support, indemnity, or liability obligation is offered by 213 | You alone, and You hereby agree to indemnify every Contributor for any 214 | liability incurred by such Contributor as a result of warranty, support, 215 | indemnity or liability terms You offer. You may include additional 216 | disclaimers of warranty and limitations of liability specific to any 217 | jurisdiction. 218 | 219 | 4. Inability to Comply Due to Statute or Regulation 220 | --------------------------------------------------- 221 | 222 | If it is impossible for You to comply with any of the terms of this 223 | License with respect to some or all of the Covered Software due to 224 | statute, judicial order, or regulation then You must: (a) comply with 225 | the terms of this License to the maximum extent possible; and (b) 226 | describe the limitations and the code they affect. Such description must 227 | be placed in a text file included with all distributions of the Covered 228 | Software under this License. Except to the extent prohibited by statute 229 | or regulation, such description must be sufficiently detailed for a 230 | recipient of ordinary skill to be able to understand it. 231 | 232 | 5. Termination 233 | -------------- 234 | 235 | 5.1. The rights granted under this License will terminate automatically 236 | if You fail to comply with any of its terms. However, if You become 237 | compliant, then the rights granted under this License from a particular 238 | Contributor are reinstated (a) provisionally, unless and until such 239 | Contributor explicitly and finally terminates Your grants, and (b) on an 240 | ongoing basis, if such Contributor fails to notify You of the 241 | non-compliance by some reasonable means prior to 60 days after You have 242 | come back into compliance. Moreover, Your grants from a particular 243 | Contributor are reinstated on an ongoing basis if such Contributor 244 | notifies You of the non-compliance by some reasonable means, this is the 245 | first time You have received notice of non-compliance with this License 246 | from such Contributor, and You become compliant prior to 30 days after 247 | Your receipt of the notice. 248 | 249 | 5.2. If You initiate litigation against any entity by asserting a patent 250 | infringement claim (excluding declaratory judgment actions, 251 | counter-claims, and cross-claims) alleging that a Contributor Version 252 | directly or indirectly infringes any patent, then the rights granted to 253 | You by any and all Contributors for the Covered Software under Section 254 | 2.1 of this License shall terminate. 255 | 256 | 5.3. In the event of termination under Sections 5.1 or 5.2 above, all 257 | end user license agreements (excluding distributors and resellers) which 258 | have been validly granted by You or Your distributors under this License 259 | prior to termination shall survive termination. 260 | 261 | ************************************************************************ 262 | * * 263 | * 6. Disclaimer of Warranty * 264 | * ------------------------- * 265 | * * 266 | * Covered Software is provided under this License on an "as is" * 267 | * basis, without warranty of any kind, either expressed, implied, or * 268 | * statutory, including, without limitation, warranties that the * 269 | * Covered Software is free of defects, merchantable, fit for a * 270 | * particular purpose or non-infringing. The entire risk as to the * 271 | * quality and performance of the Covered Software is with You. * 272 | * Should any Covered Software prove defective in any respect, You * 273 | * (not any Contributor) assume the cost of any necessary servicing, * 274 | * repair, or correction. This disclaimer of warranty constitutes an * 275 | * essential part of this License. No use of any Covered Software is * 276 | * authorized under this License except under this disclaimer. * 277 | * * 278 | ************************************************************************ 279 | 280 | ************************************************************************ 281 | * * 282 | * 7. Limitation of Liability * 283 | * -------------------------- * 284 | * * 285 | * Under no circumstances and under no legal theory, whether tort * 286 | * (including negligence), contract, or otherwise, shall any * 287 | * Contributor, or anyone who distributes Covered Software as * 288 | * permitted above, be liable to You for any direct, indirect, * 289 | * special, incidental, or consequential damages of any character * 290 | * including, without limitation, damages for lost profits, loss of * 291 | * goodwill, work stoppage, computer failure or malfunction, or any * 292 | * and all other commercial damages or losses, even if such party * 293 | * shall have been informed of the possibility of such damages. This * 294 | * limitation of liability shall not apply to liability for death or * 295 | * personal injury resulting from such party's negligence to the * 296 | * extent applicable law prohibits such limitation. Some * 297 | * jurisdictions do not allow the exclusion or limitation of * 298 | * incidental or consequential damages, so this exclusion and * 299 | * limitation may not apply to You. * 300 | * * 301 | ************************************************************************ 302 | 303 | 8. Litigation 304 | ------------- 305 | 306 | Any litigation relating to this License may be brought only in the 307 | courts of a jurisdiction where the defendant maintains its principal 308 | place of business and such litigation shall be governed by laws of that 309 | jurisdiction, without reference to its conflict-of-law provisions. 310 | Nothing in this Section shall prevent a party's ability to bring 311 | cross-claims or counter-claims. 312 | 313 | 9. Miscellaneous 314 | ---------------- 315 | 316 | This License represents the complete agreement concerning the subject 317 | matter hereof. If any provision of this License is held to be 318 | unenforceable, such provision shall be reformed only to the extent 319 | necessary to make it enforceable. Any law or regulation which provides 320 | that the language of a contract shall be construed against the drafter 321 | shall not be used to construe this License against a Contributor. 322 | 323 | 10. Versions of the License 324 | --------------------------- 325 | 326 | 10.1. New Versions 327 | 328 | Mozilla Foundation is the license steward. Except as provided in Section 329 | 10.3, no one other than the license steward has the right to modify or 330 | publish new versions of this License. Each version will be given a 331 | distinguishing version number. 332 | 333 | 10.2. Effect of New Versions 334 | 335 | You may distribute the Covered Software under the terms of the version 336 | of the License under which You originally received the Covered Software, 337 | or under the terms of any subsequent version published by the license 338 | steward. 339 | 340 | 10.3. Modified Versions 341 | 342 | If you create software not governed by this License, and you want to 343 | create a new license for such software, you may create and use a 344 | modified version of this License if you rename the license and remove 345 | any references to the name of the license steward (except to note that 346 | such modified license differs from this License). 347 | 348 | 10.4. Distributing Source Code Form that is Incompatible With Secondary 349 | Licenses 350 | 351 | If You choose to distribute Source Code Form that is Incompatible With 352 | Secondary Licenses under the terms of this version of the License, the 353 | notice described in Exhibit B of this License must be attached. 354 | 355 | Exhibit A - Source Code Form License Notice 356 | ------------------------------------------- 357 | 358 | This Source Code Form is subject to the terms of the Mozilla Public 359 | License, v. 2.0. If a copy of the MPL was not distributed with this 360 | file, You can obtain one at http://mozilla.org/MPL/2.0/. 361 | 362 | If it is not possible or desirable to put the notice in a particular 363 | file, then You may include the notice in a location (such as a LICENSE 364 | file in a relevant directory) where a recipient would be likely to look 365 | for such a notice. 366 | 367 | You may add additional accurate notices of copyright ownership. 368 | 369 | Exhibit B - "Incompatible With Secondary Licenses" Notice 370 | --------------------------------------------------------- 371 | 372 | This Source Code Form is "Incompatible With Secondary Licenses", as 373 | defined by the Mozilla Public License, v. 2.0. 374 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Lazylog 2 | 3 | React component that loads and views remote text in the browser lazily and efficiently. 4 | 5 | See the demo on the styleguide at https://mozilla-frontend-infra.github.io/react-lazylog 6 | 7 | ## Features 8 | 9 | - Efficient scrolling performance thanks to [react-virtualized](https://github.com/bvaughn/react-virtualized) 10 | - Able to load large files upwards of 100MB without crashing the browser 11 | - Parses, colorizes, and styles ANSI escapes within content 12 | - Supports remote text files as well as chunked/streamed responses 13 | - Line highlighting 14 | - Customizable styling 15 | - Searching through log 16 | - Works in latest browser versions, including iOS Safari and Android Chrome 17 | - v3+ requires React 16.3+ 18 | 19 | ## Getting started 20 | 21 | You can install `react-lazylog` via Yarn or npm: 22 | 23 | ```bash 24 | # If using Yarn: 25 | yarn add react-lazylog 26 | 27 | # If using npm: 28 | npm install --save react-lazylog 29 | ``` 30 | 31 | The core component from react-lazylog is `LazyLog`. There is also a higher-order component (HOC) for 32 | following logs until scroll. This module can be required via ES imports, CommonJS require, or UMD. 33 | 34 | ```js 35 | import { LazyLog } from 'react-lazylog'; 36 | 37 | // using require 38 | const { LazyLog } = require('react-lazylog'); 39 | ``` 40 | 41 | ## `` 42 | 43 | ### Usage 44 | 45 | After importing a component, it can be rendered with the required `url` prop: 46 | 47 | ```jsx 48 | import React from 'react'; 49 | import { render } from 'react-dom'; 50 | import { LazyLog } from 'react-lazylog'; 51 | 52 | render(( 53 | 54 | ), document.getElementById('root')); 55 | ``` 56 | 57 | By default the `LazyLog` will expand to fill its container, so ensure this container has valid dimensions and layout. 58 | If you wish to have fixed dimensions, change the `height` and `width` props. 59 | 60 | If you are going to be rendering a complete file, or an endpoint which can be downloaded all at once, use the 61 | `` component as-is for better overall performance at the expense of slightly longer upfront load time. 62 | 63 | If you are going to be requesting a streaming or chunked response, use the `` component with the 64 | `stream` prop of `true` for quicker upfront rendering as content can be decoded as it arrives. 65 | 66 | [See the styleguide](https://mozilla-frontend-infra.github.io/react-lazylog) for a listing of complete props and a demo. 67 | 68 | In addition to the props listed for `LazyLog`, most of the properties available to 69 | [react-virtualized List](https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md) 70 | can be provided and will be passed through to the component. _Here are a few useful props:_ 71 | 72 | | Property | Type | Required? | Description | 73 | |:---|:---|:---:|:---| 74 | | `rowHeight` | Number | | A fixed row height in pixels. Controls how tall a line is, as well as the `lineHeight` style of the line's text. Defaults to `19`. | 75 | | `overscanRowCount` | Number | | Number of rows to render above/below the visible bounds of the list. This can help reduce flickering during scrolling on certain browsers/devices. Defaults to `100`. | 76 | | `scrollToAlignment` | String | | Controls the alignment of scrolled-to-rows. The default (`'auto'`) scrolls the least amount possible to ensure that the specified row is fully visible. Use `'start'` to always align rows to the top of the list and `'end'` to align them bottom. Use `'center'` to align them in the middle of container. | 77 | | `onScroll` | Function | | Callback invoked whenever the scroll offset changes within the inner scrollable region: `({ clientHeight: number, scrollHeight: number, scrollTop: number }): void` | 78 | 79 | ## `` 80 | 81 | `ScrollFollow` is a higher-order component (HOC) that aims to simplify toggling a `LazyLog`'s 82 | "follow" functionality based on user scrolling. 83 | 84 | ### Usage 85 | 86 | The `ScrollFollow` component accepts a render prop function which should return a component to render based on the 87 | function's arguments. 88 | 89 | ```jsx 90 | import React from 'react'; 91 | import { render } from 'react-dom'; 92 | import { LazyLog, ScrollFollow } from 'react-lazylog'; 93 | 94 | render(( 95 | ( 98 | 99 | )} 100 | /> 101 | ), document.getElementById('root')); 102 | ``` 103 | 104 | ## Styling 105 | 106 | All of the components exposed from react-lazylog use CSS modules to contain its styles to each individual component. If 107 | you wish to override these styles, there are a few techniques you can use. 108 | 109 | ### `style` and `containerStyle` 110 | 111 | For the core container of ``, you can pass a `style` object prop to affect many styles. 112 | For affecting the look or behavior of the scrollable region of these components, use the `containerStyle` prop with a 113 | styling object. 114 | 115 | ### `defaultProps.style` 116 | 117 | For many react-logviewer components, continually passing varied styling objects is tedious. To make this simpler, you can 118 | override the `defaultProps.style` of any desired component to override styles of that component. For example: 119 | 120 | ```jsx 121 | import Line from 'react-lazylog/build/Line'; 122 | 123 | // Use defaultProps.style to set the style for an internal component 124 | Line.defaultProps.style = { 125 | color: 'green' 126 | }; 127 | ``` 128 | 129 | **Note: overriding the ANSI colors and styles is currently undocumented, and will probably need some source-diving to 130 | figure out. I would gladly accept a pull request that could improve the styling API.** 131 | 132 | ### CSS stylesheets 133 | 134 | If you are using CSS stylesheets, you can target the main virtual `LazyList` component with the `react-lazylog` 135 | class name. From there you can target the individual `div` lines, `a` line numbers, or `span` line content. 136 | 137 | ## Sub-components 138 | 139 | react-lazylog uses a number of sub-components internally to render individual parts of the log-viewing component: 140 | 141 | ### `` 142 | 143 | A single row of content, containing both the line number and any text content within the line. 144 | 145 | ### `` 146 | 147 | The line number of a single line. The anchor contained within is interactive, and will highlight the entire line upon 148 | selection. 149 | 150 | ### `` 151 | 152 | The container of all the individual pieces of content that is on a single line. May contain one or more `LinePart`s 153 | depending on ANSI parsing. 154 | 155 | ### `` 156 | 157 | An individual segment of text within a line. When the text content is ANSI-parsed, each boundary is placed within its 158 | own `LinePart` and styled separately (colors, text formatting, etc.) from the rest of the line's content. 159 | 160 | ## Technology 161 | 162 | - [React Virtualized](https://github.com/bvaughn/react-virtualized) for efficiently rendering large lines of data 163 | - [Neutrino](https://neutrino.js.org) for building and developing using shared presets and Webpack 164 | - [@neutrinojs/react-components](https://neutrino.js.org/packages/react-components) for creating React components 165 | - [neutrino-middleware-styleguidist](https://github.com/eliperelman/neutrino-middleware-styleguidist) for component demos and documentation 166 | - `fetch` API for efficiently requesting data with array buffers and binary streams 167 | - [fetch-readablestream](https://github.com/jonnyreeves/fetch-readablestream/) 168 | - [web-streams-polyfill](https://www.npmjs.com/package/web-streams-polyfill) 169 | - [text-encoding-utf-8](https://www.npmjs.com/package/text-encoding-utf-8) 170 | - [ansiparse](https://www.npmjs.com/package/ansiparse) for nice log styling, like Travis 171 | - [mitt](https://www.npmjs.com/package/mitt) for dead-simple events to manage streaming lifecycle 172 | - [Immutable](https://www.npmjs.com/package/immutable) for efficiently storing and managing very large collections of lines and highlight ranges 173 | - `Uint8Array` for dealing with text content as binary, allows for conditionally rendering partial data and decoding everything without crashing your browser 174 | 175 | ## Development and Contributing 176 | 177 | This repository uses [Neutrino](https://neutrino.js.org), 178 | [@neutrinojs/react-components](https://neutrino.js.org/packages/react-components), 179 | and [neutrino-middleware-styleguidist](https://github.com/eliperelman/neutrino-middleware-styleguidist) 180 | for developing, previewing, and building React components. To get started: 181 | 182 | - Fork and clone this repo. 183 | - Install the dependencies with `yarn`. 184 | - Start the development server with `yarn start`. This will launch a styleguide instance. 185 | Open a browser to http://localhost:6060 to preview the React components. 186 | - Use CTRL-C to exit the styleguide. 187 | - Use `yarn build` to generate the compiled component for publishing to npm. 188 | 189 | Feel free to open an issue, submit a pull request, or contribute however you would like. Understand that this 190 | documentation is still a work in progress, so file an issue or submit a PR to ask questions or make improvements. 191 | Thanks! 192 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-lazylog", 3 | "version": "4.5.3", 4 | "description": "React Lazy Logviewer", 5 | "license": "MPL-2.0", 6 | "repository": "mozilla-frontend-infra/react-lazylog", 7 | "main": "build/index.js", 8 | "files": [ 9 | "build", 10 | "src" 11 | ], 12 | "keywords": [ 13 | "react", 14 | "log", 15 | "viewer", 16 | "logviewer", 17 | "lazy", 18 | "lazylog" 19 | ], 20 | "scripts": { 21 | "build": "neutrino build", 22 | "prepare": "neutrino build", 23 | "lint": "neutrino lint", 24 | "start": "neutrino styleguide:start", 25 | "precommit": "neutrino stage", 26 | "deploy": "neutrino styleguide:build && gh-pages --remote upstream -d styleguide" 27 | }, 28 | "devDependencies": { 29 | "babel-polyfill": "^6.26.0", 30 | "gh-pages": "^1.1.0", 31 | "neutrino": "^8.2.1", 32 | "neutrino-preset-mozilla-frontend-infra": "^4.1.0", 33 | "react": "^16.3.1", 34 | "react-dom": "^16.3.1" 35 | }, 36 | "dependencies": { 37 | "@mattiasbuelens/web-streams-polyfill": "^0.2.0", 38 | "fetch-readablestream": "^0.2.0", 39 | "immutable": "^3.8.2", 40 | "mitt": "^1.1.2", 41 | "prop-types": "^15.6.1", 42 | "react-string-replace": "^0.4.1", 43 | "react-virtualized": "^9.21.0", 44 | "text-encoding-utf-8": "^1.0.1", 45 | "whatwg-fetch": "^2.0.4" 46 | }, 47 | "peerDependencies": { 48 | "react": ">=16.3.0" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/ansiparse.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-plusplus, no-continue */ 2 | const foregroundColors = { 3 | '30': 'black', 4 | '31': 'red', 5 | '32': 'green', 6 | '33': 'yellow', 7 | '34': 'blue', 8 | '35': 'magenta', 9 | '36': 'cyan', 10 | '37': 'white', 11 | '90': 'grey', 12 | }; 13 | const backgroundColors = { 14 | '40': 'black', 15 | '41': 'red', 16 | '42': 'green', 17 | '43': 'yellow', 18 | '44': 'blue', 19 | '45': 'magenta', 20 | '46': 'cyan', 21 | '47': 'white', 22 | }; 23 | const styles = { 24 | '1': 'bold', 25 | '3': 'italic', 26 | '4': 'underline', 27 | }; 28 | const eraseChar = (matchingText, result) => { 29 | if (matchingText.length) { 30 | return [matchingText.substr(0, matchingText.length - 1), result]; 31 | } else if (result.length) { 32 | const index = result.length - 1; 33 | const { text } = result[index]; 34 | const newResult = 35 | text.length === 1 36 | ? result.slice(0, result.length - 1) 37 | : result.map((item, i) => 38 | index === i 39 | ? { ...item, text: text.substr(0, text.length - 1) } 40 | : item 41 | ); 42 | 43 | return [matchingText, newResult]; 44 | } 45 | 46 | return [matchingText, result]; 47 | }; 48 | 49 | const ansiparse = str => { 50 | let matchingControl = null; 51 | let matchingData = null; 52 | let matchingText = ''; 53 | let ansiState = []; 54 | let result = []; 55 | let state = {}; 56 | 57 | for (let i = 0; i < str.length; i++) { 58 | if (matchingControl !== null) { 59 | if (matchingControl === '\x1b' && str[i] === '[') { 60 | if (matchingText) { 61 | state.text = matchingText; 62 | result.push(state); 63 | state = {}; 64 | matchingText = ''; 65 | } 66 | 67 | matchingControl = null; 68 | matchingData = ''; 69 | } else { 70 | matchingText += matchingControl + str[i]; 71 | matchingControl = null; 72 | } 73 | 74 | continue; 75 | } else if (matchingData !== null) { 76 | if (str[i] === ';') { 77 | ansiState.push(matchingData); 78 | matchingData = ''; 79 | } else if (str[i] === 'm') { 80 | ansiState.push(matchingData); 81 | matchingData = null; 82 | matchingText = ''; 83 | 84 | for (let a = 0; a < ansiState.length; a++) { 85 | const ansiCode = ansiState[a]; 86 | 87 | if (foregroundColors[ansiCode]) { 88 | state.foreground = foregroundColors[ansiCode]; 89 | } else if (backgroundColors[ansiCode]) { 90 | state.background = backgroundColors[ansiCode]; 91 | } else if (ansiCode === 39) { 92 | delete state.foreground; 93 | } else if (ansiCode === 49) { 94 | delete state.background; 95 | } else if (styles[ansiCode]) { 96 | state[styles[ansiCode]] = true; 97 | } else if (ansiCode === 22) { 98 | state.bold = false; 99 | } else if (ansiCode === 23) { 100 | state.italic = false; 101 | } else if (ansiCode === 24) { 102 | state.underline = false; 103 | } 104 | } 105 | 106 | ansiState = []; 107 | } else { 108 | matchingData += str[i]; 109 | } 110 | 111 | continue; 112 | } 113 | 114 | if (str[i] === '\x1b') { 115 | matchingControl = str[i]; 116 | } else if (str[i] === '\u0008') { 117 | [matchingText, result] = eraseChar(matchingText, result); 118 | } else { 119 | matchingText += str[i]; 120 | } 121 | } 122 | 123 | if (matchingText) { 124 | state.text = matchingText + (matchingControl || ''); 125 | result.push(state); 126 | } 127 | 128 | return result; 129 | }; 130 | 131 | export default ansiparse; 132 | -------------------------------------------------------------------------------- /src/components/LazyLog/README.md: -------------------------------------------------------------------------------- 1 | Normal log viewing using a `url`: 2 | 3 | ```js 4 | const url = 'https://gist.githubusercontent.com/helfi92/96d4444aa0ed46c5f9060a789d316100/raw/ba0d30a9877ea5cc23c7afcd44505dbc2bab1538/typical-live_backing.log'; 5 | 6 |
7 | 8 |
9 | ``` 10 | 11 | See [`ScrollFollow`](#scrollfollow) for an example of a streaming endpoint. 12 | 13 | Log viewing using `text` from a string : 14 | 15 | ```js 16 | const text = ` 17 | Sed ut perspiciatis unde omnis iste natus error sit voluptatem 18 | accusantium doloremque laudantium, totam rem aperiam, 19 | eaque ipsa quae ab illo inventore veritatis et quasi architecto 20 | beatae vitae dicta sunt explicabo. Nemo enim ipsam 21 | voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed 22 | quia consequuntur magni dolores eos qui ratione 23 | voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem 24 | ipsum quia dolor sit amet, consectetur, adipisci 25 | velit, sed quia non numquam eius modi tempora incidunt ut labore 26 | et dolore magnam aliquam quaerat voluptatem. 27 | 28 | Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit 29 | laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure 30 | reprehenderit qui in ea voluptate velit esse quam nihil molestiae 31 | consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? 32 | `; 33 | 34 |
35 | 36 |
37 | ``` 38 | 39 | Log viewing using a websocket 40 | 41 | ```jsx harmony 42 | const url = 'wss://echo.websocket.org'; 43 | let socket = null; 44 | 45 |
46 | 51 |
52 | { 58 | socket = sock; sock.send(JSON.stringify({message: "Socket has been opened!"})) 59 | }, 60 | formatMessage: e => JSON.parse(e).message, 61 | }} 62 | /> 63 |
64 |
65 | ``` 66 | -------------------------------------------------------------------------------- /src/components/LazyLog/index.jsx: -------------------------------------------------------------------------------- 1 | import { Component, Fragment } from 'react'; 2 | import { 3 | any, 4 | arrayOf, 5 | bool, 6 | func, 7 | number, 8 | object, 9 | oneOfType, 10 | string, 11 | shape, 12 | } from 'prop-types'; 13 | import { AutoSizer, List as VirtualList } from 'react-virtualized'; 14 | import { List } from 'immutable'; 15 | import ansiparse from '../../ansiparse'; 16 | import { decode, encode } from '../../encoding'; 17 | import { 18 | SEARCH_BAR_HEIGHT, 19 | SEARCH_MIN_KEYWORDS, 20 | getScrollIndex, 21 | getHighlightRange, 22 | searchFormatPart, 23 | convertBufferToLines, 24 | } from '../../utils'; 25 | import Line from '../Line'; 26 | import Loading from '../Loading'; 27 | import SearchBar from '../SearchBar'; 28 | import request from '../../request'; 29 | import stream from '../../stream'; 30 | import websocket from '../../websocket'; 31 | import { searchLines } from '../../search'; 32 | import { lazyLog, searchMatch } from './index.module.css'; 33 | 34 | // Setting a hard limit on lines since browsers have trouble with heights 35 | // starting at around 16.7 million pixels and up 36 | const BROWSER_PIXEL_LIMIT = 16.7 * 1000000; 37 | 38 | export default class LazyLog extends Component { 39 | static propTypes = { 40 | /** 41 | * The URL from which to fetch content. Subject to same-origin policy, 42 | * so must be accessible via fetch on same domain or via CORS. 43 | */ 44 | url: string, 45 | /** 46 | * String containing text to display. 47 | */ 48 | text: string, 49 | /** 50 | * Options object which will be passed through to the `fetch` request. 51 | * Defaults to `{ credentials: 'omit' }`. 52 | */ 53 | fetchOptions: object, 54 | 55 | /** 56 | * Options object which will be passed through to websocket. 57 | */ 58 | websocketOptions: shape({ 59 | // a callback which is invoked when the websocket connection is opened. 60 | onOpen: func, 61 | // a callback which is invoked when the websocket connection is closed. 62 | onClose: func, 63 | // a callback which is invoked when there is an error opening the 64 | // underlying websocket connection.. 65 | onError: func, 66 | // a callback which formats the websocket data stream. 67 | formatMessage: func, 68 | }), 69 | /** 70 | * Set to `true` to specify remote URL will be streaming chunked data. 71 | * Defaults to `false` to download data until completion. 72 | */ 73 | stream: bool, 74 | 75 | /** 76 | * Set to `true` to specify that url is a websocket URL. 77 | * Defaults to `false` to download data until completion. 78 | */ 79 | websocket: bool, 80 | 81 | /** 82 | * Set the height in pixels for the component. 83 | * Defaults to `'auto'` if unspecified. When the `height` is `'auto'`, 84 | * the component will expand vertically to fill its container. 85 | */ 86 | height: oneOfType([number, string]), 87 | /** 88 | * Set the width in pixels for the component. 89 | * Defaults to `'auto'` if unspecified. 90 | * When the `width` is `'auto'`, the component will expand 91 | * horizontally to fill its container. 92 | */ 93 | width: oneOfType([number, string]), 94 | /** 95 | * Scroll to the end of the component after each update to the content. 96 | * Cannot be used in combination with `scrollToLine`. 97 | */ 98 | follow: bool, 99 | /** 100 | * Scroll to a particular line number once it has loaded. 101 | * This is 1-indexed, i.e. line numbers start at `1`. 102 | * Cannot be used in combination with `follow`. 103 | */ 104 | scrollToLine: number, 105 | /** 106 | * Line number (e.g. `highlight={10}`) or line number range to highlight 107 | * inclusively (e.g. `highlight={[5, 10]}` highlights lines 5-10). 108 | * This is 1-indexed, i.e. line numbers start at `1`. 109 | */ 110 | highlight: oneOfType([number, arrayOf(number)]), 111 | /** 112 | * Make the text selectable, allowing to copy & paste. Defaults to `false`. 113 | */ 114 | selectableLines: bool, 115 | /** 116 | * Enable the search feature. 117 | */ 118 | enableSearch: bool, 119 | /** 120 | * Execute a function against each string part of a line, 121 | * returning a new line part. Is passed a single argument which is 122 | * the string part to manipulate, should return a new string 123 | * with the manipulation completed. 124 | */ 125 | formatPart: func, 126 | /** 127 | * Execute a function if/when the provided `url` has completed loading. 128 | */ 129 | onLoad: func, 130 | /** 131 | * Execute a function if the provided `url` has encountered an error 132 | * during loading. 133 | */ 134 | onError: func, 135 | /** 136 | * Execute a function when the highlighted range has changed. 137 | * Is passed a single argument which is an `Immutable.Range` 138 | * of the highlighted line numbers. 139 | */ 140 | onHighlight: func, 141 | /** 142 | * A fixed row height in pixels. Controls how tall a line is, 143 | * as well as the `lineHeight` style of the line's text. 144 | * Defaults to `19`. 145 | */ 146 | rowHeight: number, 147 | /** 148 | * Number of rows to render above/below the visible bounds of the list. 149 | * This can help reduce flickering during scrolling on 150 | * certain browsers/devices. Defaults to `100`. 151 | */ 152 | overscanRowCount: number, 153 | /** 154 | * Optional custom inline style to attach to element which contains 155 | * the interior scrolling container. 156 | */ 157 | containerStyle: object, 158 | /** 159 | * Optional custom inline style to attach to root 160 | * virtual `LazyList` element. 161 | */ 162 | style: object, 163 | /** 164 | * Specify an alternate component to use when loading. 165 | */ 166 | loadingComponent: any, 167 | /** 168 | * Specify an additional className to append to lines. 169 | */ 170 | lineClassName: string, 171 | /** 172 | * Specify an additional className to append to highlighted lines. 173 | */ 174 | highlightLineClassName: string, 175 | /** 176 | * Number of extra lines to show at the bottom of the log. 177 | * Set this to 1 so that Linux users can see the last line 178 | * of the log output. 179 | */ 180 | extraLines: number, 181 | /** 182 | * Flag to enable/disable case insensitive search 183 | */ 184 | caseInsensitive: bool, 185 | }; 186 | 187 | static defaultProps = { 188 | stream: false, 189 | websocket: false, 190 | height: 'auto', 191 | width: 'auto', 192 | follow: false, 193 | scrollToLine: 0, 194 | highlight: null, 195 | selectableLines: false, 196 | enableSearch: false, 197 | rowHeight: 19, 198 | overscanRowCount: 100, 199 | containerStyle: { 200 | width: 'auto', 201 | maxWidth: 'initial', 202 | overflow: 'initial', 203 | }, 204 | style: {}, 205 | extraLines: 0, 206 | onError: null, 207 | onHighlight: null, 208 | onLoad: null, 209 | formatPart: null, 210 | websocketOptions: {}, 211 | fetchOptions: { credentials: 'omit' }, 212 | loadingComponent: Loading, 213 | lineClassName: '', 214 | highlightLineClassName: '', 215 | caseInsensitive: false, 216 | }; 217 | 218 | static getDerivedStateFromProps( 219 | { 220 | highlight, 221 | follow, 222 | scrollToLine, 223 | rowHeight, 224 | url: nextUrl, 225 | text: nextText, 226 | }, 227 | { 228 | count, 229 | offset, 230 | url: previousUrl, 231 | text: previousText, 232 | highlight: previousHighlight, 233 | isSearching, 234 | scrollToIndex, 235 | } 236 | ) { 237 | const newScrollToIndex = isSearching 238 | ? scrollToIndex 239 | : getScrollIndex({ follow, scrollToLine, count, offset }); 240 | const shouldUpdate = 241 | (nextUrl && nextUrl !== previousUrl) || 242 | (nextText && nextText !== previousText); 243 | 244 | return { 245 | scrollToIndex: newScrollToIndex, 246 | lineLimit: Math.floor(BROWSER_PIXEL_LIMIT / rowHeight), 247 | highlight: highlight 248 | ? getHighlightRange(highlight) 249 | : previousHighlight || getHighlightRange(previousHighlight), 250 | ...(shouldUpdate 251 | ? { 252 | url: nextUrl, 253 | text: nextText, 254 | lines: List(), 255 | count: 0, 256 | offset: 0, 257 | loaded: false, 258 | error: null, 259 | } 260 | : null), 261 | }; 262 | } 263 | 264 | state = { 265 | resultLines: [], 266 | }; 267 | 268 | componentDidMount() { 269 | this.request(); 270 | } 271 | 272 | componentDidUpdate(prevProps, prevState) { 273 | if ( 274 | prevProps.url !== this.props.url || 275 | prevState.url !== this.state.url || 276 | prevProps.text !== this.props.text 277 | ) { 278 | this.request(); 279 | } 280 | 281 | if ( 282 | !this.state.loaded && 283 | prevState.loaded !== this.state.loaded && 284 | this.props.onLoad 285 | ) { 286 | this.props.onLoad(); 287 | } else if ( 288 | this.state.error && 289 | prevState.error !== this.state.error && 290 | this.props.onError 291 | ) { 292 | this.props.onError(this.state.error); 293 | } 294 | 295 | if ( 296 | this.props.highlight && 297 | prevProps.highlight !== this.props.highlight && 298 | this.props.onHighlight 299 | ) { 300 | this.props.onHighlight(this.state.highlight); 301 | } 302 | } 303 | 304 | componentWillUnmount() { 305 | this.endRequest(); 306 | } 307 | 308 | initEmitter() { 309 | const { 310 | stream: isStream, 311 | websocket: isWebsocket, 312 | url, 313 | fetchOptions, 314 | websocketOptions, 315 | } = this.props; 316 | 317 | if (isWebsocket) { 318 | return websocket(url, websocketOptions); 319 | } 320 | 321 | if (isStream) { 322 | return stream(url, fetchOptions); 323 | } 324 | 325 | return request(url, fetchOptions); 326 | } 327 | 328 | request() { 329 | const { text, url } = this.props; 330 | 331 | this.endRequest(); 332 | 333 | if (text) { 334 | const encodedLog = encode(text); 335 | const { lines, remaining } = convertBufferToLines(encodedLog); 336 | 337 | this.handleUpdate({ 338 | lines: remaining ? lines.concat(remaining) : lines, 339 | encodedLog, 340 | }); 341 | this.handleEnd(encodedLog); 342 | } 343 | 344 | if (url) { 345 | this.emitter = this.initEmitter(); 346 | this.emitter.on('update', this.handleUpdate); 347 | this.emitter.on('end', this.handleEnd); 348 | this.emitter.on('error', this.handleError); 349 | this.emitter.emit('start'); 350 | } 351 | } 352 | 353 | endRequest() { 354 | if (this.emitter) { 355 | this.emitter.emit('abort'); 356 | this.emitter.off('update', this.handleUpdate); 357 | this.emitter.off('end', this.handleEnd); 358 | this.emitter.off('error', this.handleError); 359 | this.emitter = null; 360 | } 361 | } 362 | 363 | handleUpdate = ({ lines: moreLines, encodedLog }) => { 364 | this.encodedLog = encodedLog; 365 | const { scrollToLine, follow, stream, websocket } = this.props; 366 | const { lineLimit, count: previousCount } = this.state; 367 | let offset = 0; 368 | let lines = (this.state.lines || List()).concat(moreLines); 369 | let count = lines.count(); 370 | 371 | if (count > lineLimit) { 372 | offset = count - lineLimit; 373 | lines = lines.slice(-lineLimit); 374 | count = lines.count(); 375 | } 376 | 377 | const scrollToIndex = getScrollIndex({ 378 | follow, 379 | scrollToLine, 380 | previousCount, 381 | count, 382 | offset, 383 | }); 384 | 385 | this.setState({ 386 | lines, 387 | offset, 388 | count, 389 | scrollToIndex, 390 | }); 391 | 392 | if (stream || websocket) { 393 | this.forceSearch(); 394 | } 395 | }; 396 | 397 | handleEnd = encodedLog => { 398 | this.encodedLog = encodedLog; 399 | this.setState({ loaded: true }); 400 | 401 | if (this.props.onLoad) { 402 | this.props.onLoad(); 403 | } 404 | }; 405 | 406 | handleError = err => { 407 | this.setState({ error: err }); 408 | 409 | if (this.props.onError) { 410 | this.props.onError(err); 411 | } 412 | }; 413 | 414 | handleHighlight = e => { 415 | const { onHighlight } = this.props; 416 | const { isFilteringLinesWithMatches } = this.state; 417 | 418 | if (!e.target.id) { 419 | return; 420 | } 421 | 422 | const lineNumber = +e.target.id; 423 | 424 | if (!lineNumber) { 425 | return; 426 | } 427 | 428 | const first = this.state.highlight.first(); 429 | const last = this.state.highlight.last(); 430 | let range; 431 | 432 | if (first === lineNumber) { 433 | range = null; 434 | } else if (!e.shiftKey || !first) { 435 | range = lineNumber; 436 | } else if (lineNumber > first) { 437 | range = [first, lineNumber]; 438 | } else { 439 | range = [lineNumber, last]; 440 | } 441 | 442 | const highlight = getHighlightRange(range); 443 | const state = { highlight }; 444 | 445 | if (isFilteringLinesWithMatches) { 446 | Object.assign(state, { 447 | scrollToIndex: getScrollIndex({ scrollToLine: lineNumber }), 448 | }); 449 | } 450 | 451 | this.setState(state, () => { 452 | if (onHighlight) { 453 | onHighlight(highlight); 454 | } 455 | 456 | if (isFilteringLinesWithMatches) { 457 | this.handleFilterLinesWithMatches(false); 458 | } 459 | }); 460 | }; 461 | 462 | handleSearch = keywords => { 463 | const { resultLines, searchKeywords } = this.state; 464 | const { caseInsensitive, stream, websocket } = this.props; 465 | const currentResultLines = 466 | !stream && !websocket && keywords === searchKeywords 467 | ? resultLines 468 | : searchLines(keywords, this.encodedLog, caseInsensitive); 469 | 470 | this.setState( 471 | { 472 | resultLines: currentResultLines, 473 | isSearching: true, 474 | searchKeywords: keywords, 475 | }, 476 | this.filterLinesWithMatches 477 | ); 478 | }; 479 | 480 | forceSearch = () => { 481 | const { searchKeywords } = this.state; 482 | 483 | if (searchKeywords && searchKeywords.length > SEARCH_MIN_KEYWORDS) { 484 | this.handleSearch(this.state.searchKeywords); 485 | } 486 | }; 487 | 488 | handleClearSearch = () => { 489 | this.setState({ 490 | isSearching: false, 491 | searchKeywords: '', 492 | resultLines: [], 493 | filteredLines: List(), 494 | resultLineUniqueIndexes: [], 495 | isFilteringLinesWithMatches: this.state.isFilteringLinesWithMatches, 496 | scrollToIndex: 0, 497 | }); 498 | }; 499 | 500 | handleFilterLinesWithMatches = isFilterEnabled => { 501 | this.setState( 502 | { 503 | isFilteringLinesWithMatches: isFilterEnabled, 504 | filteredLines: List(), 505 | resultLineUniqueIndexes: [], 506 | }, 507 | this.filterLinesWithMatches 508 | ); 509 | }; 510 | 511 | filterLinesWithMatches = () => { 512 | const { resultLines, lines, isFilteringLinesWithMatches } = this.state; 513 | 514 | if (resultLines.length > 0 && isFilteringLinesWithMatches) { 515 | const resultLineUniqueIndexes = [...new Set(resultLines)]; 516 | 517 | this.setState({ 518 | resultLineUniqueIndexes, 519 | filteredLines: lines.filter((line, index) => 520 | resultLineUniqueIndexes.some( 521 | resultLineIndex => index + 1 === resultLineIndex 522 | ) 523 | ), 524 | }); 525 | } 526 | }; 527 | 528 | handleFormatPart = () => { 529 | const { isSearching, searchKeywords } = this.state; 530 | 531 | if (isSearching) { 532 | return searchFormatPart({ 533 | searchKeywords, 534 | formatPart: this.props.formatPart, 535 | caseInsensitive: this.props.caseInsensitive, 536 | replaceJsx: (text, key) => ( 537 | 538 | {text} 539 | 540 | ), 541 | }); 542 | } 543 | 544 | return this.props.formatPart; 545 | }; 546 | 547 | renderError() { 548 | const { 549 | url, 550 | lineClassName, 551 | selectableLines, 552 | highlightLineClassName, 553 | } = this.props; 554 | const { error } = this.state; 555 | 556 | return ( 557 | 558 | 574 | 586 | 598 | 605 | 617 | 618 | ); 619 | } 620 | 621 | renderRow = ({ key, index, style }) => { 622 | const { 623 | rowHeight, 624 | selectableLines, 625 | lineClassName, 626 | highlightLineClassName, 627 | } = this.props; 628 | const { 629 | highlight, 630 | lines, 631 | offset, 632 | isFilteringLinesWithMatches, 633 | filteredLines, 634 | resultLineUniqueIndexes, 635 | } = this.state; 636 | const linesToRender = isFilteringLinesWithMatches ? filteredLines : lines; 637 | const number = isFilteringLinesWithMatches 638 | ? resultLineUniqueIndexes[index] 639 | : index + 1 + offset; 640 | 641 | return ( 642 | 655 | ); 656 | }; 657 | 658 | renderNoRows = () => { 659 | const { 660 | loadingComponent: Loading, 661 | lineClassName, 662 | highlightLineClassName, 663 | } = this.props; 664 | const { error, count, loaded } = this.state; 665 | 666 | if (error) { 667 | return this.renderError(); 668 | } 669 | 670 | // Handle case where log is empty 671 | if (!count && loaded) { 672 | return null; 673 | } 674 | 675 | // We don't do `if (loaded) {}` in order to handle 676 | // the edge case where the log is streaming 677 | if (count) { 678 | return ( 679 | 684 | ); 685 | } 686 | 687 | return ; 688 | }; 689 | 690 | calculateListHeight = autoSizerHeight => { 691 | const { height, enableSearch } = this.props; 692 | 693 | if (enableSearch) { 694 | return height === 'auto' 695 | ? autoSizerHeight - SEARCH_BAR_HEIGHT 696 | : height - SEARCH_BAR_HEIGHT; 697 | } 698 | 699 | return height === 'auto' ? autoSizerHeight : height; 700 | }; 701 | 702 | render() { 703 | const { enableSearch } = this.props; 704 | const { 705 | resultLines, 706 | isFilteringLinesWithMatches, 707 | filteredLines = List(), 708 | count, 709 | } = this.state; 710 | const rowCount = isFilteringLinesWithMatches ? filteredLines.size : count; 711 | 712 | return ( 713 | 714 | {enableSearch && ( 715 | 723 | )} 724 | 727 | {({ height, width }) => ( 728 | this.renderRow(row)} 734 | noRowsRenderer={this.renderNoRows} 735 | {...this.props} 736 | height={this.calculateListHeight(height)} 737 | width={this.props.width === 'auto' ? width : this.props.width} 738 | scrollToIndex={this.state.scrollToIndex} 739 | /> 740 | )} 741 | 742 | 743 | ); 744 | } 745 | } 746 | -------------------------------------------------------------------------------- /src/components/LazyLog/index.module.css: -------------------------------------------------------------------------------- 1 | .lazyLog { 2 | overflow: auto !important; 3 | font-family: "Monaco", monospace; 4 | font-size: 12px; 5 | margin: 0; 6 | white-space: pre; 7 | background-color: #222222; 8 | color: #d6d6d6; 9 | font-weight: 400; 10 | will-change: initial; 11 | outline: none; 12 | } 13 | 14 | .searchMatch { 15 | background-color: #ffff00; 16 | color: #222222; 17 | } 18 | -------------------------------------------------------------------------------- /src/components/Line/README.md: -------------------------------------------------------------------------------- 1 | ```js 2 | 7 | ``` -------------------------------------------------------------------------------- /src/components/Line/index.jsx: -------------------------------------------------------------------------------- 1 | import { Component } from 'react'; 2 | import { arrayOf, bool, func, number, object, shape, string } from 'prop-types'; 3 | import LineNumber from '../LineNumber'; 4 | import LineContent from '../LineContent'; 5 | import { line, lineHighlight, lineSelectable } from './index.module.css'; 6 | 7 | /** 8 | * A single row of content, containing both the line number 9 | * and any text content within the line. 10 | */ 11 | export default class Line extends Component { 12 | static propTypes = { 13 | data: arrayOf( 14 | shape({ 15 | text: string, 16 | }) 17 | ).isRequired, 18 | number, 19 | rowHeight: number, 20 | highlight: bool, 21 | selectable: bool, 22 | style: object, 23 | formatPart: func, 24 | onLineNumberClick: func, 25 | onRowClick: func, 26 | className: string, 27 | highlightClassName: string, 28 | }; 29 | 30 | static defaultProps = { 31 | highlight: false, 32 | selectable: false, 33 | style: {}, 34 | formatPart: null, 35 | onLineNumberClick: null, 36 | onRowClick: null, 37 | className: '', 38 | highlightClassName: '', 39 | }; 40 | 41 | render() { 42 | const { 43 | data, 44 | formatPart, 45 | highlight, 46 | selectable, 47 | onLineNumberClick, 48 | onRowClick, 49 | number, 50 | rowHeight, 51 | style, 52 | className, 53 | highlightClassName, 54 | } = this.props; 55 | const selectableClass = selectable ? ` ${lineSelectable}` : ''; 56 | const highlightClass = highlight 57 | ? ` ${lineHighlight} ${highlightClassName}` 58 | : ''; 59 | const classes = `${line}${selectableClass}${highlightClass} ${className}`; 60 | const lineStyle = { 61 | ...style, 62 | lineHeight: `${style ? style.height || rowHeight : rowHeight}px`, 63 | minWidth: style ? style.width || '100%' : '100%', 64 | width: null, 65 | }; 66 | 67 | return ( 68 |
69 | 74 | 80 |
81 | ); 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /src/components/Line/index.module.css: -------------------------------------------------------------------------------- 1 | .line { 2 | margin: 0; 3 | user-select: none; 4 | } 5 | 6 | .line:hover { 7 | background-color: #444444; 8 | } 9 | 10 | .lineHighlight { 11 | background-color: #666666; 12 | } 13 | 14 | .lineSelectable { 15 | user-select: text; 16 | } 17 | -------------------------------------------------------------------------------- /src/components/LineContent/README.md: -------------------------------------------------------------------------------- 1 | Simple usage: 2 | 3 | ```js 4 | 8 | ``` 9 | 10 | Format each line part 11 | 12 | ```js 13 | text.replace('world', 'galaxy')} 17 | /> 18 | ``` -------------------------------------------------------------------------------- /src/components/LineContent/index.jsx: -------------------------------------------------------------------------------- 1 | import { Component } from 'react'; 2 | import { arrayOf, func, number, object, shape, string } from 'prop-types'; 3 | import LinePart from '../LinePart'; 4 | import { lineContent } from './index.module.css'; 5 | 6 | /* eslint-disable react/no-array-index-key */ 7 | 8 | /** 9 | * The container of all the individual pieces of content that 10 | * is on a single line. May contain one or more `LinePart`s 11 | * depending on ANSI parsing. 12 | */ 13 | export default class LineContent extends Component { 14 | static propTypes = { 15 | /** 16 | * The pieces of data to render in a line. Will typically 17 | * be multiple items in the array if ANSI parsed prior. 18 | */ 19 | data: arrayOf( 20 | shape({ 21 | text: string, 22 | }) 23 | ).isRequired, 24 | /** 25 | * The line number being rendered. 26 | */ 27 | number: number.isRequired, 28 | /** 29 | * Execute a function against each line part's 30 | * `text` property in `data` to process and 31 | * return a new value to render for the part. 32 | */ 33 | formatPart: func, 34 | style: object, 35 | }; 36 | 37 | static defaultProps = { 38 | formatPart: null, 39 | style: null, 40 | }; 41 | 42 | render() { 43 | const { data, formatPart, number, style } = this.props; 44 | 45 | if (data) { 46 | const last = data[data.length - 1]; 47 | 48 | if (last && typeof last.text === 'string' && !last.text.endsWith('\n')) { 49 | last.text += '\n'; 50 | } 51 | } 52 | 53 | return ( 54 | 55 | {data && 56 | data.map((part, n) => ( 57 | 62 | ))} 63 | 64 | ); 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/components/LineContent/index.module.css: -------------------------------------------------------------------------------- 1 | .lineContent { 2 | user-select: initial; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/LineNumber/README.md: -------------------------------------------------------------------------------- 1 | Render a line number. 2 | 3 | ```js 4 | 7 | ``` 8 | 9 | Execute a function on click. 10 | 11 | ```js 12 | alert(`Line ${number} clicked!`)} 15 | /> 16 | ``` 17 | -------------------------------------------------------------------------------- /src/components/LineNumber/index.jsx: -------------------------------------------------------------------------------- 1 | import { Component } from 'react'; 2 | import { bool, func, number, object } from 'prop-types'; 3 | import { lineNumber, lineNumberHighlight } from './index.module.css'; 4 | 5 | /* eslint-disable jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid */ 6 | 7 | /** 8 | * The line number of a single line. 9 | * The anchor contained within is interactive, and will highlight the 10 | * entire line upon selection. 11 | */ 12 | export default class LineNumber extends Component { 13 | static propTypes = { 14 | /** 15 | * The line number to display in the anchor. 16 | */ 17 | number: number.isRequired, 18 | /** 19 | * Specify whether this line is highlighted. 20 | */ 21 | highlight: bool, 22 | /** 23 | * Execute a function when the line number is clicked. 24 | */ 25 | onClick: func, 26 | style: object, 27 | }; 28 | 29 | static defaultProps = { 30 | style: null, 31 | highlight: false, 32 | onClick: null, 33 | }; 34 | 35 | render() { 36 | const { highlight, onClick, number, style } = this.props; 37 | 38 | return ( 39 | 45 | ); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/components/LineNumber/index.module.css: -------------------------------------------------------------------------------- 1 | .lineNumber { 2 | display: inline-block; 3 | width: 55px; 4 | margin-left: 15px; 5 | margin-right: 15px; 6 | color: #666666; 7 | user-select: none; 8 | text-align: right; 9 | min-width: 40px; 10 | cursor: pointer; 11 | text-decoration: none; 12 | padding-right: 1em 13 | } 14 | 15 | .lineNumber::before { 16 | content: attr(id); 17 | } 18 | 19 | .lineNumberHighlight { 20 | composes: lineNumber; 21 | color: #ffffff; 22 | } 23 | -------------------------------------------------------------------------------- /src/components/LinePart/README.md: -------------------------------------------------------------------------------- 1 | Simple usage: 2 | 3 | ```js 4 | 7 | ``` 8 | 9 | Format each line part 10 | 11 | ```js 12 | text.replace('world', 'galaxy')} 15 | /> 16 | ``` 17 | -------------------------------------------------------------------------------- /src/components/LinePart/index.jsx: -------------------------------------------------------------------------------- 1 | import { Component } from 'react'; 2 | import { func, object, shape, string } from 'prop-types'; 3 | import * as styles from './index.module.css'; 4 | 5 | const getClassName = part => { 6 | const className = []; 7 | 8 | if (part.foreground && part.bold) { 9 | className.push(styles[`${part.foreground}Bold`], styles.bold); 10 | } else if (part.foreground) { 11 | className.push(styles[part.foreground]); 12 | } else if (part.bold) { 13 | className.push(styles.bold); 14 | } 15 | 16 | if (part.background) { 17 | className.push(styles[`${part.background}Bg`]); 18 | } 19 | 20 | if (part.italic) { 21 | className.push(styles.italic); 22 | } 23 | 24 | if (part.underline) { 25 | className.push(styles.underline); 26 | } 27 | 28 | return className.join(' '); 29 | }; 30 | 31 | /** 32 | * An individual segment of text within a line. When the text content 33 | * is ANSI-parsed, each boundary is placed within its own `LinePart` 34 | * and styled separately (colors, text formatting, etc.) from the 35 | * rest of the line's content. 36 | */ 37 | export default class LinePart extends Component { 38 | static propTypes = { 39 | /** 40 | * The pieces of data to render in a line. Will typically 41 | * be multiple items in the array if ANSI parsed prior. 42 | */ 43 | part: shape({ 44 | text: string, 45 | }).isRequired, 46 | /** 47 | * Execute a function against each line part's 48 | * `text` property in `data` to process and 49 | * return a new value to render for the part. 50 | */ 51 | format: func, 52 | style: object, 53 | }; 54 | 55 | static defaultProps = { 56 | format: null, 57 | style: null, 58 | }; 59 | 60 | render() { 61 | const { format, part, style } = this.props; 62 | 63 | return ( 64 | 65 | {format ? format(part.text) : part.text} 66 | 67 | ); 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /src/components/LinePart/index.module.css: -------------------------------------------------------------------------------- 1 | .bold { font-weight: bold; } 2 | .underline { text-decoration: underline; } 3 | .italic { font-style: italic; } 4 | 5 | .black { color: #4e4e4e; } 6 | .red { color: #ff6c60; } 7 | .green { color: #00aa00; } 8 | .yellow { color: #ffffb6; } 9 | .blue { color: #96cbfe; } 10 | .magenta { color: #ff73fd; } 11 | .cyan { color: #00aaaa; } 12 | .white { color: #eeeeee; } 13 | .grey { color: #969696; } 14 | 15 | .blackBold { color: #7c7c7c; } 16 | .redBold { color: #ff9b93; } 17 | .greenBold { color: #ceffab } 18 | .yellowBold { color: #ffffcb; } 19 | .blueBold { color: #b5dcfe; } 20 | .magentaBold { color: #ff9cfe; } 21 | .cyanBold { color: #55ffff; } 22 | .whiteBold { color: #ffffff; } 23 | .greyBold { color: #969696; } 24 | 25 | .blackBg { background-color: #4e4e4e; } 26 | .redBg { background-color: #ff6c60; } 27 | .greenBg { background-color: #00aa00; } 28 | .yellowBg { background-color: #ffffb6; } 29 | .blueBg { background-color: #96cbfe; } 30 | .magentaBg { background-color: #ff73fd; } 31 | .cyanBg { background-color: #00aaaa; } 32 | .whiteBg { background-color: #eeeeee; } 33 | .greyBg { background-color: #969696; } 34 | -------------------------------------------------------------------------------- /src/components/Loading/README.md: -------------------------------------------------------------------------------- 1 | ```js 2 | 3 | ``` 4 | -------------------------------------------------------------------------------- /src/components/Loading/index.jsx: -------------------------------------------------------------------------------- 1 | import { Component } from 'react'; 2 | import { loading } from './index.module.css'; 3 | 4 | /** 5 | * Just a loading spinner. 6 | */ 7 | export default class Loading extends Component { 8 | render() { 9 | return ( 10 | 17 | 18 | 19 | 29 | 39 | 40 | 41 | 51 | 61 | 62 | 63 | 64 | ); 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/components/Loading/index.module.css: -------------------------------------------------------------------------------- 1 | .loading { 2 | position: absolute; 3 | top: 50%; 4 | left: 50%; 5 | transform: translateX(-50%) translateY(-50%); 6 | } 7 | -------------------------------------------------------------------------------- /src/components/ScrollFollow/README.md: -------------------------------------------------------------------------------- 1 | `ScrollFollow` is a higher-order component (HOC) that aims to simplify 2 | toggling a `LazyLog`'s "follow" functionality based on user scrolling. 3 | The `ScrollFollow` component accepts a render prop function which should return a 4 | component to render based on the function's arguments. 5 | 6 | ```js 7 | const url = 'https://runkit.io/eliperelman/streaming-endpoint/branches/master'; 8 | 9 |
10 | ( 13 | 14 | )} 15 | /> 16 |
17 | ``` 18 | -------------------------------------------------------------------------------- /src/components/ScrollFollow/index.jsx: -------------------------------------------------------------------------------- 1 | import { Component, Fragment } from 'react'; 2 | import { bool, func } from 'prop-types'; 3 | 4 | export default class ScrollFollow extends Component { 5 | static propTypes = { 6 | /** 7 | * Render a component based on the function's arguments 8 | * 9 | * - `follow: bool` This value is `true` or `false` 10 | * based on whether the component should be auto-following. 11 | * This value can be passed directly to the Lazy component's 12 | * `follow` prop. 13 | * 14 | * - `onScroll: func`: This function is used to listen for scrolling 15 | * events and turn off auto-following (`follow`). 16 | * This value can be passed directly to the Lazy component's 17 | * `onScroll` prop. 18 | * 19 | * - `startFollowing: func`: A helper function for manually re-starting 20 | * `follow`ing. Is not used by a Lazy component; 21 | * rather this can be invoked whenever you need to turn back on 22 | * auto-following, but cannot reliably do this from the `startFollowing` 23 | * prop. e.g `startFollowing();` 24 | * 25 | * - `stopFollowing: func`: A helper function for manually stopping 26 | * `follow`ing. Is not used by a Lazy component; 27 | * rather this can be invoked whenever you need to turn off 28 | * auto-following, but cannot reliably do this from the `startFollowing` 29 | * prop. e.g `stopFollowing();` 30 | */ 31 | render: func.isRequired, 32 | /** 33 | * The initial follow action; defaults to `false`. 34 | * The value provided here will inform the initial `follow` 35 | * property passed to the child function. 36 | */ 37 | startFollowing: bool, 38 | }; 39 | 40 | static defaultProps = { 41 | startFollowing: false, 42 | }; 43 | 44 | static getDerivedStateFromProps(nextProps) { 45 | return { 46 | follow: nextProps.startFollowing, 47 | }; 48 | } 49 | 50 | state = { 51 | follow: false, 52 | }; 53 | 54 | handleScroll = ({ scrollTop, scrollHeight, clientHeight }) => { 55 | if (this.state.follow && scrollHeight - scrollTop !== clientHeight) { 56 | this.setState({ follow: false }); 57 | } 58 | }; 59 | 60 | startFollowing = () => { 61 | this.setState({ follow: true }); 62 | }; 63 | 64 | stopFollowing = () => { 65 | this.setState({ follow: false }); 66 | }; 67 | 68 | render() { 69 | const { render } = this.props; 70 | const { follow } = this.state; 71 | 72 | return ( 73 | 74 | {render({ 75 | follow, 76 | onScroll: this.handleScroll, 77 | startFollowing: this.startFollowing, 78 | stopFollowing: this.stopFollowing, 79 | })} 80 | 81 | ); 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /src/components/SearchBar/FilterLinesIcon/README.md: -------------------------------------------------------------------------------- 1 | ```js 2 | 3 | ``` 4 | -------------------------------------------------------------------------------- /src/components/SearchBar/FilterLinesIcon/index.jsx: -------------------------------------------------------------------------------- 1 | import { PureComponent } from 'react'; 2 | import { filterLinesIcon } from './index.module.css'; 3 | 4 | export default class FilterLinesIcon extends PureComponent { 5 | render() { 6 | return ( 7 | 11 | 12 | 13 | ); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/components/SearchBar/FilterLinesIcon/index.module.css: -------------------------------------------------------------------------------- 1 | .filterLinesIcon { 2 | height: 15px; 3 | cursor: pointer; 4 | } 5 | -------------------------------------------------------------------------------- /src/components/SearchBar/README.md: -------------------------------------------------------------------------------- 1 | ```js 2 | 3 | ``` 4 | -------------------------------------------------------------------------------- /src/components/SearchBar/index.jsx: -------------------------------------------------------------------------------- 1 | import { Component } from 'react'; 2 | import { bool, func, number } from 'prop-types'; 3 | import FilterLinesIcon from './FilterLinesIcon'; 4 | import { SEARCH_MIN_KEYWORDS } from '../../utils'; 5 | import { 6 | searchBar, 7 | searchInput, 8 | button, 9 | active, 10 | inactive, 11 | } from './index.module.css'; 12 | 13 | export default class SearchBar extends Component { 14 | static propTypes = { 15 | /** 16 | * Executes a function when the user starts typing. 17 | */ 18 | onSearch: func, 19 | /** 20 | * Executes a function when the search input has been cleared. 21 | */ 22 | onClearSearch: func, 23 | /** 24 | * Executes a function when the option `Filter Lines With Matches` 25 | * is enable. 26 | */ 27 | onFilterLinesWithMatches: func, 28 | /** 29 | * Number of search results. Should come from the component 30 | * executing the search algorithm. 31 | */ 32 | resultsCount: number, 33 | /** 34 | * If true, then only lines that match the search term will be displayed. 35 | */ 36 | filterActive: bool, 37 | /** 38 | * If true, the input field and filter button will be disabled. 39 | */ 40 | disabled: bool, 41 | }; 42 | 43 | static defaultProps = { 44 | onSearch: () => {}, 45 | onClearSearch: () => {}, 46 | onFilterLinesWithMatches: () => {}, 47 | resultsCount: 0, 48 | filterActive: false, 49 | disabled: false, 50 | }; 51 | 52 | state = { 53 | keywords: '', 54 | }; 55 | 56 | handleFilterToggle = () => { 57 | this.props.onFilterLinesWithMatches(!this.props.filterActive); 58 | }; 59 | 60 | handleSearchChange = e => { 61 | const { value: keywords } = e.target; 62 | 63 | this.setState({ keywords }, () => this.search()); 64 | }; 65 | 66 | handleSearchKeyPress = e => { 67 | if (e.key === 'Enter') { 68 | this.handleFilterToggle(); 69 | } 70 | }; 71 | 72 | search = () => { 73 | const { keywords } = this.state; 74 | const { onSearch, onClearSearch } = this.props; 75 | 76 | if (keywords && keywords.length > SEARCH_MIN_KEYWORDS) { 77 | onSearch(keywords); 78 | } else { 79 | onClearSearch(); 80 | } 81 | }; 82 | 83 | render() { 84 | const { resultsCount, filterActive, disabled } = this.props; 85 | const matchesLabel = `match${resultsCount === 1 ? '' : 'es'}`; 86 | const filterIcon = filterActive ? active : inactive; 87 | 88 | return ( 89 |
90 | 101 | 109 | 113 | {resultsCount} {matchesLabel} 114 | 115 |
116 | ); 117 | } 118 | } 119 | -------------------------------------------------------------------------------- /src/components/SearchBar/index.module.css: -------------------------------------------------------------------------------- 1 | .searchBar { 2 | display: flex; 3 | align-items: center; 4 | justify-content: flex-end; 5 | font-family: "Monaco", monospace; 6 | font-size: 12px; 7 | background-color: #222222; 8 | color: #d6d6d6; 9 | padding: 10px; 10 | } 11 | 12 | .searchInput { 13 | background-color: #464646; 14 | color: #d6d6d6; 15 | height: 20px; 16 | min-width: 200px; 17 | font-size: 12px; 18 | padding: 2px 5px; 19 | border: 1px solid #4e4e4e; 20 | margin-right: 10px; 21 | } 22 | 23 | .active { 24 | color: #d6d6d6; 25 | fill: #d6d6d6; 26 | } 27 | 28 | .inactive { 29 | color: #464646; 30 | fill: #464646; 31 | } 32 | 33 | .button { 34 | background: none; 35 | border: none; 36 | margin-right: 10px; 37 | } 38 | -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | export { default as LazyLog } from './LazyLog'; 2 | export { default as ScrollFollow } from './ScrollFollow'; 3 | -------------------------------------------------------------------------------- /src/encoding.js: -------------------------------------------------------------------------------- 1 | if (!('TextDecoder' in self)) { 2 | import('text-encoding-utf-8').then(({ TextDecoder, TextEncoder }) => { 3 | self.TextDecoder = TextDecoder; 4 | self.TextEncoder = TextEncoder; 5 | }); 6 | } 7 | 8 | export const encode = value => new TextEncoder('utf-8').encode(value); 9 | export const decode = value => new TextDecoder('utf-8').decode(value); 10 | -------------------------------------------------------------------------------- /src/request.js: -------------------------------------------------------------------------------- 1 | import mitt from 'mitt'; 2 | import { convertBufferToLines } from './utils'; 3 | 4 | const fetcher = Promise.resolve().then(() => 5 | 'fetch' in self ? self.fetch : import('whatwg-fetch').then(() => self.fetch) 6 | ); 7 | 8 | export default (url, options) => { 9 | const emitter = mitt(); 10 | 11 | emitter.on('start', async () => { 12 | try { 13 | const fetch = await fetcher; 14 | const response = await fetch( 15 | url, 16 | Object.assign({ credentials: 'omit' }, options) 17 | ); 18 | 19 | if (!response.ok) { 20 | const error = new Error(response.statusText); 21 | 22 | error.status = response.status; 23 | emitter.emit('error', error); 24 | 25 | return; 26 | } 27 | 28 | const arrayBuffer = await response.arrayBuffer(); 29 | const encodedLog = new Uint8Array(arrayBuffer); 30 | const { lines, remaining } = convertBufferToLines(encodedLog); 31 | 32 | emitter.emit('update', { 33 | lines: remaining ? lines.concat(remaining) : lines, 34 | }); 35 | emitter.emit('end', encodedLog); 36 | } catch (err) { 37 | emitter.emit('error', err); 38 | } 39 | }); 40 | 41 | return emitter; 42 | }; 43 | -------------------------------------------------------------------------------- /src/search.js: -------------------------------------------------------------------------------- 1 | import { decode, encode } from './encoding'; 2 | import { getLinesLengthRanges } from './utils'; 3 | 4 | export const searchIndexes = (rawKeywords, rawLog) => { 5 | const keywords = Array.from(encode(rawKeywords)); 6 | const table = [-1, 0]; 7 | const keywordsLength = keywords.length; 8 | const fileLength = rawLog.length; 9 | const maxKeywordsIndex = keywordsLength - 1; 10 | let keywordsIndex = 0; 11 | let fileIndex = 0; 12 | let index = 0; 13 | let position = 2; 14 | 15 | // Build a table for the search algorithm. 16 | // This takes O(needleLength) steps. 17 | while (position < keywordsLength) { 18 | if (keywords[position - 1] === keywords[keywordsIndex]) { 19 | keywordsIndex += 1; 20 | table[position] = keywordsIndex; 21 | position += 1; 22 | } else if (keywordsIndex > 0) { 23 | keywordsIndex = table[keywordsIndex]; 24 | } else { 25 | table[position] = 0; 26 | position += 1; 27 | } 28 | } 29 | 30 | const results = []; 31 | 32 | // Scan the haystack. 33 | // This takes O(haystackLength) steps. 34 | while (fileIndex + index < fileLength) { 35 | if (keywords[index] === rawLog[fileIndex + index]) { 36 | if (index === maxKeywordsIndex) { 37 | results.push(fileIndex); 38 | } 39 | 40 | index += 1; 41 | } else if (table[index] > -1) { 42 | fileIndex = fileIndex + index - table[index]; 43 | index = table[index]; 44 | } else { 45 | index = 0; 46 | fileIndex += 1; 47 | } 48 | } 49 | 50 | return results; 51 | }; 52 | 53 | export const searchLines = (rawKeywords, rawLog, isCaseInsensitive) => { 54 | let keywords = rawKeywords; 55 | let log = rawLog; 56 | 57 | if (isCaseInsensitive) { 58 | keywords = keywords.toLowerCase(); 59 | log = encode(decode(log).toLowerCase()); 60 | } 61 | 62 | const results = searchIndexes(keywords, log); 63 | const linesRanges = getLinesLengthRanges(log); 64 | const maxLineRangeIndex = linesRanges.length; 65 | const maxResultIndex = results.length; 66 | const resultLines = []; 67 | let lineRangeIndex = 0; 68 | let resultIndex = 0; 69 | let lineRange; 70 | let result; 71 | 72 | while (lineRangeIndex < maxLineRangeIndex) { 73 | lineRange = linesRanges[lineRangeIndex]; 74 | 75 | while (resultIndex < maxResultIndex) { 76 | result = results[resultIndex]; 77 | 78 | if (result <= lineRange) { 79 | resultLines.push(lineRangeIndex + 1); 80 | resultIndex += 1; 81 | } else { 82 | break; 83 | } 84 | } 85 | 86 | lineRangeIndex += 1; 87 | } 88 | 89 | return resultLines; 90 | }; 91 | -------------------------------------------------------------------------------- /src/stream.js: -------------------------------------------------------------------------------- 1 | import { List } from 'immutable'; 2 | import mitt from 'mitt'; 3 | import { convertBufferToLines, bufferConcat } from './utils'; 4 | 5 | const fetcher = Promise.resolve().then(() => 6 | 'ReadableStream' in self && 'body' in self.Response.prototype 7 | ? self.fetch 8 | : import('@mattiasbuelens/web-streams-polyfill/ponyfill').then( 9 | ({ ReadableStream }) => { 10 | self.ReadableStream = ReadableStream; 11 | 12 | return import('fetch-readablestream'); 13 | } 14 | ) 15 | ); 16 | 17 | export const recurseReaderAsEvent = async (reader, emitter) => { 18 | const result = await reader.read(); 19 | 20 | if (result.value) { 21 | emitter.emit('data', result.value); 22 | } 23 | 24 | if (!result.done) { 25 | return recurseReaderAsEvent(reader, emitter); 26 | } 27 | 28 | emitter.emit('done'); 29 | }; 30 | 31 | export default (url, options) => { 32 | const emitter = mitt(); 33 | let overage = null; 34 | let encodedLog = new Uint8Array(); 35 | 36 | emitter.on('data', data => { 37 | encodedLog = bufferConcat(encodedLog, new Uint8Array(data)); 38 | 39 | const { lines, remaining } = convertBufferToLines(data, overage); 40 | 41 | overage = remaining; 42 | emitter.emit('update', { lines, encodedLog }); 43 | }); 44 | 45 | emitter.on('done', () => { 46 | if (overage) { 47 | emitter.emit('update', { lines: List.of(overage), encodedLog }); 48 | } 49 | 50 | emitter.emit('end', encodedLog); 51 | }); 52 | 53 | emitter.on('start', async () => { 54 | try { 55 | const fetch = await fetcher; 56 | const response = await fetch( 57 | url, 58 | Object.assign({ credentials: 'omit' }, options) 59 | ); 60 | 61 | if (!response.ok) { 62 | const error = new Error(response.statusText); 63 | 64 | error.status = response.status; 65 | emitter.emit('error', error); 66 | 67 | return; 68 | } 69 | 70 | const reader = response.body.getReader(); 71 | 72 | emitter.on('abort', () => reader.cancel('ABORTED')); 73 | 74 | return recurseReaderAsEvent(reader, emitter); 75 | } catch (err) { 76 | emitter.emit('error', err); 77 | } 78 | }); 79 | 80 | return emitter; 81 | }; 82 | -------------------------------------------------------------------------------- /src/utils.js: -------------------------------------------------------------------------------- 1 | import { List, Range } from 'immutable'; 2 | import reactStringReplace from 'react-string-replace'; 3 | 4 | export const ENCODED_NEWLINE = 10; // \n 5 | export const ENCODED_CARRIAGE_RETURN = 13; // \r 6 | export const SEARCH_BAR_HEIGHT = 45; 7 | export const SEARCH_MIN_KEYWORDS = 2; 8 | 9 | export const isNewline = current => 10 | current === ENCODED_NEWLINE || current === ENCODED_CARRIAGE_RETURN; 11 | 12 | export const getScrollIndex = ({ 13 | follow = false, 14 | scrollToLine = 0, 15 | previousCount = 0, 16 | count = 0, 17 | offset = 0, 18 | }) => { 19 | if (follow) { 20 | return count - 1 - offset; 21 | } else if (scrollToLine && previousCount > scrollToLine) { 22 | return -1; 23 | } else if (scrollToLine) { 24 | return scrollToLine - 1 - offset; 25 | } 26 | 27 | return -1; 28 | }; 29 | 30 | export const getHighlightRange = highlight => { 31 | if (!highlight) { 32 | return Range(0, 0); 33 | } 34 | 35 | if (!Array.isArray(highlight)) { 36 | return Range(highlight, highlight + 1); 37 | } 38 | 39 | if (highlight.length === 1) { 40 | return Range(highlight[0], highlight[0] + 1); 41 | } 42 | 43 | return Range(highlight[0], highlight[1] + 1); 44 | }; 45 | 46 | export const bufferConcat = (a, b) => { 47 | const buffer = new Uint8Array(a.length + b.length); 48 | 49 | buffer.set(a, 0); 50 | buffer.set(b, a.length); 51 | 52 | return buffer; 53 | }; 54 | 55 | export const convertBufferToLines = (current, previous) => { 56 | const buffer = previous ? bufferConcat(previous, current) : current; 57 | const { length } = buffer; 58 | let lastNewlineIndex = 0; 59 | let index = 0; 60 | const lines = List().withMutations(lines => { 61 | while (index < length) { 62 | const current = buffer[index]; 63 | const next = buffer[index + 1]; 64 | 65 | if (isNewline(current, next)) { 66 | lines.push(buffer.subarray(lastNewlineIndex, index)); 67 | lastNewlineIndex = 68 | current === ENCODED_CARRIAGE_RETURN && next === ENCODED_NEWLINE 69 | ? index + 2 70 | : index + 1; 71 | 72 | index = lastNewlineIndex; 73 | } else { 74 | index += 1; 75 | } 76 | } 77 | }); 78 | 79 | return { 80 | lines, 81 | remaining: 82 | index !== lastNewlineIndex ? buffer.slice(lastNewlineIndex) : null, 83 | }; 84 | }; 85 | 86 | export const getLinesLengthRanges = rawLog => { 87 | const { length } = rawLog; 88 | const linesRanges = []; 89 | let lastNewlineIndex = 0; 90 | let index = 0; 91 | 92 | while (index < length) { 93 | const current = rawLog[index]; 94 | const next = rawLog[index + 1]; 95 | 96 | if (isNewline(current, next)) { 97 | linesRanges.push(index); 98 | lastNewlineIndex = 99 | current === ENCODED_CARRIAGE_RETURN && next === ENCODED_NEWLINE 100 | ? index + 2 101 | : index + 1; 102 | 103 | index = lastNewlineIndex; 104 | } else { 105 | index += 1; 106 | } 107 | } 108 | 109 | return linesRanges; 110 | }; 111 | 112 | export const searchFormatPart = ({ 113 | searchKeywords, 114 | nextFormatPart, 115 | caseInsensitive, 116 | replaceJsx, 117 | }) => part => { 118 | let formattedPart = part; 119 | 120 | if (nextFormatPart) { 121 | formattedPart = nextFormatPart(part); 122 | } 123 | 124 | if (caseInsensitive) { 125 | if (part.toLowerCase().includes(searchKeywords.toLowerCase())) { 126 | return reactStringReplace(formattedPart, searchKeywords, replaceJsx); 127 | } 128 | } else if (part.includes(searchKeywords)) { 129 | return reactStringReplace(formattedPart, searchKeywords, replaceJsx); 130 | } 131 | 132 | return formattedPart; 133 | }; 134 | -------------------------------------------------------------------------------- /src/websocket.js: -------------------------------------------------------------------------------- 1 | import mitt from 'mitt'; 2 | import { List } from 'immutable'; 3 | import { encode } from './encoding'; 4 | import { bufferConcat, convertBufferToLines } from './utils'; 5 | 6 | export default (url, options) => { 7 | const { onOpen, onClose, onError, formatMessage } = options; 8 | const emitter = mitt(); 9 | let encodedLog = new Uint8Array(); 10 | let overage = null; 11 | 12 | emitter.on('data', data => { 13 | encodedLog = bufferConcat(encodedLog, encode(data)); 14 | 15 | const { lines, remaining } = convertBufferToLines(encode(data), overage); 16 | 17 | overage = remaining; 18 | 19 | emitter.emit('update', { lines, encodedLog }); 20 | }); 21 | 22 | emitter.on('done', () => { 23 | if (overage) { 24 | emitter.emit('update', { lines: List.of(overage), encodedLog }); 25 | } 26 | 27 | emitter.emit('end', encodedLog); 28 | }); 29 | 30 | emitter.on('start', () => { 31 | try { 32 | // try to connect to websocket 33 | const socket = new WebSocket(url); 34 | 35 | socket.addEventListener('open', e => { 36 | // relay on open events if a handler is registered 37 | onOpen && onOpen(e, socket); 38 | }); 39 | socket.addEventListener('close', e => { 40 | onClose && onClose(e); 41 | }); 42 | 43 | socket.addEventListener('error', err => { 44 | onError && onError(err); 45 | }); 46 | 47 | socket.addEventListener('message', e => { 48 | let msg = formatMessage ? formatMessage(e.data) : e.data; 49 | 50 | if (typeof msg !== 'string') return; 51 | // add a new line character between each message if one doesn't exist. 52 | // this allows our search index to properly distinguish new lines. 53 | msg = msg.endsWith('\n') ? msg : `${msg}\n`; 54 | 55 | emitter.emit('data', msg); 56 | }); 57 | 58 | emitter.on('abort', () => socket.close()); 59 | } catch (err) { 60 | emitter.emit('error', err); 61 | } 62 | }); 63 | 64 | return emitter; 65 | }; 66 | --------------------------------------------------------------------------------