npm - web-log-viewer - Versions diffs - 0.0.3 → 0.1.0 - Mend

web-log-viewer 0.0.3 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/README.md +16 -14
package/build/public/build/bundle.css +1 -1
package/build/public/build/bundle.js +1 -1
package/build/public/build/bundle.js.map +1 -1
package/build/public/index.html +1 -0
package/build/server.js +68 -29
package/package.json +15 -3
package/.prettierrc +0 -9
package/app-console.js +0 -28
package/nginx.log +0 -51462
package/produce-log.sh +0 -3
package/src/config.ts +0 -28
package/src/defaultMessageParser.ts +0 -16
package/src/log-index.ts +0 -44
package/src/server.ts +0 -135
package/src/stream-utils.ts +0 -28
package/src/types.ts +0 -51
package/svelte/.vscode/extensions.json +0 -3
package/svelte/package-lock.json +0 -998
package/svelte/package.json +0 -33
package/svelte/public/favicon.png +0 -0
package/svelte/public/global.css +0 -104
package/svelte/public/index.html +0 -18
package/svelte/rollup.config.js +0 -88
package/svelte/src/App.svelte +0 -285
package/svelte/src/LogMessageDetails.svelte +0 -166
package/svelte/src/log-formatter.ts +0 -21
package/svelte/src/log-store.ts +0 -209
package/svelte/src/main.ts +0 -8
package/svelte/src/types.ts +0 -51
package/svelte/tsconfig.json +0 -6
package/tsconfig.json +0 -71

package/svelte/package.json DELETED Viewed

@@ -1,33 +0,0 @@
-{
-  "name": "svelte-app",
-  "version": "1.0.0",
-  "scripts": {
-    "build": "rollup -c",
-    "dev": "rollup -c -w",
-    "start": "sirv public",
-    "validate": "svelte-check"
-  },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^17.0.0",
-    "@rollup/plugin-node-resolve": "^11.0.0",
-    "@rollup/plugin-replace": "^2.4.2",
-    "@rollup/plugin-typescript": "^6.0.0",
-    "@tsconfig/svelte": "^1.0.0",
-    "@types/lodash": "^4.14.168",
-    "rollup": "^2.3.4",
-    "rollup-plugin-css-only": "^3.1.0",
-    "rollup-plugin-livereload": "^2.0.0",
-    "rollup-plugin-svelte": "^7.0.0",
-    "rollup-plugin-terser": "^7.0.0",
-    "svelte": "^3.0.0",
-    "svelte-check": "^1.0.0",
-    "svelte-preprocess": "^4.0.0",
-    "tslib": "^2.0.0",
-    "typescript": "^3.9.3"
-  },
-  "dependencies": {
-    "json5": "^2.2.0",
-    "lodash": "^4.17.21",
-    "sirv-cli": "^1.0.0"
-  }
-}

package/svelte/public/favicon.png DELETED Viewed

Binary file

package/svelte/public/global.css DELETED Viewed

@@ -1,104 +0,0 @@
-html, body {
-	position: relative;
-	width: 100%;
-	height: 100%;
-}
-body {
-	color: #333;
-	margin: 0;
-	padding: 8px;
-	box-sizing: border-box;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-}
-*, *:before, *:after {
-  box-sizing: inherit;
-}
-a {
-	color: rgb(0,100,200);
-	text-decoration: none;
-}
-a:hover {
-	text-decoration: underline;
-}
-a:visited {
-	color: rgb(0,80,160);
-}
-label {
-	display: block;
-}
-input, button, select, textarea {
-	font-family: inherit;
-	font-size: inherit;
-	-webkit-padding: 0.4em 0;
-	padding: 0.4em;
-	margin: 0 0 0.5em 0;
-	box-sizing: border-box;
-	border: 1px solid #ccc;
-	border-radius: 2px;
-}
-input:disabled {
-	color: #ccc;
-}
-button {
-	color: #333;
-	background-color: #f4f4f4;
-	outline: none;
-}
-button:disabled {
-	color: #999;
-}
-button:not(:disabled):active {
-	background-color: #ddd;
-}
-button:focus {
-	border-color: #666;
-}
-:root {
-	/* --primary-color: #de3b3c; */
-	--primary-color: #6FA157;
-	--gray-800: #3A435A;
-	--gray-600: #61697B;
-	--gray-400: #9CA1AC;
-	--gray-200: #E1E3E6;
-	--gray-100: #F5F6F7;
-}
-.button {
-	border-color: var(--primary-color);
-	color: var(--primary-color);
-	background-color: white;
-	border-radius: 3px;
-	text-transform: uppercase;
-	letter-spacing: 1px;
-	font-size: 14px;
-	font-weight: bold;
-	padding: 5px 13px;
-	margin: 0px;
-	cursor: pointer;
-}
-.button--primary {
-	color: white;
-	background-color: var(--primary-color);
-}
-.button--small {
-	font-size: 10px;
-	padding: 3px 8px;
-}
-h1, h2, h3, h4 {
-	color: var(--primary-color);
-}

package/svelte/public/index.html DELETED Viewed

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset='utf-8'>
-	<meta name='viewport' content='width=device-width,initial-scale=1'>
-	<title>JSON log viewer app</title>
-	<link rel='icon' type='image/png' href='/favicon.png'>
-	<link rel='stylesheet' href='/global.css'>
-	<link rel='stylesheet' href='/build/bundle.css'>
-	<script defer src='/build/bundle.js'></script>
-</head>
-<body>
-</body>
-</html>

package/svelte/rollup.config.js DELETED Viewed

@@ -1,88 +0,0 @@
-import svelte from 'rollup-plugin-svelte';
-import commonjs from '@rollup/plugin-commonjs';
-import resolve from '@rollup/plugin-node-resolve';
-import livereload from 'rollup-plugin-livereload';
-import { terser } from 'rollup-plugin-terser';
-import sveltePreprocess from 'svelte-preprocess';
-import typescript from '@rollup/plugin-typescript';
-import replace from '@rollup/plugin-replace';
-import css from 'rollup-plugin-css-only';
-const production = !process.env.ROLLUP_WATCH;
-function serve() {
-	let server;
-	function toExit() {
-		if (server) server.kill(0);
-	}
-	return {
-		writeBundle() {
-			if (server) return;
-			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
-				stdio: ['ignore', 'inherit', 'inherit'],
-				shell: true
-			});
-			process.on('SIGTERM', toExit);
-			process.on('exit', toExit);
-		}
-	};
-}
-export default {
-	input: 'src/main.ts',
-	output: {
-		sourcemap: true,
-		format: 'iife',
-		name: 'app',
-		file: 'public/build/bundle.js'
-	},
-	plugins: [
-		replace({
-			preventAssignment: true,
-			'JSL_ENVIRONMENT': JSON.stringify(process.env.NODE_ENV),
-		}),
-		svelte({
-			preprocess: sveltePreprocess({ sourceMap: !production }),
-			compilerOptions: {
-				// enable run-time checks when not in production
-				dev: !production
-			}
-		}),
-		// we'll extract any component CSS out into
-		// a separate file - better for performance
-		css({ output: 'bundle.css' }),
-		// If you have external dependencies installed from
-		// npm, you'll most likely need these plugins. In
-		// some cases you'll need additional configuration -
-		// consult the documentation for details:
-		// https://github.com/rollup/plugins/tree/master/packages/commonjs
-		resolve({
-			browser: true,
-			dedupe: ['svelte']
-		}),
-		commonjs(),
-		typescript({
-			sourceMap: !production,
-			inlineSources: !production
-		}),
-		// In dev mode, call `npm run start` once
-		// the bundle has been generated
-		!production && serve(),
-		// Watch the `public` directory and refresh the
-		// browser on changes when not in production
-		!production && livereload('public'),
-		// If we're building for production (npm run build
-		// instead of npm run dev), minify
-		production && terser()
-	],
-	watch: {
-		clearScreen: false
-	}
-};

package/svelte/src/App.svelte DELETED Viewed

@@ -1,285 +0,0 @@
-<script lang="ts">
-  import { logStore } from './log-store'
-  import LogMessageDetails from './LogMessageDetails.svelte'
-  import type { FormattedMessage, LogMessage } from './types'
-  import debounce from 'lodash/debounce'
-  // height of each row, in pixels
-  const ROW_HEIGHT = 30
-  let logMessageBeingViewed: FormattedMessage
-  // scroll to bottom when new logs come in while on tail mode
-  logStore.subscribe(logs => {
-    if (logs.mode == 'tail') {
-      setTimeout(() => scrollToBottom(), 0)
-    }
-  })
-  function scrollToBottom() {
-    const element = document.getElementById('windowLogs')
-    if (element) {
-      element.scrollTop = element.scrollHeight
-    }
-  }
-  // TODO can be memoized
-  function calcBeforeWindowRowHeigh(logWindow: FormattedMessage[]) {
-    if (!logWindow || !logWindow.length) {
-      return 0
-    } else {
-      return (logWindow[0].seq - 1) * ROW_HEIGHT
-    }
-  }
-  // TODO can be memoized
-  function calcAfterWindowRowHeight(logWindow: FormattedMessage[], logCount: number) {
-    if (!logWindow || !logWindow.length) {
-      return 0
-    } else {
-      const lastSeqInWindow = logWindow[logWindow.length - 1].seq
-      return (logCount - lastSeqInWindow) * ROW_HEIGHT
-    }
-  }
-  const isScrolledToBottom = (el: Element) => el.scrollHeight - el.scrollTop - el.clientHeight < 1
-  const calcSeqByOffset = (offset: number, logCount: number) => Math.floor(offset / ROW_HEIGHT)
-  /**
-   * Calculate the seq the user has offset to, and requet data from the server around that offset.
-   */
-  const onScroll = debounce(
-    (ev: Event) => {
-      const el = ev.target as Element
-      if (isScrolledToBottom(el)) {
-        if ($logStore.mode == 'static') {
-          logStore.changeToTail()
-        }
-      } else {
-        const seq = calcSeqByOffset(el.scrollTop, $logStore.count) + 1
-        logStore.changeToStatic(seq)
-      }
-    },
-    100,
-    { leading: false, trailing: true },
-  )
-  /**
-   * Called when the user enters a new filter query. This will eventually
-   * fetch filtered data from the server
-   */
-  const onChangeFilter = debounce(
-    (ev: Event) => {
-      const input = ev.target as HTMLInputElement
-      logStore.changeFilter(input.value)
-    },
-    100,
-    { leading: false, trailing: true },
-  )
-  function viewRelativeLog(delta: 1 | -1) {
-    const currentIndex = $logStore.window.findIndex(l => l === logMessageBeingViewed)
-    if (currentIndex == -1) {
-      logMessageBeingViewed = undefined
-    } else {
-      logMessageBeingViewed = $logStore.window[currentIndex + delta]
-    }
-  }
-</script>
-<main>
-  <!-- show a modal with details on the currently selected message -->
-  {#if logMessageBeingViewed}
-    <LogMessageDetails
-      logMessage={logMessageBeingViewed}
-      logSize={$logStore.count}
-      formatter={$logStore.formatter}
-      on:viewPrevious={() => viewRelativeLog(-1)}
-      on:viewNext={() => viewRelativeLog(1)}
-      on:closeAndUpdateFormatter={e => {
-        if (e.detail?.newFormatter) {
-          // check if formatter has actually changed
-          if ($logStore.formatter != e.detail.newFormatter) {
-            logStore.changeFormatter(e.detail.newFormatter)
-          }
-        }
-        logMessageBeingViewed = undefined
-      }}
-    />
-  {/if}
-  <h1>
-    Web log viewer
-    <small><strong>{$logStore.count}</strong> messages</small>
-    {#if $logStore.mode == 'tail'}
-      <small>in <strong>follow</strong> mode</small>
-    {/if}
-    {#if $logStore.mode == 'static'}
-      <small>frozen at offset <strong>{$logStore.offsetSeq}</strong></small>
-    {/if}
-  </h1>
-  <section class="logFilters">
-    <input
-      class="windowLogs-filterInput"
-      type="text"
-      placeholder="enter text to filter messages"
-      on:keyup={onChangeFilter}
-    />
-  </section>
-  <section id="windowLogs" class="windowLogs" on:scroll={onScroll}>
-    {#if $logStore.window.length == 0}
-      <div class="message message--info">No messages found</div>
-    {:else}
-      <table class="windowLogs-table">
-        <thead>
-          <tr style="height: {ROW_HEIGHT}px">
-            <th />
-            {#each $logStore.columns as col}
-              <th>{col}</th>
-            {/each}
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            class="windowLogs-beforeWindowRow"
-            style="height: {calcBeforeWindowRowHeigh($logStore.window)}px"
-          />
-          {#each $logStore.window as msg (msg.seq)}
-            <tr style="height: {ROW_HEIGHT}px">
-              <td class="windowLogs-viewLogMessageButton"
-                ><button
-                  class="button button--small"
-                  type="button"
-                  on:click={() => (logMessageBeingViewed = msg)}>View</button
-                ></td
-              >
-              {#each $logStore.columns as col (col)}
-                <td>{msg.formattedMessage[col] || ''}</td>
-              {/each}
-            </tr>
-          {/each}
-          <tr
-            class="windowLogs-afterWindowRow"
-            style="height: {calcAfterWindowRowHeight($logStore.window, $logStore.count)}px"
-          />
-        </tbody>
-      </table>
-    {/if}
-  </section>
-</main>
-<style>
-  main {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-  .windowLogs {
-    height: 100%;
-    overflow: auto;
-  }
-  .windowLogs-filterInput {
-    border-radius: 5px;
-    font-size: 20px;
-    padding: 20px;
-    width: 100%;
-    max-width: 900px;
-    margin: 0px 0px 25px 0px;
-  }
-  .windowLogs-table {
-    table-layout: auto;
-    white-space: nowrap;
-    text-align: left;
-    border-collapse: separate;
-    border-spacing: 0;
-    position: relative;
-    width: 100%;
-    font-size: 14px;
-  }
-  .windowLogs-table td,
-  .windowLogs-table th {
-    padding: 2px 7px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .windowLogs-table th {
-    position: sticky;
-    top: 0px;
-    background-color: var(--gray-100);
-    padding: 10px 7px;
-    border-top: 1px solid var(--gray-200);
-    border-bottom: 1px solid var(--gray-200);
-    color: var(--primary-color);
-    font-weight: 500;
-    letter-spacing: 0.9px;
-    font-size: 16px;
-  }
-  .windowLogs-table th:first-child {
-    border-top-left-radius: 5px;
-    border-left: 1px solid var(--gray-200);
-  }
-  .windowLogs-table th:last-child {
-    border-top-right-radius: 5px;
-    border-right: 1px solid var(--gray-200);
-  }
-  .windowLogs-table tr:hover td {
-    background-color: var(--gray-100);
-  }
-  .windowLogs-table td {
-    border-top: 1px solid var(--gray-200);
-  }
-  .windowLogs-table td:first-child {
-    border-left: 1px solid var(--gray-200);
-  }
-  .windowLogs-table td:last-child {
-    border-right: 1px solid var(--gray-200);
-  }
-  main {
-    padding: 1em 1em;
-    margin: 0 auto;
-  }
-  h1 {
-    text-align: left;
-    color: var(--primary-color);
-    text-transform: uppercase;
-    font-size: 30px;
-    font-weight: 800;
-    letter-spacing: 5px;
-    margin-top: 0px;
-  }
-  h1 small {
-    text-transform: lowercase;
-    font-size: 20px;
-    letter-spacing: normal;
-    font-weight: normal;
-    color: var(--gray-600);
-  }
-  h1 small:not(:last-child)::after {
-    content: '·';
-    margin-left: 10px;
-    margin-right: -5px;
-  }
-  .message {
-    border: 1px solid;
-    border-radius: 5px;
-    padding: 20px;
-    margin: 20px 0px;
-    border-color: var(--gray-600);
-    color: var(--gray-600);
-    background-color: var(--gray-100);
-  }
-  .message--info {
-    text-align: center;
-    border-color: #0c5460;
-    color: #0c5460;
-    background-color: #0c546022;
-  }
-</style>

package/svelte/src/LogMessageDetails.svelte DELETED Viewed

@@ -1,166 +0,0 @@
-<script lang="ts">
-  import { createEventDispatcher } from 'svelte'
-  import { formatLogMessage, parseFormatter } from './log-store'
-  import json5 from 'json5'
-  import type { FormattedMessage } from './types'
-  export let logMessage: FormattedMessage
-  export let logSize: number
-  export let formatter: string
-  const dispatch = createEventDispatcher()
-  const closeDialog = () => dispatch('closeAndUpdateFormatter', { newFormatter: formatter })
-  const formatObject = (obj: any) => {
-    if (typeof obj == 'string') {
-      return obj
-    } else {
-      return json5.stringify(obj, null, 2)
-    }
-  }
-  $: isFirst = logMessage.seq == 1
-  $: isLast = logMessage.seq == logSize
-  $: formattedExample = (() => {
-    try {
-      const msg = {
-        seq: logMessage.seq,
-        data: logMessage.rawMessage,
-        index: [],
-      }
-      return formatLogMessage(formatter)(msg)
-    } catch (err) {
-      return { formattedMessage: err.message }
-    }
-  })()
-</script>
-<main class="logMessageDetails">
-  <div class="logMessageDetails-backdrop" on:click={closeDialog} />
-  <div class="logMessageDetails-container">
-    <!-- show the log message details, allow navigating to adjacent logs -->
-    <div class="logMessageDetails-actions">
-      <button class="button button--primary logMessageDetails-closeButton" on:click={closeDialog}
-        >Close</button
-      >
-      <button
-        class="button logMessageDetails-prevButton"
-        disabled={isFirst}
-        on:click={() => dispatch('viewPrevious')}>Prev</button
-      >
-      <button
-        class="button logMessageDetails-nextButton"
-        disabled={isLast}
-        on:click={() => dispatch('viewNext')}>Next</button
-      >
-    </div>
-    <h3 class="subtitle">Details of log message #{logMessage.seq}</h3>
-    <div class="logMessageDetails-value code">
-      {formatObject(logMessage.rawMessage)}
-    </div>
-    <!-- allow the user to configure the formatter, taking the current log as example -->
-    <h3 class="subtitle">Configure the log format</h3>
-    <div class="formatterConfig">
-      <div class="formatterConfig-value">
-        <h4>Formatter</h4>
-        <textarea class="code" bind:value={formatter} />
-      </div>
-      <div class="formatterConfig-preview">
-        <h4>Example</h4>
-        <div class="code">{formatObject(formattedExample.formattedMessage)}</div>
-      </div>
-    </div>
-  </div>
-</main>
-<style>
-  .logMessageDetails {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 10;
-  }
-  .logMessageDetails-backdrop {
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    background-color: #00000066;
-  }
-  .logMessageDetails-actions {
-    position: relative;
-    margin-top: 10px;
-    display: flex;
-    justify-content: flex-end;
-  }
-  .logMessageDetails-actions > *:not(:last-child) {
-    margin-right: 10px;
-  }
-  .logMessageDetails-actions .logMessageDetails-closeButton {
-    margin-right: auto;
-  }
-  .logMessageDetails-container {
-    background-color: #f5f5f5;
-    position: relative;
-    max-width: 1200px;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 20px;
-    margin-bottom: 20px;
-    padding: 20px 30px;
-    border-radius: 10px;
-    box-shadow: 0px 2px 5px 0px #444;
-    max-height: calc(100% - 40px);
-    overflow: auto;
-  }
-  .code {
-    white-space: pre;
-    font-family: monospace;
-    color: #555;
-    background-color: white;
-    line-height: 1.2rem;
-    text-align: left;
-    overflow: auto;
-    border: 1px solid #dedede;
-    border-radius: 3px;
-    padding: 10px;
-    width: 100%;
-  }
-  .formatterConfig {
-    display: flex;
-    justify-content: space-between;
-    align-items: stretch;
-  }
-  .formatterConfig > * {
-    width: 50%;
-  }
-  .formatterConfig > *:not(:last-child) {
-    margin-right: 20px;
-  }
-  .formatterConfig-value textarea {
-    height: 300px;
-    margin: 0px;
-  }
-  .formatterConfig-preview .code {
-    height: 300px;
-  }
-  h3 {
-    text-align: left;
-    margin-top: 30px;
-    margin-bottom: 14px;
-    text-transform: uppercase;
-    font-size: 17px;
-    letter-spacing: 1.3px;
-  }
-  h4 {
-    text-align: left;
-    margin-bottom: 10px;
-    text-transform: uppercase;
-    letter-spacing: 01px;
-    color: #666;
-    font-size: 12px;
-    margin-top: 0px;
-  }
-</style>