[upbeat rock music]
>>Hey there.
Good to see you.
Welcome, welcome everybody.
So I have a question for y'all. Yeah, hello.
Who here is ready to get noticed?
Who's ready to be more assertive?
Who is ready to take your game to 11?
In my simple four-stage process,
we can totally do that for you.
But time is short and I wanna make sure
you get the most for your money,
so let's get started.
Picture this scenario.
You have a database server
and you got yourself a log drive and it starts to fill.
And that happens.
And then all of a sudden, that drive runs out of space.
Okay? But no one looked at that alert.
You follow me?
So then you have a problem with another drive.
All of a sudden things start slowing down.
Database stops working.
All of a sudden the applications are having problems, right?
This happens, but people ignored the first alert,
so you didn't get noticed.
No one knows this is a problem.
All of a sudden, your end users start calling
and your end users are calling and they're saying,
"Hey, I can't get to my stuff."
And you say, "Whoa, Whoa, Whoa. I didn't know about that."
So the real question is, who benefits from an ignored alert?
>>Nobody.
>>That's right, nobody.
For me, as an alert life coach,
I find it better to work with real life alert situations.
So do we have someone from the audience?
Anybody? Yes, you sir.
In the black, white, and gray in the front row.
Thank you.
Can you please tell us your story?
>>Hi, I am a web server low on space.
>>Fantastic, it's great to have you here today.
Thank you so much.
And thank you for being brave for telling your story.
Now, I need to ask you a question.
So what happened the last time you interacted with somebody?
>>Yeah, an issue in an object during monitoring occurred
on Wednesday at 11:37 a.m.
View the log for details here,
Colon, HTTPS, colon slash slash local slash
[ominous music rises]
>>Okay I'm gonna stop you right there.
So I need to ask you a very, very personal question.
Are you a plain text alert?
>>Yes, sir. I am.
And I include links to show more details.
>>But do you ever actually mention what the problem is?
Do you ever say what thresholds have been violated?
Do you ever actually come out and say
what the issue is and why it needs attention right now?
>>I include links to show more details.
>>Thank you so much web server with low disk space,
for sharing that with us.
A question for the rest of the audience.
How many here are plain text alerts?
[audience grumbles]
So, one of the easiest ways for plain alerts
to kind of get some notice is to kind of punch it
up a little bit, add a little pizazz,
make sure you go from plain to panache,
from drab to dynamic.
To make sure you go from lackluster to blockbuster.
And how do you do that?
A little bit of HTML and CSS is all it takes.
[crystals jangle together]
Just like collecting the information
and understanding what's important to your stakeholders,
there are also four phases to alert success
and we're gonna have to go over them individually.
The first one is all about collecting the data
that you're gonna present.
You already got this information from your stakeholders.
You had those conversations,
you needed to understand what information
is gonna make your alert actionable.
Once you have that information,
we can go into Orion and go ahead
and pull that information out so you can organize it later.
Let's go ahead and see what we can do
for web server low on space.
I already have some trigger actions defined here
and a couple escalation levels
but let's go ahead and build another email message.
So we'll go ahead and add an action.
Send an email/page.
We'll have to give it a good name.
We'll select the recipients.
And then we'll get into the message.
This is the important part.
This is the way that all new alerts get generated
and it is incredibly generic.
It is completely functional
but horrifically lacking details.
So I wanna go ahead and build a list of what details I want.
So the first thing I'm gonna do
just for record-keeping purposes is strike out everything.
I don't recommend you do this frequently
but if you have an alert you can play with,
this is the best way to do it.
And now I wanna go ahead and start inserting variables.
And I think of variables in one of two ways.
I think variables that are very specific
for the alert itself
and ones that are very specific for the triggered object.
So we're gonna go ahead and start with the alerts.
And here, I wanna grab everything I think is important,
whether I'm gonna use it or not at the end
but everything I feel is important here
to provide to the individual
who's going to interact with this alert.
So there's some information I want
in every single alert I send to someone.
There's always the alert description.
There's always the alert message.
There's always gonna be the alert name.
I want the time of this current trigger
and probably the number of times
it has been triggered overall.
And last but not least, the severity.
I'm gonna go ahead and insert those variables.
You can see they're all here.
And what I'm gonna do is I'm gonna take all this,
I'm gonna grab it all
and I'm gonna put it in a plain text file.
So these are all my alert variables.
Now they've each just been separated with spaces
but for me, I like to go ahead and separate them,
so they're each on their own lines.
This is just a way that I keep this information organized.
And then I give it a little description.
This one is alert-based variables. Excellent.
Those are all the variables about the alert itself.
When it was triggered, what the name of it is,
those kinds of things.
But now I need to know information
about the object, in this case of volume.
So let's go ahead, strike all that out
and we'll insert new variables.
This time, we will do it for the volume.
Since there can be literally hundreds of variables
bound to the specific target entity type,
you probably wanna have something specific in mind.
So for me, I'm gonna go ahead and select a hard drive
I know is on a web server.
So I will click change.
I will search for EASTWEB
and I will select the first hard drive.
So now we're specifically looking at EASTWEB core 01v
and the C drive on that machine.
So any alerts I pick from here will give you
an output preview commensurate with that device.
So we wanna look for the amount of free space available
and all things space-related
are probably gonna have the word space in them.
So let's go ahead and see that.
There we go.
We have a recap of the alert name.
Here's our available space.
Let's go ahead and select that.
Let's select our thresholds for critical.
The current value, how much space has been used.
One of the things we're missing here though
is the actual name of the volume
and in Orion, most things for names are called caption.
So we'll look for captions and here we go.
Here's the caption for the drive.
Here's the caption for the node.
You can see, it's even mentioned
that this is specifically for the node
and I think that's probably enough.
So let's go ahead and insert the variables.
Again, I'm gonna grab all of these,
move them over to a notepad,
create a new area called triggered object,
and paste in the variables.
Again, just a little bit of formatting.
Alright, so I think we have everything we need
to actually build an alert now.
So let's go ahead and do some very, very basic HTML
and just frame it out.
Once we've collected the information we wanna present,
we kind of have to decide how we wanna organize it.
For me, an alert of this magnitude
needs some very specific information.
So, I always picture it as a table
and above that table, I have the alert details.
That is the name of the alert,
that is the time it was triggered.
That was the threshold information.
And then in the table, I wanna have
the specifics for the targeted device.
So, I would have a whole bunch of lines
with the table, with a description
and then the numbers or the names.
Below it, I'll also put
like some acknowledgement information
and maybe a link directly back to the alert.
So maybe a URL here or something like that.
So that's it.
That's my layout.
You can also include things like bullet lists,
links and large text blocks.
Any of these things are fine.
So let's go ahead and mock that up real quickly in HTML.
If you're not comfortable writing HTML
kind of from scratch, using something like Notepad,
you can always use a WYSIWYG editor.
In the past, I've used Adobe Dreamweaver,
I've used Aloha Editor, and I've used Notepad++ in a pinch.
But today, I'm gonna go ahead and show you
how to use Microsoft Visual Studio Code,
and I've added the extensions IntelliSense
for CSS names and HTML, live server,
and prettier code formatter.
If we go back to my mock-up and design,
I want alert details at the top.
So that's pretty easy.
We'll just go ahead and select the alert variables.
We'll copy them and we'll put 'em in HTML form.
Now, if you wanna talk about the very basics,
let's go ahead and wrap these.
That's a paragraph tag
and then HTML always closes with a slash tag.
So /p for paragraph close a paragraph
and we'll just do that down.
Then we're gonna want a table to build a table in HTML.
Table.
VS Code automatically closes tags for you,
which is really nice.
Then we define a table row
and then we define a table cell and let's go ahead
and put some of the node information in there.
So this one, we'll do just one at a time.
Volume space available.
And because this variable and the other ones like it
are gonna come in as pure numbers,
we need some type of description.
Now for me, I do that with what's called a table header.
So that is th and then volume space available.
I'll go ahead and save that.
And now, because we have the live server installed,
I can just hit down here, go live.
And this is what it looks like.
Right now, it is, of course, very plain
but you can see the table beginning to take shape.
So to make the table a little more obvious,
let's go ahead and put on a border.
Border equals one.
Now it's in red and that's intentional.
We'll come back to that
when we actually style it with CSS.
Re-save it, go back, refresh, and there you go.
You can see the border.
So you can see how the table can actually start to build.
Then I can just repeat this row,
over and over again, for the other variables.
Re-save, go back to the browser, refresh.
It's all it takes.
Now what we're looking at here
isn't much better than a plain text alert.
So let's go ahead and really kind of pretty it up.
But for that, I'm gonna start with the template
that I've already built.
This template has everything you need to get started.
It's a doc type define it is the open HTML tag,
the opening close head tags
with all the styles and information.
Then the body tag and tables
and a bunch of information on it.
This is a template I can use for all alerts
because it's very, very generic.
What we're gonna do next is define some CSS
that actually changes the way the HTML
is interpreted and displayed.
We'll just start with defining an alert header description.
So this is .alertheader, open curly braces,
some details about it.
We want the font size a little bit up.
We want the color to be a certain way.
We want it aligned. We want it weighted.
Here, we're defining our own CSS style.
Now I prefer to do this stuff in CSS.
You can always do this in the individual tags
with the style element but then
if you make a change somewhere, it's not global.
You gotta go and hunt it out and find it.
So if we take this alert header definition
then I can just add the class tag here
Equals alert header.
And let's go ahead and save that.
And as before, let's preview it.
And although this is very plain,
you can see that the alert description here
did get changed, based around
that CSS class that was assigned.
So let's go ahead and define a couple more.
If you're not familiar with CSS,
you'll notice that this definition
starts with a dot or a period
and what that means is this is a custom class you've built
but one of the things that's really interesting you can do
with CSS is rebrand, recolor,
and restyle existing HTML tags.
So here, you can see that I'm using table header,
table, header, table header.
I'm using it repeatedly.
So let's go ahead and build a CSS style for that.
For that one, you omit the dot
and then you just fill in the information as before.
In this case, I selected the same font family.
I selected a slightly different font size, bold white
and the reason I chose white for the foreground color
is 'cause the background color
is going to go to this orange.
Same thing as before, make sure we align it to the left
and vertically aligned to middle.
Now, if you notice before, table header elements
are all center-aligned and automatically bolded
but after I make this change,
you can see they have now all gone left aligned.
They're still bolded
but they're white with an orange backdrop.
If you really need to draw someone's eye,
there's nothing better than using colors like this,
especially if you have them tied
to like a yellow for a warning event
or red for a critical event.
And I'm just gonna go ahead and use the CSS
that I've been using for a while now.
So it has the alert header definition,
the alert description definition, details, table.
The metrics table has a slightly different feel.
Table header has been redone.
Table cell has been redone
and I'm actually changing the body,
so it's not quite white.
So if I save that, go over. Interesting.
So you can see the background may be difficult to see.
It's not quite pure white,
so it's slightly easier on the eyes
but we haven't really applied any of those tags anywhere.
By redefining a tag like the td tag,
I don't actually have to apply
this class information anymore.
It's been inherited.
I can strike that out and it immediately takes effect.
So now all of my detail information looks the same.
Now, maybe this green is not so easy on the eyes.
So if we wanna change that, at least in Visual Studio Code,
all you have to do is click on the color
and select a different color.
Maybe I want something in the blue family.
So let's go ahead and bring it down here.
Bluish purple. There you go.
Little easier on the eyes.
After playing with the styling a little bit
and making sure it meets your requirements
and also meets those of your stakeholders
and the people receiving these alerts,
You're pretty much done
and this is what the final alert would look like
in my environment for web server, low on disk space.
So here's the one I've built
and we'll go ahead and look at the live preview.
And there you go.
So I've gone a little bit above and beyond on this.
I've made sure we just have the information there
that says exactly why it was triggered,
what it looks like, any previous steps that have been done.
And at the bottom, we have the information
to be able to acknowledge this alert
and also a full description of the alert.
Now that I know that's what I want,
I can just copy it all
and paste the whole thing in as my message.
Of course, finish out by selecting your server,
time of day, execution settings.
And that's it.
So here it is, email server admins.
And then if I wanna see what it'll actually look like
with real data in it, I can select my element and simulate.
And there you go.
We have the full definition of what the alert is,
what work we've already done on it, the node, the volume,
including status icons and device icons.
[audience applaud]
So is that so hard?
>>No.
>>No, no, no. Was that so hard?
>>No!
>>Exactly.
With just a little bit of work,
you too can get noticed and that's it for me today.
I wanna thank everyone for being a part of this.
Thank you so much, web server with low disk space
for being our volunteer.
And I am Kevin Sparenberg.
Please be sure to sign up for my next seminar,
"Why Informational Alerts Should Just Be Reports"
and that's it for me.
Thank you. Thank you.
[audience applauds]