►
From YouTube: Jobs table refactor to Vue/GraphQL UX Overview
Description
Payton Burdette, senior frontend engineer on CI goes over some UX changes currently made in a refactor behind a feature flag.
A
Hey
there,
this
is
peyton
burdette
senior
front
end
engineer
on
continuous
integration.
The
purpose
of
this
video
is
to
go
over
some
ux
changes
that
have
happened
during
this
refactor.
The
refactor
is
migrating.
The
jobs
table,
the
jobs
view
from
left-hand
side
is
pamela
and
rails
and
right
hand.
Side
is
now
view
and
graphql
currently
behind
feature
flare.
A
A
So
that's
from
git
lab
ui
and
the
everything
is
in
view
and
graphql
on
the
right-hand
side
and
the
left-hand
sides
handle
and
rails
only
thing
we
have
not
built
yet
is
pagination
down
at
the
bottom
and
we
have
not
built
the
action
cells.
So
that
is,
if
you
can
take
an
action
on
the
job
such
as
cancel
retry
things
like
that.
A
Okay,
so
the
tabs
have
been
ported
to
view
and
graphql
as
discussed.
One
thing
is
in
pending:
oh
well,
we
got
jobs
now,
but
let's
see
that's
appending
zero,
so
pending
zero
used
to
show
or
does
show
right
now
create
a
ci
cd
configuration
file,
that's
kind
of
misleading.
To
me,
because
you
already
have
jobs
right,
so
you
don't
need
to
create
a
ci
cicd
configuration
file,
it's
already
there,
so
it
kind
of
feels
like
a
bug
to
me.
A
So
what
I've
done
is
taken
into
account,
the
counter
of,
if
you
have
jobs
or
not,
and
now
we
show
no
jobs
to
show
instead
of
that.
But
if
you
do
not
have
jobs
at
all
for
a
project,
we
will
show
this
just
for
the
all
tab
for,
like
a
brand
new
project
also,
you
may
have
noticed.
We
now
show
a
skeleton
loader
for
a
loading
state.
One
thing
that
I
did
was
just
use.
A
A
Okay,
so
the
status
column
same
job
column,
I've
broken
down
the
id
instead
of
like
keeping
on
one
line
that
wraps
I've
kept
the
id
on
one
line
and
then
the
commit
info,
like
branch
and
sha
on
the
next
line
pipeline.
Instead
of
wrapping,
I've
done
id
pipeline
id
and
then
created
by
user
stage
and
name
are
the
same
except
name.
The
column
is
broken
down
a
little
bit
like,
so
it's
a
little
less
room
and
then
duration
and
coverage.
A
A
A
Put
a
lot
of
data
in
there,
so
it's
different,
you
know
like
I
guess
we
could
go
this
route,
but
like
the
easiest
way
like
I
found
to
like
refactor.
This
was
to
instead
of
having
columns
that
auto
adjust
was
to
just
keep
a
static
column
and,
if,
like
the
data,
gets
too
large
to
truncate
the
truncate.
The
text
which,
which
I've
done
here
for
everything
only
thing
that
we
may
want
to
go
back
and
do
is
show
tooltips
with
the
full
job
id.
A
But
then
again
like
I
don't
know
how
you
know
as
the
data
grows.
Maybe
we
might
want
to
do
that
for
like
the
branch
so
like,
if
that
gets
large
like
we
could
show
that
or
ux
may
have
a
better
idea,
so
that
was
done
to
the
job
cell
and
the
pipeline
cell,
where
I
broke
those
two
across
and
kind
of
changed
up
the
text
just
a
little
bit
so
definitely
open
up
for
suggestions
for
there
before
we
ship.
A
A
Well,
I
can't
see
there
because
all
my
stuff's
finished
so
like
one
of
the
changes
I
did
to
the
pipelines
page
was
in
progress
and
different
like
little
snippets
of
information
for
a
user
rather
than
showing
nothing.
So
maybe
we
can
iterate
on
that
and
bring
that
logic
over
to
this
table
as
well
as
we
move
forward
with
this
process
and
then
another
change.
So
this
is
a
good
change.