►
From YouTube: Frontend CI product / codebase overview
Description
No description was provided for this meeting.
If this is YOUR meeting, an easy way to fix this is to add a description to your video, wherever mtngs.io found it (probably YouTube).
A
Hello,
everyone,
my
name,
is
Payton
I'm
gonna,
give
a
overview
of
the
parts
of
our
product
that
relate
to
the
CI
space
and
then
I'm
gonna
give
a
quick
overview
as
well
of
kind
of
the
code
that
relates
and
how
we
do
things
in
the
front
him
for
CI,
specifically
alright.
So
right
now,
I'm
locally
on
our
GD
k
project,
which
is
what
allows
us
to
develop
against
the
gate.
Lab
project,
I'm
gonna,
look
into
a
current
project.
A
So
really
how
CI
really
works
is
we
have
a
file
in
a
repo
get
lab
CID
animal
and
within
that
file
is
where
you
would
set
up
different
stages,
different
jobs
to
create
a
pipeline
to
make
continuous
integration
work.
So
when
you
have
a
lot
of
different
engineers
pushing
up
to
your
codebase
at
the
same
time,
this
ensures
that
we
don't
introduce
any
bugs
into
a
codebase
and
that's
one
of
the
great
things
about
continuous
integration.
A
Let's
start
out
in
settings
see
ICD,
so
we
have
some
settings
that
you
can
apply
to
your
PI
clients
such
as
pipeline
subscriptions
triggers
variables,
general
pipelines,
environments,
runners,
different
things
like
that.
We
won't
cover
every
single
feature
within
settings,
but
let's
look
at
see
ICD
variables
for
now,
so
this
is
built-in
view.
A
A
Say:
Goku
DBZ
you
can
create
a
variable
like
that.
Obviously
that
isn't
a
variable.
You
would
really
create.
Maybe
well,
but
now
this
variable
can
run
in
your
pipeline
or
you
can
scope
to
a
certain.
A
Okay,
so
that's
a
one
of
the
different
parts
of
our
code
base
that
we
touch.
If
we
go
to
see
ICD
you'll
notice
that
we
have
a
pipeline's
list
here.
This
is
all
pipelines
that
have
been
currently
run
for
this
repo
and
there's
different
ways
that
you
can
trigger
pipelines.
You
can
trigger
them,
like
by
user,
can
trigger
a
pipeline
by
pushing
up
to
the
repo
you
can
use
API
to
trigger
a
pipeline,
there's
different
ways
that
you
can
trigger
pipelines
within
this
list.
A
We
have
the
pipeline
ID
and
we
have
these
badges
to
kind
of
give
you
a
little
bit
more
detail
based
on
that
pipeline.
The
trigger
source
some
commit
information
in
the
different
stages
there
like
set
up
for
your
pipeline
time
ago,
so
kind
of
gives
you
some
data
on
that
and
then,
like
some
manual
actions
like
to
retry
the
pipeline
or
stop
the
pipeline
paginations
on
this
as
well.
You
can
filter
by
scope
as
well
up
here.
A
Let's
see,
we
also
have
a
pipeline
detail
view.
So
if
you
come
to
your
pipelines
list
and
hit
a
certain
pipeline,
we
have
a
visualization
here
to
allow
you
to
visualize
how
your
pipeline
is
running
the
this.
This
supports,
like
a
hybrid
view,
so
this
is
a
stage
based
slash
dag,
but
we
also
have
a
dag
visualization,
that's
just
made
into
the
product.
This
muscle
you
can
get
a
little
bit
more
granular
on
the
jobs
that
consists
of
your
pipeline
and
different
data
based
on
the
jobs.
A
If
you
want
to
see
what's
going
on
with
a
job,
you
can
come
and
click
and
see
why
your
job
passed
or
why
it
failed,
and
some
more
details
over
here
as
well
in
the
sidebar
alright,
so
that's
kind
of
like
the
bulk
of
the
product.
Of
course,
we
have,
you
know
some
more
details
and
settings
and
an
admin
area
there's
also
some
details
around
CI
CD.
A
If
you're
running
up
my
self
hosted
instance
as
well
like,
we
have
an
instance
variable
UI,
pretty
much
the
exact
same
as
a
project
settings
for
the
CI
CD
and
as
well
as
Group,
this
is
pretty
much
ship
code
that
allows
you
to
manage
variables
for
that
certain
project,
some
different
settings
and
different
things
you
can
do
here
or
like
you-
can
set
your
variables
to
be
an
admin
instance
protected
by
default.
That
old
right
over
every
single
prog
product
I
mean
project.
A
It
will
protect
all
those
variables
by
default
and
also
like,
if
you
have
a
different
merge
request
or
something
like
that,
like
you'll,
have
a
merge
request.
Widget
it'll
show
you
some
details
based
on
that,
just
like,
based
on
a
commit
it'll
show
you
your
pipeline,
your
recent
pipeline
to
different
things
like
that,
so
it's
kind
of
like
a
quick
product
overview
of
so
maybe
like
some
of
the
bulk
parts
of
the
project
that
we
do.
There's
definitely
a
lot
more
of
course.
A
So
let's
go
ahead.
Let
me
let
me
bring
over
my
code
editor,
let's
kind
of
take
a
look
at
some
of
the
different
pieces
of
the
puzzle.
So
right
now,
I
have
pulled
down
rket
lab
project.
So
this
is
our
code
base
for
that
you'll
notice
under
app.
There
is
and
that
a
lot
open.
Sorry
there
is
a
assets
folder
with
an
assets.
We
have
a
Java
scripts
folder.
So
let's
take
a
look
at
say,
for
instance,
the
bit
of
the
code
that
relates
to
Settings
CI
CDE.
A
Variables
so
how
you
manage
variables
in
the
UI
so
under
app
assets,
the
I
variable
list.
We
have
all
the
code
related
for
that
within
this.
It's
pretty
simple.
We
use
bootstrap
kind
of
for
our
UI,
but
we've
we've
taken
over
bootstrap
and
get
lap
UI.
So
that's
kind
of
like
our
design
system,
/
component
library
well
get
lab.
Ui
is
our
component
library
and
then
we
have
pajamas,
which
is
our
sign
system.
A
So
if
we
take
a
look
at
a
component
within
here,
you
can
see
we're
importing
different
components
from
get
lab
UI
to
use
to
build
upon
this,
and
within
this
component
we
have
a
good
bit
of
code
like
such
as
the
modal
that
pops
up,
when
you
click
Add,
variable
and
different
different
ways
of
validating
this
information
and
making
sure
that
we're
adding
variables
and
editing
variables
and
they're
going
into
the
right
columns
in
the
database.
This
certain
feature
actually
uses
view
X
for
state
management,
so
you
can
kind
of
come
into
like
the
store.
A
You'll
see
this
pattern
a
lot
throughout
the
code
base
and
kind
of
get
an
idea
of
what
this
state
pattern
or
kind
of
looks
like,
and
when
we
send
the
different
variables
up.
We
have
actions
such
as
add
variable,
which
will
hit
an
in
point
dispatch
some
actions
based
on
how
the
endpoint
handled
payload
listen
up
and.
A
Update
variable
edit
request,
fetch
environments,
it's
just
pretty
much
just
a
lot
of
different
components
built
on
top
of
each
other.
To
make
that
feature,
and
let's
take
a
look
at
another
pieces
code
base,
let's
say:
okay,
so
pipe
lines
list
alright.
So
for
this
certain
feature
we
go
under
app
assets.
A
Let's
go
down
to
pipe
lines
here
we
go,
and
this
should
be
merge
soon,
but
as
the
recording
of
this
video
I've
kind
of
grouped
everything,
that's
related
to
pipe
lines
list
and
it's
on
folder,
it
was
kind
of
rogue,
so
hopefully,
that'll
get
merged
soon
and
you'll
be
seeing
this.
But
if
not,
it
is
just
all
of
these
components
are
just
nested
under
the
components
directory,
but
so
pipe
lines
list.
A
A
The
bulk
of
this
feature
is
pretty
much
a
table
with
some
rows
and
all
of
these
different
components
and
this
build
on
top
of
the
features
that
you
see
right
here
and
when
the
main
things
note
is,
this
is
pipelines
or
all
you
know
they
stay
in
a
running
State.
So
if
a
new
pipeline
comes
up,
we
show
that
dynamically
and
we
do
that
by
pulling
the
API
continuously.
A
So
when
any
new
data
comes
in,
like
a
pipeline
triggered,
you
know
we're
constantly
pulling
the
API
to
grab
that
new
pipeline
that
data
and
render
it
in
that
view.
So,
as
you
can
see,
the
pipeline's
dot
view
has
different
components
within
here,
like
navigation
controls,
pipeline
filtered
search,
which
is
what
allows
you
to
filter
the
pipeline
is
at
the
top
of
the
view.
A
A
This
is
one
of
the
one
of
the
candidates
to
do
that,
and
we
have
certain
services,
such
as
get
pipelines
that
kind
of
continuously
get
pipelines
when
polling
set
up,
and
we
have
to
deal
with
pagination
here
and
different
things
so,
which
is
CI
pagination
API
mixin
this
bit
of
code
here
has
a
few
methods
like
own
change:
tab,
own
change,
page
update
internal
state,
that
kind
of
deals
with
polling
and
updates
the
query
parameters
for
this
certain
feature.
So
that
would
be
like
if
you
own
change
tab
here.
A
We
don't
have
any
don't
change
pages
here,
cuz
when
I
have
enough
pipelines,
but
under
this
test
project
we
can
check
that
out.
So,
let's
go
over,
see
ICD
pipelines
and
like
this
would
be
an
oil
change.
Page
you'll
notice
up
here
in
the
query
prams,
the
top
of
your
bar
page,
two
kind
of
comes
up.
You
check
the
console,
you'll
see
the
query,
parameter
updated
and
if
we
wait
a
few
seconds,
you'll
notice
that
this
network
crest
request
will
happen
again.
So
obviously
we
have
polling
setup
here
to
get
that
data.
A
Okay,
so
that's
pretty
good
overview,
I'd
say
of
the
pipeline's
list.
If
you
come
to
a
pipeline
detail
page,
we
visualize
the
pipeline.
All
of
this
code
actually
is
not
using
any
type
of
visualization
library.
At
the
moment,
it's
just
pure
CSS
that
may
change
in
the
future
to
kind
of
make
it
a
little
bit
more
reliable.
A
That's
all
under
pipelines,
so
same
thing,
app
assets,
JavaScript
pipelines,
components
graph,
so
you
can
kind
of
see
like
the
graph
component.
I
believe
is
the
top
level
component
and
we
have
more
child
components
such
as
linked
pipelines,
there's
different
stages
within
the
pipelines
that
all
broke
down.
In
a
note
to
make
about
this
link
pipeline
kind
of
how
this
works
is,
for
instance,
we
have
a
downstream
pipeline
here.
A
This
would
be
a
link
type
line
because
this
would
be
a
multi
project
pipeline.
So
if
you
have
like
a
microservices
architecture,
if
you
have
the
trigger
keyword,
you
want
to
trigger
another
pipeline
within
different
repo.
You
can
set
up
your
llamo
file
to
do
that
and
it
will
trigger
a
link
pipeline
and
kind
of
the
way
the
UX
works
right
now.
Is
you
click
on
that
downstream
and
you
can
see
the
the
pipeline
that
a
certain
job
triggered
here?
A
If
you
don't
know
what
that
means,
you
can
kind
of
come
in
here
and
click
that
and
see.
Okay,
we
have
a
trigger
drop
here.
That's
named
trigger
job,
but
the
way
you
know
is
you
have
the
trigger
keyword
and
it
triggers
whenever
this
job
bronze.
It
triggers
another
pipeline
that
within
another
repo,
so
that's
kind
of
what
that
means.
A
We
have
some
more
different
things
for
job
jobs,
that'll
kind
of
show
you
a
little
bit
more
data
on
your
jobs.
I,
don't
believe
we
have
this
in
view.
Yet
let's
do
command
J,
give
me
an
option
J
and
C
yeah.
This
is
still
in
still
in
Hamel,
and
we
use
a
lot
of
Hamel
still
for
some
data
that
we
don't
need
reactivity
or
some
parts
of
the
UI
where
we
don't
need
reactivity.
The
view
handles
really
well.
A
We
won't
get
into
too
much
details
with
the
jobs,
because
I
haven't
personally
worked
much
in
this
part
of
the
code
base
yet
but
kind
of
takes
you
to
the
same
bit
of
the
UI.
If
you
were
to
come
to
a
certain
pipeline
in
the
pipeline's
list
and
hit
a
job,
you
know
kind
of
give
you
a
little
bit
information
on
why
your
job
failed.
A
A
Just
another
quick
overview
is,
for
instance,
let's
go
to
get
websites
get
lab
UI,
so
this
is
a
bookmark
I
had
for
our
design
system.
So
or
excuse
me,
our
component
library,
so
you
can
kind
of
come
in
here
and
see
the
different
components
are
used
throughout
the
product
ways
to
import
them
different
props
for
their
API
on
how
to
use
them,
and
that's
very
helpful,
is
build
something,
and
this
is
our
design
system.
A
So
those
are
two
helpful
little
links
and,
of
course
we
have
very
good
Doc's
around
our
products.
So
this
is
a
really
good
one.
Yet
lab
see,
I
am
already
kind
of
get.
You
started
with
how
to
configure
a
pipeline
within
our
code
base.
So
that's
just
like
a
quick
overview
from
me
on
a
little
bit
of
our
product
and
our
code
base,
and
we
work
hand-in-hand
with
back-end,
of
course,
on
just
pretty
much
making
API
requests
to
either
the
public
API,
sometimes
or
the
internal
API,
and
that's
good
Oh.
A
A
A
And
we
have
this
index
page
here
so,
as
you
can
see,
we
are
getting
that
ID
and
we
are
getting
all
that
data
and
Hammel
off
of
the
data
set
and
then
at
that
point
we
are
creating
a
new
you,
app
CI
variable
settings
where
we
pass
in
all
that
data,
so
that
I
kind
of,
like
you
know,
like
a
top-level
element
of
an
app
or
a
few
app
okay.
Hopefully
that
wasn't
too
bad.
Hopefully
that
helped
and
thanks
for
hanging
around
and
watching
see
you
later.