Git Product home page Git Product logo

eventstore.ui's Introduction

EventStore.UI

The user interface for Event Store. This is included as a submodule in the main Event Store repository.

Running the UI

Currently there are two ways to run the UI:

  1. Open index.html located in the src folder in your browser.
  2. Execute gulp connect. The command gulp-connect runs a webserver with LiveReload (see dev section for info how to set up gulp if you are new to it). gulp connect needs gulp-cli to run, please see Dev information on how to install it properly.

Dev

To start developing, make sure you have the following requirements:

1. Install Node.js v18.12.1

If you already have another version of Node.js installed, nvm can be used to both install and set Node.js v18.12.1 as the active one:

nvm install 18.12.1
nvm use 18.12.1

nvm for Windows can be downloaded here.

nvm for Linux can be installed using the following instructions.

2. Ensure the minimum version of npm is v9.2.0

First, check your version of npm using npm --version. Install npm v9.2.0 only if your current version is below 9.2.0:

npm install -g [email protected]

3. Install gulp-cli globally

Any global installation of gulp should be removed before installing gulp-cli to avoid conflicts. The latter will run the local installation of gulp v4.0.0 which is already a devDependency in the project.

npm rm -g gulp
npm install -g gulp-cli

4. Install bower v1.8.14 globally

npm install -g [email protected]

5. Install all node packages in the project

cd EventStore.UI
npm install

If npm install succeeds, go to Step 6.

If you get errors related to MSBUILD, VS2017, or VC++ on Windows, follow the steps below to install the missing dependencies:

  1. Download Visual Studio Professional 2017 (version 15.9) (Trial) setup from here.
  2. When you run the setup, go to the Individual components tab, then use the search box at the top to select these components:
  • Visual Studio C++ core features
  • VC++ 2017 version 15.4 v14.11 toolset
  • Windows 8.1 SDK
  • MSBUILD Note that other components might get added automatically; do not remove them.
  1. Click "Install", and then click on "Continue".
  2. Wait for setup to finish installing all the components and dependencies.
  3. Now run these commands in the EventStore.UI directory:
npm clean-install
npm install

6. Install all bower packages in the project

bower install

If you get the error message "bower.ps1 cannot be loaded because running scripts is disabled on this system" on Windows, run the command below in PowerShell:

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

Then, run bower install again.

7. Available gulp commands

// Starts webserver with live reload
gulp connect 

// Executes jshint
gulp lint

// Transforms HTML file templates into Angular.js module
gulp html

// Builds the project: Creates minified version of CSS, JS, etc.
gulp dist

eventstore.ui's People

Contributors

321zer0 avatar avish0694 avatar cemremengu avatar dependabot[bot] avatar dhingrak avatar george-payne avatar gregoryyoung avatar gutek avatar hayley-jean avatar hunter1703 avatar ianbattersby avatar jageall avatar jen20 avatar lougarou avatar lscpike avatar mat-mcloughlin avatar mjgpy3 avatar nissbran avatar pgermishuys avatar prolic avatar pvanbuijtene avatar rcknight avatar riccardone avatar shaan1337 avatar stuartfergusonvme avatar t3hnar avatar tambeau avatar thefringeninja avatar timothycoleman avatar yoeight avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

eventstore.ui's Issues

Debugging

When I try to debug a query

fromAll().
when({
$init : function(s,e) {return {count : 0}},
$any : function(s,e) {throw "foo"; s.count+=1}
})

I get dropped in the same place as in old ui but when I try to step in on the handler() I end up in the following code instead of the query code

    function defaultEventHandler(state, eventEnvelope) {
        return eventEnvelope.isJson ? eventEnvelope.body : { $e: eventEnvelope.bodyRaw };
    }

Missing projection stalls UI

If you return to a stale client session, where ES has restarted, and thus the temporary projection(s) no longer exist the page just sticks at "Loading definitions..", and the console shows the below. Perhaps it would be better to display a message or reset the page?

image

Event Stream page takes you to incorrect event projetion results stream.

I created a projection that would link all events of certain types into one stream (similar to below).

fromAll()
.when({
"TYPE2": function(s, e) {
linkTo("proj-events",e)
},
"TYPE1": function(s, e) {
linkTo("proj-events",e)
},
})

When I go to the stream page for this:
http://es/web/index.html#/streams/proj-events
and click on one of the events it takes me to the stream of the original event, but at the position of the event in the proj-events stream.

1 6@stream-1 -> Links to http://es/web/index.html#/streams/stream-1/1, should be http://es/web/index.html#/streams/stream-1/6
0 0@stream-0 -> Links to http://es/web/index.html#/streams/stream-0/0

Read Request Failed on replacing query scenario

  • Run Query
  • Open developer tools
  • Enter a valid query
fromCategory("Something").when({
    $init : function(s,e) { return { Count : 0 } },
    $any : function(s,e) { s.Count++; return s; }});
  • Hit DEBUG
  • Delete the query
  • Hit UPDATE
  • Paste the query back in
fromCategory("Something").when({
    $init : function(s,e) { return { Count : 0 } },
    $any : function(s,e) { s.Count++; return s; }});
  • Hit UPDATE
  • Wait until refreshes with the query in the window
  • Hit RUN STEP

Console shows...

[11524,27,16:48:10.658] Read Request Body Failed.
Value cannot be null.
Parameter name: token

Browser shows...
image

Weird text selection behavior

It is very hard to select text from inside the EventStore UI, because after 1-2 seconds either the selection vanishes or selects nearly everything. It seems like the UI auto-refreshes every second or so including replacing high amounts of DOM elements and thus invalidates selections during this time, thus only allowing a time window of 1 second to select something.

Tested in Chrome and Internet Explorer.

When debugging disable RUN STEP if query edited and not UPDATEd

It's so easy to forget to hit UPDATE after editing your query and then hitting RUN STEP, I wonder if disabling the RUN STEP button if the query has been edited is an idea to consider? Or displaying a message asking if to continue with RUN STEP if the query has been edited?

Double runs of queries

Sometimes I get double queries run see below:

Name Status Mode Done Read / Write in Progress Write Queues Partitions Cached Rate (events/s) Events
Processed Buffered
$by_category Running Continuous 100.0% 0 / 0 0 / 0 1 0.0 234035 0
$by_event_type Running Continuous 100.0% 0 / 0 0 / 0 1 0.0 390035 0
$stream_by_category Running Continuous 100.0% 0 / 0 0 / 0 1 0.0 2035 0
$streams Running Continuous 100.0% 0 / 0 0 / 0 1 0.0 2035 0
$users Running Continuous 100.0% 0 / 0 0 / 0 1 0.0 0 0
8a51d32a-c37f-4593-9084-b6cd1565893c Running Transient 18.8% 0 / 0 0 / 0 0 23.2 960 46
8a51d32a-c37f-4593-9084-b6cd1565893c-slave-0 Running Transient 19.9% 0 / 0 0 / 0 1 4827.7 335514 3360
8a51d32a-c37f-4593-9084-b6cd1565893c-slave-1 Running Transient 19.9% 0 / 0 0 / 0 1 4554.4 342248 2466
8a51d32a-c37f-4593-9084-b6cd1565893c-slave-2 Running Transient 19.9% 0 / 0 0 / 0 0 3400.7 357888 0
902fa7b6-5e8b-4eb3-ba74-b59c4edfbcc6 Running Transient 18.8% 0 / 1 0 / 0 0 13.9 547 459
902fa7b6-5e8b-4eb3-ba74-b59c4edfbcc6-slave-0 Running/Paused Transient 19.9% 0 / 0 0 / 0 1 4299.6 199095 3043
902fa7b6-5e8b-4eb3-ba74-b59c4edfbcc6-slave-1 Running Transient 19.9% 0 / 0 0 / 0 1 4554.9 203003 2823
902fa7b6-5e8b-4eb3-ba74-b59c4edfbcc6-slave-2 Running Transient 19.9% 0 / 0 0 / 0 1 6427.5 217517 3756

From trying to reproduce it seems that it happens when I have an existing query in the UI (eg let query run to end) when you then click "run query" it will tell you an error but the query is actually running. You can see this by keeping a tab open on projections with queries selected.

Navigation of linked events does not show original stream

With EventStore 2.0.1 it was possible to browse the $et- and $ce- stream via webui and navigate to the original streams of the events. That was quiet helpful.

With the new webui of eventstore 3 its not possible anymore. I only see name and links of the actual stream and cannot navigate to the original stream. Please take a look at the following screenshots that shows the difference:

EventStore 2.0.1:
eventstore-2 0 1

EventStore 3.0.5:
eventstore-3 0 5

Event Details:

EventStore 2.0.1:
eventstore-2 0 1-2

EventStore 3.0.5:
eventstore-3 0 5-2
(Here i can only navigate back to the $ce- stream)

Is it possible to add that functionality back? Thanks!

Fix npm package ref version warning

npm WARN unmet dependency ...\EventStore.UI\node_modules\gulp-bower requires gulp-util@'latest' but will load
npm WARN unmet dependency ...\EventStore.UI\node_modules\gulp-util,
npm WARN unmet dependency which is version 3.0.1

basically, change latest to proper version.

Minify the UI

Work out a method for minifying the UI and bundling all the resources together - it's currently very large and is making the Event Store distribution too big.

Error: cannot find module 'gulp-concat'

C:\EventStore.UI>gulp connect

module.js:340
throw err;
^
Error: Cannot find module 'gulp-concat'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (C:\EventStore.UI\gulpfile.js:7:14)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)

when on $$$ stream, metadata link should not be present

when on /streams/$$$... we should not display metadata link, to /streams/$$$.../metadata as there is nothing up there for it.

url: ttp://127.0.0.1:2113/streams/%24%24%24users/metadata?embed=tryharder

Status Code: 400 Stream must be non-empty string and should not be metastream

what we can do is, query for metadata and if status 400, do not display a link, or this link should not be returned from ES in links array.

Font hurts my eyes

Like the new UI, but the font actually hurts my eyes (at least on Chrome in Windows). Particularly the bold on the Gossip page. No doubt it looks lovely on the Mac.

image

Projections UI doesn't work with HTTPS

I am setting up a evenstore cluster with SSL termination and load balancer on AWS.
My domain is pointing to the loadbalancer which is on 2113 on HTTPS, and LB is redirecting to the instances of ES wich are on HTTP 2113.

Problem is when we try to run any projection in the UI we get this error in console log:

Mixed Content: The page at 'https://my_domain:2113/web/index.html#/projections/http%253A%252F%252Fmy_domain%253A2113%252Fprojection%252F%2524by_event_type' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://my_domain:2113/projection/$by_event_type/result'. This request has been blocked; the content must be served over HTTPS.

For whatever reason UI is trying to access HTTP. Only during starting/stopping the projections. I did not notice anything else behaving badly.
My current reasearch showed that URL is based on the value we use during login. I have checked and the authdata cookie is stored correctly (meaning: with HTTPS).

Query doesnt work

My guess is if you test it any fromCategory() etc one will but not a basic fromall()

Saw same thing in esquery (looks like how projections return from queries changed) if its a single result use resultUri if its multiple results use resultStreamUri which is an atom feed

see logic here https://github.com/EventStore/EventStore/tree/esquery

Fix copy and paste

Selected text in the UI is unselected during screen refresh making it difficult to copy and paste data from the UI.

Feedback on broken projections

One more, which I can happily move to a new Issue if you wish?

fromCategory("SomeThing").when({
    $init : function(s,e) { return { Count : 0 } },
    $ny : function(s,e) { s.Count++; return s; }});
  • The UI doesn't return or update the state - which is understandable - but there is NO feedback in the UI that this failed. Neither does the console show anything
  • Hit "DEBUG" (as you would when something doesn't work)
  • Hit "Stop"
  • Hit "Run Step"

Console says;

[32368,16,16:36:21.131] Error while processing message EventStore.Projections.Core.Messages.EventReader
intSuggested in queued handler 'Projection Core #0'.
Specified method is not supported.

UI says;
image

Log viewer:
(nothing)

I'd expect here at least the error in the console to come back to the UI, perhaps in the Log Viewer window or something!? What am I missing?

Force wrap if text is too wide

I have a use case where I need to include a rather large blob of escaped json inside my metadata.
Since this is not being wrapped in the Stream Browser, the table is widened to extreme widths (17000 for example), which makes it very hard to use the UI as one has to scroll all the way to the right to close an opened event and other columns like the Type and the Timestamp are also very hard to read/find.

Here is a screenshot to show the problem: https://dl.dropboxusercontent.com/u/19676954/EventStoreUI-Wrap.png

Would be awesome if either one were able to force a text wrap inside the json output field or if this would be scrollable for itself, so one would not move the other controls and outputs so far away when expanded.

No Message When Deleting a Projection

When you try deleting a projection there is no immediate feedback on whether it has been successful, although if you check the projection screen it will be gone. After 10-15s it will pop up a message saying "Projection not removed". At no point does the delete projection screen get navigated away from automatically.

Remove bower_components from repro

Remove bower_components from repro and fix bower.json so it will not use latest as version - this is already causing issues when trying to update all bower components.

CPU/Memory usage

Leaving the UI open for an extended period of time can lead to increased CPU and memory usage across Firefox and Chrome.

Atom uris

We should drop some uris of the form

on streams page etc so that tools like chrome can grab the atom feed :)

Refreshing the page removes the version number

Steps to reproduce:

  • Open up fresh event store
  • Sign into the UI. Note the version number display:
    version1
  • Refresh the page (I'm using Cmd+R in Safari). Note the lack of version number display:
    version2

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.