Upload
ngothu
View
227
Download
4
Embed Size (px)
Citation preview
2
C o n t e n t
I n t r o d u c t I o n
I c o n c o L L E c t I o n
I c o n L A B E L I n G
c o L o r S
A r r o W S A n d t E X t B o X E S
S P E c I A L c A S E S
d I A G r A M E X A M P L E S
4
I n t r o d u C t I o nThis document serves to list the full collection of documentation icons as well as
provide basic guidelines for appropriately using the icons to best effect.
6
directory Inputs,Mac
documentsdocumentdirectory Inputs,Linux
directory Input,Windows
directory Input,Solaris
directory Inputs directory Inputs,Solaris
directory Inputs,Windows
directories directory Input,Mac
directory Input,Linux
desktopdatabase datastores
database datastore
deployment ‘Server
directory directory Input
File Input File Input,Windows
File Input,Solaris
Field(for small sizes)
event (for small sizes)
event Field File Input,Linux
File Input,Mac
File Inputs,Windows
Forwarder, Mac
Forwarder, Linux
File Inputs,Solaris
File Inputs,Linux
File Inputs File Inputs,Mac
Firewall Forwarder
Configuration File
datastoresdatastoreBucketAlertAdd-on App data Model data Model object
7
Heavy Forwarder Heavy Forwarder,Linux
Heavy Forwarder,Mac
Heavy Forwarder,Solaris
Heavy Forwarder,Windows
Heavy Forwarders Heavy Forwarders,Linux
Heavy Forwarders,Mac
Heavy Forwarders,Solaris
Forwarder,Solaris
Forwarder,Windows
Forwarder With Load Balancer
Forwarder Withrouter
Forwarders Forwarders,Linux
Forwarders,Mac
Forwarders,Solaris
Forwarders,Windows
Heavy Forwarders,Windows
Heavy Forwarder With router
Index Indexes Indexer Indexer, Linux
Indexer, Mac
Indexer, Solaris
Indexer, Windows
Indexer With router
Indexers Indexers,Linux
Indexers,Mac
Indexers,Solaris
Indexers,Windows
Indexing Queue Knowledge object Laptop
License License Server Load Balancer Log File Lookup Master Cluster node
network Input network Input,Linux
network Input,Mac
8
Systems,Solaris
Systems,Windows
Systems Systems,Linux
Systems,Mac
System,Installed App
tag
Summaries SystemSettings Splunk Instance Summary System,Linux
System,Mac
System,Solaris
System,Windows
People Personnetwork Input,Solaris
network Input,Windows
Parsing Queue Pipeline Pool Queue report
Saved Search Scriptreports router (Physical)
router Scripted Input Search Search Head Search Head,Linux
Search Head With Load Balancer
Search HeadsSearch Head,Mac
Search Head,Solaris
Search Head,WIndows
Search Heads,Linux
Search Heads,Mac
Search Heads,Solaris
Search Heads,Windows
11
Indexer Indexer
L A B e L t y P e FA C e G u I d e L I n e S
The preferred font for all labels is Gotham narrow Bold set at 15pt/18pt (the type
sizes change as the icon scales up and down) with neutral tracking. When Gotham
Narrow Bold is not available, the labels should use Arial narrow Bold set at
16pt/19pt with 0.03 tracking. A good rule is to roughly size Arial labels set in Arial
Narrow Bold 7% larger than Gotham Narrow Bold.
Gotham Narrow Bold14pt/ 18ptNo tracking
Aria l Narrow Bold15pt/ 19pt0.03em Tracking
G otH A M n A r roW
ABCdeFGHIJKLMnoPQrStuVWXyZ abcdefghijklmnopqrstuvwxyz1234567890
A r IA L n A r roW
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz1234567890
12
Indexer
Indexer Indexer Indexer IndeXer
L A B e L t y P o G r A P H I C G u I d e L I n e S
The labels should never be set in a font or weight not specified in the styleguide or a
different weight. Labels should not be set in all uppercase of lowercase letters.
13
Heavy Forwarder With router
Forwarder, Mac
Heavy Forwarder With router
Indexer
L A B e L P L A C e M e n t G u I d e L I n e S
The optimal placement for a label is directly below an icon. However, if an icon’s label
must be placed elsewhere, the label can be placed above or to the side of an icon.
When an icon is placed to the side of an icon, the text should be vertically centered
with the icon and justified to the side adjacent to the icon.
14
Heavy Forwarder
With router
Heavy Forwarder
With router
Heavy Forwarder
With router
L A B e L P L A C e M e n t G u I d e L I n e S ( C o n t. )
Whenever possible, place all labels in a diagram on the same side of the icons.
15
Indexer
IndexerIndexer
Forwarder, Mac
Forwarder, Mac
Forwarder, Mac
6px18px
L A B e L P L A C e M e n t A n d I C o n A L I G n M e n t G u I d e L I n e S
An icon’s label should not be influenced by any modifier. The label’s vertical
placement should be positioned as if the modifier does not exist. This rule
applies for the vertical alignment of icons.
16
Heavy Forwarder With router
Heavy Forwarder
With router
Heavy Forwarder With router
L A B e L t e X t B o X G u I d e L I n e S
The text box should be roughly 150% - 200% the width of the icon. Regardless of width,
the text should be as evenly distributed across the lines as possible. When possible the
top line should be longer than the lower lines.
In this example, the label should be manually broken into two lines so that the label does not have such a wide profile.
17
G u I d e L I n e S F o r S C A L I n G I C o n S u P
The label’s font size does not increase linearly with the icon. Below is the
basic guideline for scaling a label up with an icon.
IndexerIndexer
The label’s font size does not increase linearly with icon. The larger the icon gets, the less the label’s font size increases.
As icon size increases, the space between icon and label tightens.
18
Indexer
G u I d e L I n e S F o r S C A L I n G I C o n S d o W n
The label’s font size does not decrease linearly with the icon. Below is the basic
guideline for scaling a label down with an icon.
IndexerThe smaller the icon gets, the less the label’s font size decreases. The label should never go lower than 8pt.
As icon size decreases, the space between icon and label loosens.
19
G r o u P L A B e L G u I d e L I n e S
A group label is communicated with a 1px-stroke black bracket to the left of all
grouped elements. The label should be vertically center aligned to the bracket.
The group label should be given the same type treatment (e.g., typeface, font size,
leading and tracking) as an icon label.
40px
20px
9px
9px
Group Label
20
40px
20px
9px
9px
Group Label
G r o u P L A B e L G u I d e L I n e S ( C o n t. )
When a group contains icons of varying height, the bracket extends to the height
of the tallest icon to the bottom of the icon, regardless if the icon is labeled. The
group label remains vertically centered with the bracket. Group brackets ignore the
decender of icon modifiers (such as operating system).
Indexer WithLoad Balancer
System,Windows
Indexer
21
Group Label
r o W S C o n tA I n I n G M o r e t H A n A S I n G L e G r o u P
If a row is not wholly comprised of a single group, a closing bracket should be added
at its tail end denoting where the group ends. The element immediately following the
group should be spaced 80px away from the group’s end backet.
40px 40px 80px
22
G r o u P L A B e L G u I d e L I n e S ( C o n t I n u e d )
In the case where multiple rows need to be labeled, all rules from the previous page
still apply. The spacing, proportions and alignment do not change.
Indexers
Forwarders
24
I C o n A n d A r r o W C o L o r PA L e t t e
The suggested colors for icons and arrows are listed below. The primary colors should
be the first choice for coloring icons and arrows with the secondary colors providing
extra options when different colors are needed.
b l ac k
b l ac k
C0 / m 0 / Y0 / k 1 0 0 r 0 / G 0 / B 0 h E x / 0 0 0 0 0 0
PMS cOOl GRaY 7
s p l u n k g r ay
C 2 0 / m 1 4 / Y 1 2 / k4 0r 1 5 1 / G 1 5 3 / B 1 5 5 h E x / 97 9 9 9 B
Pr I M A ry Co Lo r S
S eCo n dA ry Co Lo r S
PMS 381
PMS 7469
da r k b l u e
c 1 0 0 / m 3 1 / y8 / k4 2 R 0 / G 9 5 / B 13 4 He x / 0 0 5 F 8 6
PMS 180
r e d
c 17 / m 9 1 / y8 9 / k6 R 2 0 8 / G 3 2 / B 3 1 He x / d 02 01 F
o r a n g e
c0 / m 62 / y9 5 / k0 R 2 3 2 / G 1 1 9 / B 3 4He x / e 87 7 2 2
PMS 158 PMS 130PMS 2995
l i g h t b l u e
c 8 3 / m 1 / y0 / k0 R 0 / G 1 69 / B 2 2 4 He x / 0 0A 9 e 0
l i g h t o r a n g e
c0 / m 3 0 / y 1 0 0 / k0 R 2 4 2 / G 1 69 / B 0 He x / F 2 A 9 0 0
c h a r t r e u s e
c 2 5 / m 0/ y9 8 / k0 R 2 0 6 / G 2 2 0 / B 0He x / C e d C0 0
PMS 369
s p l u n k g r e e n
C 6 8 / m 0 / Y 1 0 0 / k0 r 1 01 / G 1 6 6 / B 5 5 h E x / 6 5A6 37
25
I C o n C o L o r u S A G e G u I d e L I n e S
Black is always the primary color for icons. colors should be used sparingly and only
be to highlight an item in a diagram (to communicate used to state or call an item
out). Red signifies error, problem, etc. Dark blue signifies working, online, etc. Gray
signifies disabled, hidden, etc. Light orange signifies warning, attention, etc. Light
blue is intended for generic highlighting of a specific items in a diagram. Green is used
when an item needs to be explicitly called out as related to Splunk. For optimal clarity,
it is advised to include the status in the icon label.
Indexer(default)
Settings(Warning)
database (offline)
Summary (Highlight)
Firewall (online)
Splunk Searchnetwork Input(disabled)
26
Indexer
IndexerIndexer Indexer
I C o n C o L o r G u I d e L I n e S
Icons should always be set on a white or light background. When color usage is
necessary, only the icon is filled in a single solid color from the swatches provided in
the previous page. The label remains black.
Indexer
28
4px4px
G u I d e L I n e S F o r A r r o W S
All arrows should have a 1 pixel stroke with a solid dot at its start (if it is a
one-way arrow). The lines should contain no curves. All arrows should be
straight-edged.
Arrows should never have curves of any kind in them.
One-way arrows should always have a solid circle at the beginning of the line (roughly 4px in diam-eter).
Arrowheads should never contain curves. The style should always be angular and have approximately a 2:1 height/width ratio.
29
G u I d e L I n e S F o r A r r o W S , C o L o r S
Arrows should always be set on a white or light background. An arrow’s color
should default to black. If specific arrows need to distinguish themselves,
only the colors specified on page 19 should be used. The tips of the arrows
should always be the same color as the line. Arrows should always use a
solid color.
30
G u I d e L I n e S F o r o V e r L A P P I n G A r r o W S
Arrows that overlap should have a round hop-over on the right side. The size
of the hop should not be especially large, but it should be legible at regular
sizes. Overlapping arrows of different color do not necessarily need to have
hops.
31
G u I d e L I n e S F o r A r r o W S , P o I n t I n G t o I C o n S
Arrows can start or end on any side of an icon, but must meet the icon
orthogonally at the center of the icon’s side, when possible. If an icon has a
label, the arrow should start/end below the label.
Indexer
Indexer
Indexer
Indexer
Indexer
Indexer
32
80px
105px
80px
horizontal center
I C o n P L A C e M e n t G u I d e L I n e S
Icons should have a horizontal gap of 80 pixels and a vertical gap of 105
pixels. Rows of icons should be horizontally aligned in relation to each other.
33
vertical center
vertical center
vertical center
H o r I Z o n tA L A r r o W P L A C e M e n t G u I d e L I n e S
Arrows that point to the side of an icon should be vertically aligned with
the icon. Arrows should have a 10 pixel gap between each other. Whenever
possible, limit the amount of arrows pointing to a single icon to three.
10px
10px10px
34
V e r t I C A L A r r o W P L A C e M e n t G u I d e L I n e S
Arrows that point to the top or bottom of an icon should be horizontally
aligned with the icon. Arrows should have a 10 pixel gap between each
other. Whenever possible, limit the amount of arrows pointing to a single
icon to three.
horizontal center horizontal center horizontal center
10px10px10px
35
S I M P L e A r r o W C o M P o S I t I o n
Arrows can be drawn directly from source to target as illustrated in the
example. Direct lines work well for small numbers of arrows between icons..
36
A r r o W o P t I C A L A d J u S t M e n t
The spacing of arrows can appear uneven based on the tilt of an arrow.
Therefore, the placement of arrows should always be adjusted to appear
evenly distributed to the human eye. The top example shows arrows that
have been optically adjusted compared to the bottom example in which all
arrow end-points are separated by 10 pixels.
37
A r r o W P L A C e M e n t G u I d e L I n e S
An arrow’s end-point placement should always be relative to the horizontal
order of the icon it originiates from. For instance, the right-most icon’s
arrows are always placed farthest to the right to the icon they are pointing
to.
38
A d VA n C e d A r r o W C o M P o S I t I o n
When arrow compositions become complex, a branched line style will help
organize lines into a more structured system. The branched line style helps
create less visual noise and more ordered line intersection.
39
A d VA n C e d A r r o W C o M P o S I t I o n
Sometimes you will need to vertically offset each branch point to avoid
line hops at the point where a line should branch off. The vertical distance
needed to avoid placement conflicts will vary, but the distance should be
uniform for each set of arrows.
npxnpx
40
A d VA n C e d A r r o W C o M P o S I t I o n
Arrow placement follows the same tenets of simple arrow composition.
Arrows originating farthest to the right have the endpoints placed farthest
to the right and vice-versa for left-most placed arrows..
41
Indexer IndexerIndexer IndexerIndexer
A r r o W P L A C e M e n t W I t H I n A r o W
In the case where icons need to point to other icons in a row, the arrows
point horizontally toward the target icon. In the case where the target icon
is occluded by another icon, the arrow breaks underneath the occluding
icon. The line segment that is underneath the occluding icon is signified with
a dotted line.
t Wo I Co n S tH r e e I Co n S
Fo u r I Co n S
Indexer Indexer Indexer Indexer
42
Shortest l ine on top
Longest l ine on bottom
A r r o W P L A C e M e n t W I t H I n A r o W G u I d e L I n e S
Indexer Indexer Indexer Indexer
10px
5px20px
25px5px
10px
43
t e X t B o X W I t H S H A d o W
t e X t B o X W I t H o u t S H A d o W
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei-usmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in repre-henderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei-usmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in repre-henderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
44
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei-usmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in repre-henderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
20px
20px
20px 20px
G u I d e L I n e S F o r t e X t B o X e S
All text boxes should have a 3 pixel black stroke with a 2 pixel rounded edge. The
background should be a solid white fill and the text set as Gotham Narrow Book at
12pt/18pt and neutral tracking. The container should have a 20 pixel padding on all
sides of the text. The proportions of the text box should be roughly 2:1.
45
G u I d e L I n e S F o r L e G e n d S
Legends should have a 3 pixel black stroke with a 2 pixel rounded edge. The
background should be a solid white fill. The title should be set as Gotham Narrow
Bold at 12pt/15pt with neutral tracking. Legend labels are set as Gotham Narrow at
10pt/12pt with neutral tracking. The sample lines for each label should be rotated at
45 degrees for space efficiency.
Legend
Forwarder load-balanced data
Peer node replicated data
Search data
Messages
20px
10px
10px
10px
10px
10px 10px
20px
VERTICAL LEGEND
46
Legend
Legend
Forwarder load-balanced data
Forwarder load-balanced data
Peer node replicated data
Peer node replicated data
Search data
Search data
Messages
Messages
125px
125px
10px
10px
20px
HORIZONTAL LEGEND
GRID LEGEND
G u I d e L I n e S F o r L e G e n d S ( C o n t )
In cases where horizontal space is limited, legends can be laid out to sit below a
diagram in a vertically shallow layout. Additionally, legends can be set in a grid. Both
legends conform to the prior rules unless specified.
48
F I e L d I C o n G u I d e L I n e S
The Field icon has two versions, one for medium/large sizes and one specifically for
small sizes. Only use the small version of the Field icon at sizes of 50 pixels or smaller.
49
e V e n t t y P e I C o n G u I d e L I n e S
The event Type icon has two versions, one for medium/large sizes and one
specifically for small sizes. Only use the small version of the event Type icon at sizes
of 50 pixels or smaller.
50
I C o n C o M P o n e n t G u I d e L I n e S
certain icons have pieces “attached” to them. examples include Forwarder With Load
Balancer (as shown), Indexer With Router and Search Head With Load Balancer. In all
cases, the icon create (e.g., Forwarder With Load Balancer, Indexer With Router, etc.)
should serve as the standard for structure and placement. For both Router and Load
Balancer components, special versions have been created for these purposes. Do not
use the stand-alone icons in these cases.
51
C o n tA I n e r I C o n S
“containers” are used to communicate when items are installed in a system.
containers should hold no more than 3 items. The contained items should be scaled
down to 1/3rd their normal size.
horizontal center horizontal center horizontal center
vertical center
24px 39px
10px
10px
39px24px
8pxradius
ONE-UP TWO-UP THREE-UP
55
e X A M P L e d I A G r A M # 1 ( W I t H n e W I C o n S , A Lt e r n At e L I n e S t r u C t u r e )
56
e X A M P L e d I A G r A M # 1 ( W I t H n e W I C o n S & L A B e L S )
Forwarder with Load Balancer, Linux
Forwarder with Load Balancer, Windows
Forwarder with Load Balancer, Mac
IndexerIndexer
57
e X A M P L e d I A G r A M # 1 ( W I t H n e W I C o n S & L A B e L S , A Lt e r n At e L I n e S t r u C t u r e )
Forwarder with Load Balancer, Linux
Forwarder with Load Balancer, Windows
Forwarder with Load Balancer, Mac
IndexerIndexer
60
e X A M P L e d I A G r A M # 2
( W I t H n e W I C o n S & L A B e L S )
Search Head(Distributed Search)
Indexers
Forwarders
64
ES App Search Head Indexer
Router Firewall
Fowarders WithLoad Balancer
Splunk App forEnterprise Security
Forwarders WithTechnology Add-on
Data Sources
Add-on
66
Domain Controllers Member Servers
IndexersSearch Users
Domain Name Servers
Splunk App for Active Directory
Domain Controllers Member ServersDomain Name Servers
Domain: San Francisco
Domain: New York
Central Splunk Instance
Search Heads
Typical Splunk App for Active Directory Layout
68
Master Node Search Head
Peer Nodes
Cluster: Master node, search head, 3 peer nodes, replication factor = 3
Forwarders withLoad Balancer
Legend
Forwarder load-balanced data
Search data
Messages
Peer nodereplicated data
74
License
Pool
License License
License Stacks
License GroupsA set of licenses that can be installed together
76
WAS Deployment Mgr. w/ Logs and Configs
Forwarder w/ Add-on
Splunk Instance w/ Splunk App
for WAS
JMX Forwarder Appliance w/ FA
Add-on
JMX
WAS Machine
App Servers w/ Logs
78
notable_events
Network - Attack Tracker - Lookup Gen
pci_summary
Network - All IDS Attacks- Base
PCI - Interesting Event Daily Counts - Summary Gen
Splunk Data assets
ids_attack_tracker
listen to your datacopyright © 2012 Splunk Inc. All rights reserved. Splunk enterprise is protected by U.S. and international copyright and intellectual property laws. Splunk is a registered trademark or trademark of Splunk Inc. in the United States and/or other jurisdictions. All other marks and names mentioned herein may be trademarks of their respective companies. Item # GL-Splunk-Brand-112
www.splunk.com
250 Brannan St, San Francisco, cA, 94107 [email protected] | [email protected] 866-438-7758 | 415-848-8400 www.splunkbase.com