Re: [DISCUSS] Add ngrx to handle state management in Angular

[Michael Miklavcic]

> "NgRx solves this with its
> one-direction data flow and immutable data structures. The store is the
> single source of truth which your component derives state from rather than
> having components holding their own state and having to manage,
communicate
> and pass data between them."

That does sound desirable. The explanations you guys have provided all
sound very reasonable to me. I recall us having issues with state even in
the early versions of the Alerts and Management UI's and this sounds like
it should simplify that a great deal. I'm +1 on going this route.

Cheers,
Mike


On Wed, Nov 28, 2018 at 11:26 AM Tamás Fodor  wrote:

> Personally, I prefer following the flux approach because having one store
> as a single source of truth makes a complex web app more predictable and
> easier to reason about.
> In angular we can easily achieve this by using NgRx which supports the
> unidirectional data flow by involving pure functions that hold the business
> logic and it it's extremely simple to test them. With NgRx we could also
> have separated functions to manage side effects like http requests. Not to
> mention the aforementioned awesome Redux toolbar to see how the data flows
> trough the application.
> This approach has been proven over the years and perfected by many other
> developers. Onboarding new members in team has never been easier, since,
> instead of spending a lot of time to come up with our own solution and
> write a documentation or a usage guide, new devs can find tons of resources
> about best practices on the Internet.
> NgRx also forces developers to keep the state immutable which is a very
> important ingredient of the whole story. By having an immutable data
> structures we can get the most out of Angular's rendering capabilities by
> setting the proper change detection strategy. We can simply avoid a lot of
> unnecessary re-renders and difference calculations between the previous and
> the new state. If we use immutable state Angular can compare it by
> reference checking which is extremely fast. If the data has the same memory
> pointer as the previous data it simply skips the reconciliation process for
> a certain part of the (or the entire) component tree.
>
> On Wed, Nov 28, 2018 at 10:48 AM Tibor Meller 
> wrote:
>
> > NgRx also makes testing easier and the architecture more straightforward.
> > Components in a Redux/NgRx architecture only responsible for rendering
> and
> > dispatching events.
> > All the data alternation implemented in pure functions so-called effects
> > and reducers.
> > No intertwined components, side effects just easily testable pure
> > functions.
> >
> > +1 (non-binding)
> >
> > On Tue, Nov 27, 2018 at 5:09 PM Shane Ardell 
> > wrote:
> >
> > > There are a couple of good examples in Metron Alerts showing different
> > > advantages we would gain using NgRx. First, you’ll notice that a lot of
> > > state does not persist between view changes. For example, if a user
> > inputs
> > > search criteria into the search bar, switches to the PCAP view, then
> > > switches back, that search input is not persisted. If we used NgRx, the
> > > application store can persist this state between view changes if we
> > wanted
> > > to. The importance of this will continue to become more apparent as the
> > > application scales up and different views are added.
> > >
> > > In addition, there is quite a bit of shared application data between
> > > components. For example, you’ll see that both the GroupByComponent and
> > > AlertFiltersComponent display the number of facets available. When you
> > > filter by a facet, these numbers update. You can filter by clicking on
> > the
> > > facets available in the AlertFiltersComponent, or you can search with a
> > > filter keyword and value in the search bar. Multiple areas of the
> > > application are showing the same data, and multiple areas of the
> > > application are manipulating that data. While passing data through
> @Input
> > > and @Output decorators and services is fine for basic sharing of
> > > application data, you’ll eventually create a complex web of data
> sharing
> > > and mutation that can be hard to follow and debug. In my opinion, we
> are
> > > nearing that point in our application. NgRx solves this with its
> > > one-direction data flow and immutable data structures. The store is the
> > > single source of truth which your component derives state from rather
> > than
> > > having components holding their own state and having to manage,
> > communicate
> > > and pass data between them.
> > >
> > > There are also many debugging advantages. I don’t have a specific
> example
> > > at the moment, but you can probably imagine how much easier it is to
> > “time
> > > travel” with NgRx debugging tools. What I mean by “time travel” is the
> > > ability to move back and forth among the previous application states
> and
> > > view the results in real-time rather than setting a breakpoint,
> reloading
> > > the 

Re: [DISCUSS] Add ngrx to handle state management in Angular

[Tamás Fodor]

Personally, I prefer following the flux approach because having one store
as a single source of truth makes a complex web app more predictable and
easier to reason about.
In angular we can easily achieve this by using NgRx which supports the
unidirectional data flow by involving pure functions that hold the business
logic and it it's extremely simple to test them. With NgRx we could also
have separated functions to manage side effects like http requests. Not to
mention the aforementioned awesome Redux toolbar to see how the data flows
trough the application.
This approach has been proven over the years and perfected by many other
developers. Onboarding new members in team has never been easier, since,
instead of spending a lot of time to come up with our own solution and
write a documentation or a usage guide, new devs can find tons of resources
about best practices on the Internet.
NgRx also forces developers to keep the state immutable which is a very
important ingredient of the whole story. By having an immutable data
structures we can get the most out of Angular's rendering capabilities by
setting the proper change detection strategy. We can simply avoid a lot of
unnecessary re-renders and difference calculations between the previous and
the new state. If we use immutable state Angular can compare it by
reference checking which is extremely fast. If the data has the same memory
pointer as the previous data it simply skips the reconciliation process for
a certain part of the (or the entire) component tree.

On Wed, Nov 28, 2018 at 10:48 AM Tibor Meller 
wrote:

> NgRx also makes testing easier and the architecture more straightforward.
> Components in a Redux/NgRx architecture only responsible for rendering and
> dispatching events.
> All the data alternation implemented in pure functions so-called effects
> and reducers.
> No intertwined components, side effects just easily testable pure
> functions.
>
> +1 (non-binding)
>
> On Tue, Nov 27, 2018 at 5:09 PM Shane Ardell 
> wrote:
>
> > There are a couple of good examples in Metron Alerts showing different
> > advantages we would gain using NgRx. First, you’ll notice that a lot of
> > state does not persist between view changes. For example, if a user
> inputs
> > search criteria into the search bar, switches to the PCAP view, then
> > switches back, that search input is not persisted. If we used NgRx, the
> > application store can persist this state between view changes if we
> wanted
> > to. The importance of this will continue to become more apparent as the
> > application scales up and different views are added.
> >
> > In addition, there is quite a bit of shared application data between
> > components. For example, you’ll see that both the GroupByComponent and
> > AlertFiltersComponent display the number of facets available. When you
> > filter by a facet, these numbers update. You can filter by clicking on
> the
> > facets available in the AlertFiltersComponent, or you can search with a
> > filter keyword and value in the search bar. Multiple areas of the
> > application are showing the same data, and multiple areas of the
> > application are manipulating that data. While passing data through @Input
> > and @Output decorators and services is fine for basic sharing of
> > application data, you’ll eventually create a complex web of data sharing
> > and mutation that can be hard to follow and debug. In my opinion, we are
> > nearing that point in our application. NgRx solves this with its
> > one-direction data flow and immutable data structures. The store is the
> > single source of truth which your component derives state from rather
> than
> > having components holding their own state and having to manage,
> communicate
> > and pass data between them.
> >
> > There are also many debugging advantages. I don’t have a specific example
> > at the moment, but you can probably imagine how much easier it is to
> “time
> > travel” with NgRx debugging tools. What I mean by “time travel” is the
> > ability to move back and forth among the previous application states and
> > view the results in real-time rather than setting a breakpoint, reloading
> > the application, inspecting, setting another breakpoint to inspect a
> state
> > previous to your current breakpoint, reloading the application, etc. This
> > is a very repetitive and time-consuming thing to do when debugging on the
> > front-end, and is very common. For a visual example of this, here is a
> > video containing a decent overview of debugging with NgRx:
> > https://www.youtube.com/watch?v=70ojPxMA7Ig
> >
> > On Tue, Nov 27, 2018 at 5:30 AM James Sirota  wrote:
> >
> > > I found a helpful article here:
> > > https://brianflove.com/2018/01/08/ngrx-the-basics/
> > >
> > > A lot of this goes over my head, but in a nutshell, it's a tree-based
> > > state management object for JS.  Its main drawback seems to be added
> > > complexity, but if the guys who are more familiar with UI say we would
> > > 

Re: Unzipping Cypress

[Otto Fowler]

OK,

I think what is happening is that in my PR, I’m building metron in Docker
and deploying to vagrant.  I have updated my PR to map the cypress cache
into the Docker container.
Thanks!


On November 28, 2018 at 10:29:25, Shane Ardell (shane.m.ard...@gmail.com)
wrote:

For me, it's at ~/Library/Caches/Cypress, but the path depends on your OS:
https://docs.cypress.io/guides/getting-started/installing-cypress.html#Binary-cache

On Wed, Nov 28, 2018 at 4:19 PM Otto Fowler 
wrote:

> Where is the cache path?
>
>
> On November 28, 2018 at 09:34:18, Shane Ardell (shane.m.ard...@gmail.com)
> wrote:
>
> https://github.com/cypress-io/cypress/issues/1813
>

Re: [VOTE] Metron-bro-plugin-kafka Release Candidate 0.3.0-RC1

[zeo...@gmail.com]

-1

In my testing it appears that an issue was introduced in 0.2 which is
causing a segfault on the destructor (
https://github.com/apache/metron-bro-plugin-kafka/commit/1dfc5239fae31a64026188109d1e346ce93d5c02#diff-361be0491d615952129ed5c8f39c9683L57).
I've opened METRON-1910 and am testing a fix now.

On Tue, Nov 27, 2018 at 2:36 PM Justin Leet  wrote:

> This is a call to vote on releasing Apache Metron-bro-plugin-kafka 0.3.0
> The release candidate is available at:
>
> https://dist.apache.org/repos/dist/dev/metron/metron-bro-plugin-kafka/0.3.0-RC1/
>
> Full list of changes in this release:
>
> https://dist.apache.org/repos/dist/dev/metron/metron-bro-plugin-kafka/0.3.0-RC1/CHANGES
>
> The tag to be voted upon is:
> apache-metron-bro-plugin-kafka_0.3.0-rc1
> <
> https://github.com/apache/metron-bro-plugin-kafka/tree/apache-metron-bro-plugin-kafka_0.3.0-rc1
> >
>
> The source archives being voted upon can be found here:
>
> https://dist.apache.org/repos/dist/dev/metron/metron-bro-plugin-kafka/0.3.0-RC1/apache-metron-bro-plugin-kafka_0.3.0-rc1.tar.gz
>
> Other release files, signatures and digests can be found here:
>
> https://dist.apache.org/repos/dist/dev/metron/metron-bro-plugin-kafka/0.3.0-RC1/
>
> The release artifacts are signed with the following key:
> *https://dist.apache.org/repos/dist/release/metron/KEYS*
> 
> Please vote on releasing this package as Apache Metron-bro-plugin-kafka
> 0.3.0
>
> When voting, please list the actions taken to verify the release.
>
> Recommended build validation and verification instructions are posted here:
> https://cwiki.apache.org/confluence/display/METRON/Verifying+Builds
>
> This is only for the plugin, so the VM validation is not required.
>
> This vote will be open for until 3pm EDT on Friday November 27 2018.
>
> [ ] +1 Release this package as Apache Metron 0.3.0-RC1
>
> [ ] 0 No opinion
>
> [ ] -1 Do not release this package because...
>
-- 

Jon Zeolla

Re: Unzipping Cypress

[Shane Ardell]

For me, it's at ~/Library/Caches/Cypress, but the path depends on your OS:
https://docs.cypress.io/guides/getting-started/installing-cypress.html#Binary-cache

On Wed, Nov 28, 2018 at 4:19 PM Otto Fowler  wrote:

> Where is the cache path?
>
>
> On November 28, 2018 at 09:34:18, Shane Ardell (shane.m.ard...@gmail.com)
> wrote:
>
> https://github.com/cypress-io/cypress/issues/1813
>

Re: Unzipping Cypress

[Otto Fowler]

Where is the cache path?


On November 28, 2018 at 09:34:18, Shane Ardell (shane.m.ard...@gmail.com)
wrote:

https://github.com/cypress-io/cypress/issues/1813

Re: Unzipping Cypress

[Shane Ardell]

Otto,

I'm not able to reproduce this issue locally. My build uses a binary stored
in a global cache directory. I did a little research and it looks like the
cached global binary not being used was an issue with Cypress v3.0.0
, but it was resolved in
v3.0.1. We use v3.1.0.

I noticed that we do download Chromium every build. Just to verify, there
wasn't some confusion between Cypress and Chromium, correct?


[1]
https://docs.cypress.io/guides/getting-started/installing-cypress.html#npm-install

On Tue, Nov 27, 2018 at 6:40 PM Otto Fowler  wrote:

> I’m sorry for the confusion, but I see this locally.  I’m not looking at
> travis.
> I have been doing a lot of full dev deployments.
>
>
>
> On November 27, 2018 at 11:40:42, Shane Ardell (shane.m.ard...@gmail.com)
> wrote:
>
> Otto,
>
> Do you have a Travis log you can share that shows Cypress downloaded vs.
> using a cached version? It looks like my latest merge to master uses a
> cached version: https://travis-ci.org/apache/metron/jobs/458440883#L7292.
>
> Thanks in advance.
>
> On Mon, Nov 26, 2018 at 6:14 PM Shane Ardell 
> wrote:
>
> > It seems we can pretty easily configure the .travis.yml config file to
> > cache our npm modules:
> >
> https://docs.cypress.io/guides/guides/continuous-integration.html#Caching-the-Cypress-binary
> >
> > It also looks like we are already trying to cache our npm modules in the
> > Travis config, but, obviously, it's not working as intended. I can take
> a
> > look into why tomorrow.
> >
> > On Mon, Nov 26, 2018 at 5:33 PM Michael Miklavcic <
> > michael.miklav...@gmail.com> wrote:
> >
> >> Shane, Tibor - Can you guys chime in on this?
> >>
> >> On Mon, Nov 26, 2018 at 9:13 AM Otto Fowler 
> >> wrote:
> >>
> >> > Isn’t there a way we can cache it?
> >> >
> >> >
> >> > On November 26, 2018 at 10:59:20, Nick Allen (n...@nickallen.org)
> >> wrote:
> >> >
> >> > Yes, I have noticed that too. If not a way to reduce the time, we
> should
> >> > not be logging the unzipping process percentile-by-percentile in the
> >> Travis
> >> > CI builds.
> >> >
> >> > On Sat, Nov 24, 2018 at 9:49 AM Otto Fowler 
>
> >> > wrote:
> >> >
> >> > > Anyone else seeing a lot of time taken downloading and unzipping
> >> Cypress
> >> > on
> >> > > builds?
> >> > > What is up with that?™
> >> > >
> >> > > ottO
> >> > >
> >> >
> >>
> >
>
>

Re: [DISCUSS] Add ngrx to handle state management in Angular

[Tibor Meller]

NgRx also makes testing easier and the architecture more straightforward.
Components in a Redux/NgRx architecture only responsible for rendering and
dispatching events.
All the data alternation implemented in pure functions so-called effects
and reducers.
No intertwined components, side effects just easily testable pure
functions.

+1 (non-binding)

On Tue, Nov 27, 2018 at 5:09 PM Shane Ardell 
wrote:

> There are a couple of good examples in Metron Alerts showing different
> advantages we would gain using NgRx. First, you’ll notice that a lot of
> state does not persist between view changes. For example, if a user inputs
> search criteria into the search bar, switches to the PCAP view, then
> switches back, that search input is not persisted. If we used NgRx, the
> application store can persist this state between view changes if we wanted
> to. The importance of this will continue to become more apparent as the
> application scales up and different views are added.
>
> In addition, there is quite a bit of shared application data between
> components. For example, you’ll see that both the GroupByComponent and
> AlertFiltersComponent display the number of facets available. When you
> filter by a facet, these numbers update. You can filter by clicking on the
> facets available in the AlertFiltersComponent, or you can search with a
> filter keyword and value in the search bar. Multiple areas of the
> application are showing the same data, and multiple areas of the
> application are manipulating that data. While passing data through @Input
> and @Output decorators and services is fine for basic sharing of
> application data, you’ll eventually create a complex web of data sharing
> and mutation that can be hard to follow and debug. In my opinion, we are
> nearing that point in our application. NgRx solves this with its
> one-direction data flow and immutable data structures. The store is the
> single source of truth which your component derives state from rather than
> having components holding their own state and having to manage, communicate
> and pass data between them.
>
> There are also many debugging advantages. I don’t have a specific example
> at the moment, but you can probably imagine how much easier it is to “time
> travel” with NgRx debugging tools. What I mean by “time travel” is the
> ability to move back and forth among the previous application states and
> view the results in real-time rather than setting a breakpoint, reloading
> the application, inspecting, setting another breakpoint to inspect a state
> previous to your current breakpoint, reloading the application, etc. This
> is a very repetitive and time-consuming thing to do when debugging on the
> front-end, and is very common. For a visual example of this, here is a
> video containing a decent overview of debugging with NgRx:
> https://www.youtube.com/watch?v=70ojPxMA7Ig
>
> On Tue, Nov 27, 2018 at 5:30 AM James Sirota  wrote:
>
> > I found a helpful article here:
> > https://brianflove.com/2018/01/08/ngrx-the-basics/
> >
> > A lot of this goes over my head, but in a nutshell, it's a tree-based
> > state management object for JS.  Its main drawback seems to be added
> > complexity, but if the guys who are more familiar with UI say we would
> > benefit from it I am inclined to take them at their word.
> >
> > 26.11.2018, 13:09, "Michael Miklavcic" :
> > > Shane, thanks for sharing this. Can you perhaps describe a sample use
> > case
> > > in the UI currently and explain for us how it currently works (or
> > doesn't,
> > > ha) versus how it would be modified and improved with using NgRx?
> > >
> > > Thanks,
> > > Mike
> > >
> > > On Fri, Nov 23, 2018 at 7:44 AM Shane Ardell  >
> > > wrote:
> > >
> > >>  What I'm referring to is roughly the entire contents of the UI
> > >>  application's memory.
> > >>
> > >>  On Thu, Nov 22, 2018 at 6:29 PM Otto Fowler  >
> > >>  wrote:
> > >>
> > >>  > Can you describe what you mean by “state” in a little more detail?
> > Not a
> > >>  > complete description, maybe just a crib list.
> > >>  >
> > >>  >
> > >>  > On November 22, 2018 at 07:21:43, Shane Ardell (
> > shane.m.ard...@gmail.com
> > >>  )
> > >>  > wrote:
> > >>  >
> > >>  > As both the Management and Alerts UI grow in size, managing
> > application
> > >>  > state continues to become more and more complex. To help us deal
> with
> > >>  > managing all of this state and ensuring our application derives
> state
> > >>  from
> > >>  > a single source of truth, I suggest we start using NgRx, a state
> > >>  > management
> > >>  > library based on the Redux pattern but built for Angular. It is by
> > far
> > >>  the
> > >>  > most popular library of this type for Angular. As you can see in
> the
> > >>  > project's GitHub Insights tab <
> > https://github.com/ngrx/platform/pulse>,
> > >>  > it's quite actively worked on and releases are pretty frequent. The
> > >>  > project
> > >>  > is licensed under MIT.
> > >>  >
> > >>  > As far as an