►
From YouTube: Grafana UX Feedback Session 2020-12-02
Description
This week’s UX Feedback session covered: Student’s project presentation: application for Facility Managers (anomaly detection/forecast), Form validation modes, and Reusable panels: Demo of the current mockups and flow. Feel free to leave us comments here!
B
B
This
is
the
weekly
format,
where
everyone
can
book
time
to
talk
about
their
ux
work,
whether
you're
implementing
something
or
whether
you're
designing
something
it
doesn't
really
matter
show
what
you're
working
on
and
get
feedback.
We
also
have
a
note
stock,
where
the
agenda
also
lives
and
what's
important
about
this
meeting,
is
that
everyone
should
and
can
help
take
notes.
So
please
don't
leave
us
hanging,
it's
really
hard
to
follow
and
contribute,
while
also
taking
notes.
B
B
Thank
you
perfect,
all
right.
So
without
further
ado,
let's
jump
right
into
the
agenda.
I
will
be
time
boxing
today
because
we
are
tight
on
time.
I
will
just
send
chat
messages
when
it's
getting
close
and
I
will
ruthlessly
interrupt
you
if
you're
over
time
so
be
prepared.
Our
first
point
on
the
agenda
is
students,
project
presentation
of
30
minutes.
B
E
F
B
F
So
this
is
what
you
see
now
we
present
is
a
student
project
for
ux
and
product
design,
postgraduate
program
and
what
they
do.
They
go
through
a
whole
design
loop
with
a
project
and
graph
analysis
partner,
houston.
I
will
give
you
an
introduction
to
what
kind
of
use
case
we're
talking
about
for
this
specific
project
and
they
were
encouraged
to
use
as
much
as
possible
of
what's
in
grafana
already.
F
But
if
it's
like
not
enough
or
something
can
be
done
better
as
we
know
tons
of
stuff,
then
they
can
feel
free
to
come
up
with
new
ideas
and
solutions.
For
that
there
will
be
probably
a
lot
of
comments
regarding
feasibility
and
we're
well
aware
that
some
of
this
stuff
is
maybe
not
yet
possible
in
grafana.
F
But
please
remember
that
this
is
a
student
project
and
they
will
graduate
in
january
and
they're
looking
for
kind
of
very
specific
feedback.
But
all
kinds
of
feedback
is
welcome,
and
also
apart
from
that
wow,
are
we
20
people
today
and
before
we
start
just
one
question,
because
last
time
we
did
it
at
the
very
end.
F
We
are
recording
those
meetings,
as
always,
but
our
last
feedback
session
was
posted
on
youtube
and
if
that
will
be
okay
with
everyone,
we
would
like
to
post
this
as
well,
and
I
will
reach
out
to
you
or
if
you
feel
like
you,
don't
want
this
to
be
posted
for
some
reason.
Just
let
me
know
okay
and
then
we
will
not
do
that.
A
Yes,
okay,
so
we
are
blackbox.
Our
students
group
is
named
blackbox
as
well
as
our
project,
and
this
is
an
grafana
app
or
a
plugin
for
grafana,
based
on
rafana
solution
addressed
to
facility
managers
who
manage
whole
buildings,
building
complexes
or
rented
spaces,
for
example,
several
floors
in
an
office
building
and
this
solution
by
the
solution.
We
want
to
give
them
direct
data
view
from
data
gathered
by
bms,
which
is
building
management
system
in
an
intelligent,
intelligent
building.
A
A
The
animal
detection
uses
only
historical
data
from
the
building,
and
it
is
so
it
could
predict
the
normal
range
of
the
values
to
compare
this
range
with
the
data
we
actually
saw
in
a
building
and
so
that
we
could
identify
anomalies
in
real
time
in
our
solution,
user
can
also
create
a
set
of
custom
rules.
So
that
machine
learning
could
remodel
data
and
create
custom
forecasts
as
we
called
it.
A
A
A
A
If
we
want
further
information,
we
can
expand
this
row
and
read
more
information
about
this,
and
what
facility
manager
would
like
to
do
right
now,
probably
is
to
compare
this
chart.
This
energy
consumption
with
other
factors
that
occurs
in
the
building,
so
go
to
compare
to
function
and
select
a
series
which
wants
to
show
on
the
graph,
for
example,
number
of
occupants.
A
We
can
see
a
number
of
occupants
on
the
graph
and
in
the
table
below
we
can
see,
and
we
can
compare
values
from
that
very
same
day,
and
here
we
have
the
actual
number
exceeded
the
typical
one.
So
probably
a
facility
manager
can
assume
that
a
number
of
occupants
was
the
reason
of
this
anomaly
and
what
he
can
do
from
this
view
is
to
go
further
to
this
month,
and
we
can
see
that
on
this
graph,
the
yellow
line
showed
up.
A
A
He
can
go
even
further
to
the
next
month,
and
here
we
have
only
forecast,
and
one
more
thing
he
can
do
is
to
click
here
forecast.
He
can
show
some
information.
He
can
read
some
information
about
how
this
anomaly,
detection
and
machine
learn
based
on
machine
learning
works
right
now.
What
are
the
default
rules
and
if
he
switches
to
custom,
he
can
create
a
set
of
custom
rules
to
remodel
the
forecast
and
create
a
custom
forecast.
A
For
example,
you
can
change
occupancy
in
the
building
from
100
percent
to
a
lower
value
and
see
what
happens
with
the
energy
consumption
as
well.
You
can
change,
for
example,
time
which
this
the
anomaly
detection
is
based
on
and
by
default.
This
is
the
whole
history
of
the
building,
but
he
can
switch
it,
for
example,
to
use
past
sixth
months
for
this
calculation
we
click
run
forecast
and
we
can
see
that
a
new
line
showed
up
energy
consumption
custom
forecasts.
A
What
you
can
do
right
now
is
to
compare
these
two
graphs
and
see
the
summary
of
these
two
values,
and
we
can
save
custom
forecasts
from
here
and
give
it
a
name,
and
we
will
see
it
on
the
list
and
if
we
want
to,
we
can
swap
this
what
this
forecast
with
default
forecast
on
initial
dashboard.
If
I
check
this
and
click
save,
I
can
see
that
my
default
forecast,
which
was
yellow
before
was
switched,
was
turned
into
a
orange
one
and
which
is
custom,
forecast.
A
And
if
we
want
to
go
back
to
the
saved
forecast,
we
can
go
in
here.
This
would
be
forecast
view
and
we
will
store
all
the
saved
forecasts
in
here.
We
can
generate
again
or
store
it,
delete
it
or
and
so
on.
So
basically,
this
was
the.
This
is
the
whole
concept.
Our
idea
on
how
anomaly
detection
could
work
in
our
project.
B
I
really
enjoyed
this
very
interesting.
I
really
like
how
clear
your
dashboards
are
designed,
they're,
very
compact
and
on
point,
so
it's
very
easy
for
me
to
understand.
What's
going
on,
and
I
know
where
to
look,
I
have
some
visual
feedback
in
this
dashboard
that
you're
presenting
right
now
for
the
consumption
and
the
cost.
B
I
think
it's
a
very
interesting
idea
to
show
the
forecast
as
the
borders
around
the
bar
chart,
but
I
feel
like
the
differences
like
if
it's
just
like
a
very
tiny
difference
between
your
forecast
and
the
actual
number
it's
really
hard
to
tell
like.
Is
there
a
pixel
of
difference,
or
is
it
just
fill
like?
Is
the
blue
bar
bigger
how
much
bigger
is
it
so
like?
I'm,
not
sure
I
would
do
it
this
way.
B
Maybe
it
would
be
easier
to
just
have
two
bars
next
to
each
other
to
be
able
to
compare
or
I'm
not
sure
whether
you
have
explored
using
other
visualization
types.
Maybe
just
use
two
line
graphs
instead
of
the
bars,
I
don't
know
just
a
spitballing,
but
that's
something
that
I
would
maybe
consider
changing
just
to
make
it
a
bit
easier
to
tell
like
where
the
forecast
is
different.
A
B
A
A
B
For
the
icon,
it
sort
of
works
a
little
better,
but
especially
the
text
there
like.
I
am
a
normally
sighted
person.
I
am
not
colorblind,
but
I
already
have
trouble
reading
the
text
because,
like
the
contrast
is
not
so
big
and
the
text
is
kind
of
thin
and
colorblind
people
there's
a
certain
kind
of
color
blindness
where
people
have
trouble
seeing
red
on
black.
So
maybe
it
would
be
better
to
use
a
lighter
color.
Maybe
I
don't
know
material
design
uses
this
sort
of
pink
or
you
could
try
orange
just.
B
G
G
So
had
a
really
quick
bit
of
feedback.
This
is
a
I
really
liked
the
modal
text
that
popped
up
in
the
forecast.
When
you
clicked
that
button,
it
was
very
clear
and
as
a
as
a
new
user
of
this
tool,
I
could
see
that
that
would
be
very
helpful
to
me
to
learn
how
to
use
this
also
great
labels
in
your
ui
so
and
it
this
whole
thing
kind
of
tells
a
good
story.
G
A
A
H
C
A
A
F
So,
okay,
so
if
I
understand
correctly
apart
from
number
of
occupants,
what
you
can
also
have
here
is,
for
instance,
the
temperature
outside,
so
when
it
gets
colder,
the
energy
consumption
goes
up
because
the
heating
goes
up
and
such
right.
So
there
will
be
a
number
of
factors
that
you
will
consider.
F
The
other
thing
actually
had
a
good
idea.
I
mean
what,
if
this
person
that
this
facility
manager
could,
when
he
gets
notified,
that
there
was
an
anomaly
in
energy
consumption
and
he
can
look
at
this
different
data
and
somehow
manually
teach
the
algorithm
that
okay,
in
this
case
it
was
number
of
occupants
other
case
it
was,
I
don't
know,
drop
in
temperature
or
whatever.
So
it's
not
so
you
kind
of
show
the
system
how
to
interpret
data.
It
makes
sense.
I
need
someone
technical
to
weigh
in
on
this
crazy
idea.
A
C
C
I
So
I
like
that
you
have
them
on
the
right
side,
I'm
wondering
if
you
could
use
some
sort
of
visual
treatment
like
color
or
like
an
up
and
down
arrow,
to
show
if
it's
like,
expected
or
not
like
if
it
is
a
concerning
number
or
if
it's
normal
and
you
shouldn't
have
to
pay
attention
to
it,
you
could
use
color.
Another
visual
indicator
too,
show
that.
A
F
G
And
thanks
for
presenting
this
guys,
this
is
very
interesting.
One
question
I
did
have
that
you
might
want
to
think
about
for
the
next
time
or
when
you
write
up
conclusions
or
whatever
is
what
am
I
trying
as
a
facility
manager,
it's
like
okay,
good
to
know
anomalies,
but
why
do
I
want
to
know
the
anomalies?
G
G
A
A
So
if
he,
if
he
has
an
invoice
that
was
much
higher
than
a
typical
one,
he
wants
to
know
why
this
invoice
was
so
high
and
so
that
he
could
explain
it
to
the
boss
and
check
out.
If
maybe
something
is
broken,
or
maybe
one
saturday,
there
was
an
event
in
a
building.
So
this
is
actually
an
explanation
of
the
higher
invoice
in
this
month.
A
So
what
the
fascinat
facility
manager
is
trying
to
do
here
is
to
rather
investigate
the
past
and
not
to
prevent
the
future
behavior
of
the
building,
because
he
or
she
doesn't
actually
have
such
impact
on
the
building.
He
or
she
couldn't
change
the
parameters
in
the
building,
because
this
is
a
technical
part
which
is.
F
B
G
J
We
can
see
it
grafana
cloud
alerting
awesome,
so
we
had
a
discussion
on
cloudfront
and
squad
about
forum
validation
modes.
We
wanted
to
standardize
our
approach
a
little
bit
because
we
found
out
that
we
do
it
quite
differently
in
different
plugins,
based
on
the
preferences
of
whoever
is
developing
it,
but
we
failed
to
reach
some
consensus.
J
We
wanted
to
ask
your
opinions
now:
front-end
validation
mode
is
basically
a
trigger
on
which
a
form
is
validated
and
errors
are
shown
to
the
user
if
there
are
any-
and
there
are
some
choices
for
this,
so
the
form
library
that
we
use
by
default
has
a
validation
mode
where
it
will
first
validate
the
form.
Only
when
submit
is
clicked,
but
after
submit
button
has
been
clicked
once
it
will
validate
on
every
change,
basically
on
every
keystroke.
J
J
C
I
would
say
I'm
personally
a
big
fan
of
like
if
I
enter
like
a
new
name
or
something
for
organization.
It
will
automatically
just
save
to
change
like
google
docs,
but
right
now
in
the
settings
like
let's
say
you,
you
change
the
organization
name,
you
have
to
click,
save
before
anything
happens
and
you
get
an
error
code
and
I
see
it
seems
like
that
is
the
pattern
across
grafana
at
the
moment
that
you
have
to
click,
save
or
test
or
something
before
something
happens.
J
J
F
J
F
J
J
J
This
is
more
about
yeah,
like
syntax
error,
wrong,
email
address,
or
maybe
some
duplicate
fields,
things
that
you
can
validate
immediately.
There
are
things
that
are
sort
of
like
tests,
but
there
you
have
no
choice
most
of
the
time
except
to
click
on
save,
because
you
need
to
make
a
request
back-end.
C
I
guess,
then,
what
diana
is
saying
on
blur
kind
of
makes
sense,
because
then
it's
like,
I
typed
in
my
email
address
and
it
it
tells
me
like
hey,
you're,
missing
the
ad
or
dot
com.
I
can
see
that
so
that
seems
to
make
sense.
One
question
I
have
like
what
happens
if
this
error
code
is
super
long
like
and
this
arrow
message
just
explodes,
because
I
have
scenarios
where
I
clicked
the
test
button
and
the
arrow
just
exploded
and
took
off
the
whole
screen.
J
F
B
K
K
D
And
one
quick
thought
someone
had
said
that
the
error
message
was
distracting
if
it's
up
there
persistently
and
it
definitely
does
grab
a
lot
of
attention,
just
a
thought.
Can
we
tone
down
the
appearance
of
that
error
message
if
it
is
going
to
be
large
or
it's
going
to
be
continuously
on
screen
like
just
have
a
red
accent
or
something
but
keep
the
message
itself
or.
F
H
F
B
Yeah
so
far,
I
think
like
we're
still
using
the
this
type
of
validation
design,
where
it's
kind
of
like
a
tooltip
that
just
pushes
the
content
down,
but
I
think
the
way
we're
intending
to
use
it
is
not
to
show
like
huge
error
messages.
It
should
be
compact
if
we
use
it
in
this
style.
So
if
that's
a
use
case
that
we
need
to
show
very
big,
extensive
error
messages,
then
maybe
we
just
need
a
different
design
for
the
validation
message.
G
Also
to
play
devil's
advocate
here,
so
this
is
grafana
cloud,
not
grafana,
on-prem
and
they've
been
trying
to
differentiate
cloud
folks
have
been
trying
to
differentiate
themselves
from
grafana
on-prem.
So
if
there
is
some
difference
here
that
would
be
more
acceptable
than
in
you
know,
grafana
as
a
whole,
because
this
particular
subsection
is
grafana
cloud.
However,
where,
as
has
been
pointed
out,
getting
away
from
form
validation,
so.
J
J
Yeah
so
so
far
we're
trying
we
are
using
the
the
same
ui
components
as
the
choreographana
and
we're
aiming
for
the
same
look
and
feel,
but
here
we're
doing
nothing
special
towards
how
we
show
this
er
we're
just
using
the
standard
component.
That
is,
I
think,
used
across
the
core.
So
any
changes
to
the
component
library
would
be
reflected
on
how
errors
are
shown
here.
H
B
B
B
B
So
that
means
that
in
the
future
you
will
have
the
opportunity
to
pick
a
panel
from
a
dashboard
that
you
really
like
and
just
implement
that
same
panel
in
your
own
dashboard.
And
if
someone
changes
that
panel,
the
chains
will
reflect
in
all
the
places
where
this
panel
is
being
used
and,
of
course,
as
a
user,
there's
a
lot
of
different
ways
to
potentially
use
those
panels
or
tweak
those
panels.
B
So
we
basically
have
a
user
flow
here
and
before
we
get
into
that
flow.
Just
one
quick
note.
So
in
an
ideal
world
scenario,
I
would
really
like
these
reusable
panels
to
have
a
graph
preview
so
that
it's
easier
for
the
user
to
understand
how
this
was
that
panel
or
that's
what
that
panel
is
doing.
But
for
the
mvp
we
will
probably
just
use
text
based
previews,
just
because
it's
technically
difficult
to
generate
these
preview
images
and
that's
something
that
we
still
have
to
technically
solve.
B
So
there
is
a
model
that
says
this
panel
expects
these
template
variables.
Graffana
will
import
them.
Is
that
okay-
and
you
can
say
yes,
I
want
to
import
this
or
no.
I
don't
want
to
do
this
after
all,
and
if
you
click
yes,
then
you
get
this
reusable
panel
here
and
there
is
just
an
icon
as
a
visual
indicator
that
it's
not
a
regular
panel
but
a
reusable
panel.
B
This
icon
is
more
of
a
placeholder,
so
this
is
not
final,
but
roughly
this
sort
of
design
is
what
we
are
aiming
for
and
then
the
context
menu
is
basically
the
same
as
with
any
other
panel.
So
if
you
see
a
reusable
panel
in
a
dashboard
and
you
like
it,
you
could
via
more
and
copy
just
copy
it
to
your
own
panel,
and
that
way
you
could
sort
of
create
this
infinite
chain
of
reusable
panels,
and
then
you
also
have
the
option
to
edit
the
reusable
panel.
B
Of
course,
so
we
contemplated
whether
the
usable
panel
should
have
a
different
editing
environment
because
of
course,
changing
a
reusable
panel
that
is
implemented
in
potentially
hundreds
of
places
could
have
big
consequences
right.
So,
in
order
to
keep
the
interface
simple
and
clear
to
the
user,
it
will
be
kind
of
similar
to
the
current
panel,
edit
we're
thinking
to
have
a
different
header.
That
says
clearly
you're
editing
a
reusable
panel
right
now
and
then
the
options
in
the
top
here
change
slightly.
So
for
your
reusable
panels.
B
You
will
also
have
the
option
to
unlink
your
reusable
panel
in
order
to
tweak
it
without
changing
all
the
other
instances,
and
then
we
want
to
add
a
little
bit
of
panel
metadata
so
on
how
many
dashboards
is
this
used?
Who
edited
this
panel
last
and
we
were
thinking
about
showing
the
associated
template
variables,
but
it
seems
that
it's
technically
difficult
and
also
the
our
a
deal
customer
who
we
showed
this.
Who
said
it's
not
that
important
of
an
information?
B
So
for
unlinking,
that's
quite
simple:
you
just
get
a
model
like.
Are
you
really
sure
you
cannot
like
merge
it
back,
and
then
you
can
say
yes
or
no,
and
if
you
want
to
update
this
is
a
bit
tricky.
So
the
current
plan
is
you
get
a
modal
that
says
how
many
dashboards
your
change
will
affect,
and
then
we
just
want
to
list
the
dashboards
and
like
currently
we're
thinking,
maybe
just
sorting
by
last
edited.
B
What
do
I
want
to
watch
out
for
because
if
I
have
hundreds
of
dashboards
here,
then
probably
I
don't
want
to
go
through
the
list,
but
maybe
if
I
know
my
top
dashboards,
I
can
at
least
search
for
them,
but
this
is
tricky
like
if
you
have
a
good
idea
how
we
can
show
like
these
other
places
where
you
should
look
at,
because
there
the
change
might
be
breaking
or
problematic
like.
That
would
be
great.
We
haven't
fully
solved
this
yet
yeah.
B
B
B
B
So
we
have
thought
about
whether
we
should
show
shared
panels
just
in
the
folders,
with
dashboards
or
not,
and
the
problem
is
that
currently,
the
entire
permissions
management
of
grafana
is
part
of
the
folder
management,
so
it
seems
really
tricky
to
decouple
shared
panels
from
folders
completely
so
for
now
we
think
it's
easier
to
just
leave
the
panels
in
with
the
folders.
So
basically,
we
want
to
introduce
just
different
types
of
content
that
can
be
in
the
refiner
folders,
so
we
will
have
dashboards
and
then
additionally,
also
the
shared
panels
directly
in
the
folder.
B
You
will
have
the
same
tags
in
the
future.
You
will
also
be
able
to
filter
by
type.
So
if
you
just
want
to
filter
for
dashboards,
you
can
just
remove
the
other
stuff
or
like
add
filters
here.
I
used
a
drop
down
with
tags
because
I'm
not
sure
how
many
different
types
of
content
we
might
introduce
in
the
future,
because
alerts
might
be
part
of
that,
I'm
not
sure
whether
they
will
be
in
the
folders,
maybe
not,
but
theoretically
we
could
have
more.
So
I'm
thinking
this
probably
scales
well
and
then
in
the
search.
B
B
F
G
F
F
That
there
is
this
option
to
copy
reusable
panel
is
very
hidden
under
the
submanu.
So
that
is
something
I
would
consider
like.
If
that's
a
reusable
panel,
this,
I
don't
know,
could
be
a
very
important
option
and
also
it
yeah.
I
have
an
impression
that
you
can
make
a
panel
reusable
once
you
once
it's
saved
and,
like
all
is
done
with
the
panel
you
saved
it
and
only
then
you
can
decide
okay,
make
it
reusable,
wouldn't
it
make
sense
to
also
have
a
chance
to
start
like.
F
F
Those
yeah
previous
right
they're,
like
description
based
now,
so
maybe
I
would
have
a
button
to
click
the
preview
of
the
visualization.
I
mean
the
whole
correct
me
if
I'm
wrong,
but
the
whole
thing
about
those
reusable
panels.
One
of
the
reasons
is
is
that
they
have
great
visualizations
also,
and
that,
given
my
conversations
with
clients
could
be
one
of
the
reasons
why
people
want
to.
B
Panel,
you,
those
are
great
points.
I
hope
someone
took
notes
because
I
was
just
listening,
but
there
are
some
great
suggestions
here.
Marcos
also
wrote
something
in
the
chat
just
now,
which
I
think
is
a
good
idea
awesome.
I
will
explore
all
of
that,
of
course
feel
free
to
add
more
comments
into
the
dog
or
send
me
messages
on
slack
or
whatever.
You
know
how
to
reach
me,
but
we're
out
of
time.
So
I
will
stop
sharing
now
super.