►
From YouTube: Vulnerabilities over time - Code walkthrough
Description
This video is a walkthrough for https://gitlab.com/gitlab-org/gitlab/-/merge_requests/32301
A
It's
basically
this
one
which
is
located
under
the
security
dashboard
that
can
be
reached
from
more
in
the
security,
and
you
will
have
to
have
Enterprise
license
enabled
and
the
security
dashboard
configured.
Ok.
So
that
being
said,
the
the
purpose
of
the
video
is
to
walk
through
the
code
and
then
explain
why
I
did
certain
things
to
make
the
life
of
the
code
view
very
bit
easier
right.
So
this
is
the
component.
It's
located
under
security,
dashboard
components,
and
it's
named
first-class
vulnerability.
A
This
is
basically
a
copy-paste
of
vulnerability
chart.
This
was
the
old
component
that
was
backed
by
the
REST
API.
So
this
the
data
here
was
knocked
back
by
the
standalone
vulnerabilities.
I
need
to
use
the
view
explore
new
new
implementation,
we're
using
graph
QL.
So
we
are
migrating
the
whole
security
dashboard
to
graph
QL,
and
here
what
you
see
with
the
ones
that
start
with
first-class.
It's
basically
data
backed
by
the
stand,
the
new
standalone
vulnerabilities
here.
This
is
the
component
that
I
recently
introduced
the
design
part.
It's
exactly.
The
same.
A
I
haven't
touched
a
single
line
of
code
here,
but
what
I
change
was
the
implementation
part
and
here
some
of
the
some
of
the
code
here,
it's
it's
it's
exactly
the
same
as
the
previous
one.
So
I'm
gonna
walk
you
through
them,
one
by
one
and
explain
what
I
change
and
why
I
change
it.
So,
first
of
all,
let
me
walk
you
through
the
code
that
changed
that
not
change.
Sorry,
it's
the
components,
part
and
having
touched
it,
the
directives
not
touched
data.
A
I've
added
a
couple
of
things
here:
fields,
it's
exactly
the
same
severity
levels,
it's
exactly
the
same
except
this.
My
part
and
mapping
them
to
be
lowercase
because
they're
used
in
the
they
were
used
in
an
object
lookup
and
the
data
store
there.
It's
also
lowercase.
The
Apollo
query
part
is
its
new
data
new
its
whole.
Despite
and
then
some
of
the
computer
properties
here,
a
new
secure
instance,
start
date,
cursor
and
date
cursor
and
then
from
method
and
date
cursor.
These
are
new
charts,
it's
exactly
it's
not
exactly
the
same
I'm!
A
Sorry
it's
same
except
this
part
the
history.
Here
it
was
retrieved
by
the
view
Explorer.
So
there
was
a
getter
but
now
I'm
using
the
local
state
and
then
they'd
info
an
empty
data
set
they're
exactly
the
same
I
added.
What
a
watcher
here
I
will
explain
in
why
shortly
and
then
the
methods
it's
also
new.
There
was
an
action
for
this
in
new,
explore,
I
moved
it
here
and
little
component
all
right.
So
that
being
said,
I
think
we
can
go
to
the
data
first
here.
A
A
A
For
that
will
probably
be
used
only
in
this
component.
That's
why
it's
it's
in
the
data,
it's
not
in
constants
or
whatever,
and
the
reason
why
we
have
that
it's
basically
in
the
previous
implementation.
The
back
end
returned
the
whole
data
in
a
single
query,
but
now,
if
I
click
here,
for
instance,
you
will
see
that
the
console
is
printing,
some
stuff
one
one
after
the
other
one
say
all
tell
this
this
one,
then
it
stops
so
the
what's
happening
behind
the
scenes.
It's
basically
it's.
A
A
Yes,
then
the
data
yeah,
it's
provided.
Okay,
so
this
is
that
part,
the
query
part.
Basically,
the
vulnerabilities
history
query.
It
accepts
start
date
and
end
date
and
then
it
returns
potentially
the
query
here:
it
returns
the
day,
the
number
of
vulnerabilities
and
then
the
severity
type.
So
this
could
be
critical,
low,
medium
or
high.
A
So
the
back
and
returns
that
data-
it's
not
sorted,
and
it's
not
so
the
the
data
needs
to
be
processed
before
we
can
display
it
in
a
chart.
And
that's
what
exactly?
That's
exactly
what
I'm
doing
here
once
the
data
is
received,
I'm
processing
it
making
it
compatible
so
that
our
chart
can
understand
it
and
then
I'm
sorting
it
because
the
back
end
does
not
sort
it
and
the
reason
why
they're
they
do
not
sort
it's,
because
it
increases
the
low
the
load
and
the
servers
and
it
decreases
the
performance.
A
lot.
A
Yes,
so
back
to
this
arguments
we
have
a
start
date
and
then
the
end
date
so
to
track
which
date
we
are
made
which
they
were
making.
The
call
for
I
have
created
this
computer
called
property
called
start
date,
cursor,
which
is
either
the
current
start
date
cursor
that
initiates,
define
and
when
it's
undefined
it
fallbacks
to
the
start
date
and
the
start
date
is
basically
now
the
vulnerabilities
history
day
range,
which
is
this
30
days,
60
days
or
90
days
and
then
the
end
date.
It's
simply
the
started
cursor.
A
So
this
one
plus
the
the
interval
allowed
by
the
back
end
minus
1,
the
minus
1.
Here
it's
big
is
the
back
end.
For
some
reason,
it
chose
an
area
when
it's
10
days,
but
it
works
when
it's
9
days
so
I
could
either
change
this
variable
and
make
it
9
or
just
introduce
the
minus
1
here,
I,
don't
know
which
one
is
more
appropriate,
but
yeah.
A
So
here
we
will
have
a
start
date
and
then
the
end
date,
and
then
here
we
will
process
and
then
sort
the
data
and
then,
at
the
end,
if
the
end
date
does
not
equal.
Today,
we
are
basically
setting
the
current
start
date,
cursor
to
be
the
end
date
cursor,
the
previous
embed
cursor,
so
that
the
watcher
here
it
will
kick
in
and
then
it
will
be
fetch
the
query
with
the
new,
the
new,
the
new
arguments.
A
So
since
we
will
set
the
current
start
date
cursor
here,
this
will
take
precedence
and
the
start
date.
Cursor
will
be
then
the
previous
end
date
and
then
the
end
date
will
be
this
one
plus
this
again
maximum
the
interval
a
LOF
at
the
back
end,
and
then
this
will
go
till
it's
not
today.
So
this
will
create
a
loop
and
then
fetch
more
fetch.
The
data
in
multiple
check
chunks.
So
the
good
part
about
this
is
that
graph
key
all
caches
the
results.
A
Since
every
time
the
user
opens
this
page,
we
will
fetch
we
will
perform
multiple
queries.
I
changed
the
default
selected
value
here
previously
was
90
days
night.
Now,
if
I
refresh
the
page,
you
will
see
that
it
is
30
days
and
I
change
this
here,
it's
it's
because
I
thought
it
it
might
be
more.
We
could
save
some
resources
on
the
back
end.
A
If
the
user
is
not
interested
to
see
the
vulnerabilities
over
time
and
they're
just
looking
at
the
vulnerable
to
list
here,
it
doesn't
make
sense
for
us
to
to
fetch
nine
times
the
back
end.
If
the
user
is
really
interested
in
the
in
ninety
days,
they
can
just
click
here
and
then
it
will
start
the
process.
A
Okay,
here
the
data
is
changing,
but
you
cannot
see
it
because
I
only
have
two
vulnerabilities
and
never
fix
them.
So
my
data
is
not
exactly
perfect
for
the
demo,
but
you
can
see
the
date
here
that
actually
the
we
changed
the
chart,
so
it
comes
to
today
from
minus
90
days,
yeah
I.
Think
for
the
implementation.
That
said,
I
hope
this
will
be
helpful
for
the
reviewer
case.
There
are
some
questions,
I'm
happy
to
answer
them
thanks
for
watching
and
have
a
good
day.