7x31/cmdb
1
0
Fork 0
mirror of https://github.com/veops/cmdb.git synced 2025-08-07 12:40:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): topology view (#525)

Browse Source
This commit is contained in:
pycook
2024-05-28 20:03:10 +08:00
committed by GitHub
parent 2da89ca1ef
commit e4750d122e
17 changed files with 2857 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

949
cmdb-ui/public/iconfont/demo_index.html
View File

@@ -54,6 +54,252 @@
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe92b;</span>
<div class="name">ops-topology_view</div>
<div class="code-name">&amp;#xe92b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe92a;</span>
<div class="name">monitor-host_analysis</div>
<div class="code-name">&amp;#xe92a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe929;</span>
<div class="name">monitor-add2</div>
<div class="code-name">&amp;#xe929;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe928;</span>
<div class="name">monitor-native</div>
<div class="code-name">&amp;#xe928;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe927;</span>
<div class="name">veops-filter2</div>
<div class="code-name">&amp;#xe927;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe601;</span>
<div class="name">ops-cmdb-data_companies-selected</div>
<div class="code-name">&amp;#xe601;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe926;</span>
<div class="name">ops-cmdb-data_companies</div>
<div class="code-name">&amp;#xe926;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe921;</span>
<div class="name">monitor-threshold_value</div>
<div class="code-name">&amp;#xe921;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe922;</span>
<div class="name">monitor-disposition</div>
<div class="code-name">&amp;#xe922;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe923;</span>
<div class="name">monitor-automatic_discovery</div>
<div class="code-name">&amp;#xe923;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe924;</span>
<div class="name">monitor-grouping_list</div>
<div class="code-name">&amp;#xe924;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe925;</span>
<div class="name">monitor-node_list</div>
<div class="code-name">&amp;#xe925;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe920;</span>
<div class="name">monitor-general_view</div>
<div class="code-name">&amp;#xe920;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe91b;</span>
<div class="name">monitor-network_topology</div>
<div class="code-name">&amp;#xe91b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe91c;</span>
<div class="name">monitor-node_management</div>
<div class="code-name">&amp;#xe91c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe91d;</span>
<div class="name">monitor-alarm_policy</div>
<div class="code-name">&amp;#xe91d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe91e;</span>
<div class="name">monitor-alarm</div>
<div class="code-name">&amp;#xe91e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe91f;</span>
<div class="name">monitor-healing</div>
<div class="code-name">&amp;#xe91f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe8d4;</span>
<div class="name">monitor-data_acquisition</div>
<div class="code-name">&amp;#xe8d4;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe91a;</span>
<div class="name">monitor-analysis</div>
<div class="code-name">&amp;#xe91a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe89b;</span>
<div class="name">monitor-index</div>
<div class="code-name">&amp;#xe89b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe867;</span>
<div class="name">monitor-user_defined</div>
<div class="code-name">&amp;#xe867;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe861;</span>
<div class="name">monitor-database</div>
<div class="code-name">&amp;#xe861;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe865;</span>
<div class="name">monitor-common</div>
<div class="code-name">&amp;#xe865;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe866;</span>
<div class="name">veops-edit</div>
<div class="code-name">&amp;#xe866;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe863;</span>
<div class="name">veops-empower</div>
<div class="code-name">&amp;#xe863;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe864;</span>
<div class="name">veops-share</div>
<div class="code-name">&amp;#xe864;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe862;</span>
<div class="name">veops-export</div>
<div class="code-name">&amp;#xe862;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe860;</span>
<div class="name">veops-import</div>
<div class="code-name">&amp;#xe860;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe807;</span>
<div class="name">monitor-ip (1)</div>
<div class="code-name">&amp;#xe807;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe803;</span>
<div class="name">monitor-director</div>
<div class="code-name">&amp;#xe803;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe804;</span>
<div class="name">monitor-host</div>
<div class="code-name">&amp;#xe804;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe802;</span>
<div class="name">cmdb-log</div>
<div class="code-name">&amp;#xe802;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe7ff;</span>
<div class="name">monitor-add</div>
<div class="code-name">&amp;#xe7ff;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe7fc;</span>
<div class="name">monitor-down</div>
<div class="code-name">&amp;#xe7fc;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe7fd;</span>
<div class="name">monitor-up</div>
<div class="code-name">&amp;#xe7fd;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe7f9;</span>
<div class="name">itsm-unfold</div>
<div class="code-name">&amp;#xe7f9;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe7f8;</span>
<div class="name">itsm-shrink</div>
<div class="code-name">&amp;#xe7f8;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe7a1;</span>
<div class="name">monitor-data_comaparison2</div>
<div class="code-name">&amp;#xe7a1;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe7f7;</span>
<div class="name">monitor-data_comaparison1</div>
<div class="code-name">&amp;#xe7f7;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe7a0;</span>
<div class="name">monitor-online</div>
<div class="code-name">&amp;#xe7a0;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe919;</span>
<div class="name">ops-setting-application-selected</div>
@@ -4620,9 +4866,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1713840593232') format('woff2'),
url('iconfont.woff?t=1713840593232') format('woff'),
url('iconfont.ttf?t=1713840593232') format('truetype');
src: url('iconfont.woff2?t=1716896994700') format('woff2'),
url('iconfont.woff?t=1716896994700') format('woff'),
url('iconfont.ttf?t=1716896994700') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -4648,6 +4894,375 @@
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont ops-topology_view"></span>
<div class="name">
ops-topology_view
</div>
<div class="code-name">.ops-topology_view
</div>
</li>
<li class="dib">
<span class="icon iconfont monitor-host_analysis"></span>
<div class="name">
monitor-host_analysis
</div>
<div class="code-name">.monitor-host_analysis
</div>
</li>
<li class="dib">
<span class="icon iconfont a-Group427319324"></span>
<div class="name">
monitor-add2
</div>
<div class="code-name">.a-Group427319324
</div>
</li>
<li class="dib">
<span class="icon iconfont monitor-native"></span>
<div class="name">
monitor-native
</div>
<div class="code-name">.monitor-native
</div>
</li>
<li class="dib">
<span class="icon iconfont veops-filter2"></span>
<div class="name">
veops-filter2
</div>
<div class="code-name">.veops-filter2
</div>
</li>
<li class="dib">
<span class="icon iconfont ops-cmdb-data_companies-selected"></span>
<div class="name">
ops-cmdb-data_companies-selected
</div>
<div class="code-name">.ops-cmdb-data_companies-selected
</div>
</li>
<li class="dib">
<span class="icon iconfont ops-cmdb-data_companies"></span>
<div class="name">
ops-cmdb-data_companies
</div>
<div class="code-name">.ops-cmdb-data_companies
</div>
</li>
<li class="dib">
<span class="icon iconfont monitor-threshold_value"></span>
<div class="name">
monitor-threshold_value
</div>
<div class="code-name">.monitor-threshold_value
</div>
</li>
<li class="dib">
<span class="icon iconfont monitor-disposition"></span>
<div class="name">
monitor-disposition
</div>
<div class="code-name">.monitor-disposition
</div>
</li>
<li class="dib">
<span class="icon iconfont monitor-automatic_discovery"></span>
<div class="name">
monitor-automatic_discovery
</div>
<div class="code-name">.monitor-automatic_discovery
</div>
</li>
<li class="dib">
<span class="icon iconfont monitor-grouping_list"></span>
<div class="name">
monitor-grouping_list
</div>
<div class="code-name">.monitor-grouping_list
</div>
</li>
<li class="dib">
<span class="icon iconfont monitor-node_list"></span>
<div class="name">
monitor-node_list
</div>
<div class="code-name">.monitor-node_list
</div>
</li>
<li class="dib">
<span class="icon iconfont monitor-general_view"></span>
<div class="name">
monitor-general_view
</div>
<div class="code-name">.monitor-general_view
</div>
</li>
<li class="dib">
<span class="icon iconfont monitor-network_topology"></span>
<div class="name">
monitor-network_topology
</div>
<div class="code-name">.monitor-network_topology
</div>
</li>
<li class="dib">
<span class="icon iconfont monitor-node_management"></span>
<div class="name">
monitor-node_management
</div>
<div class="code-name">.monitor-node_management
</div>
</li>
<li class="dib">
<span class="icon iconfont monitor-alarm_policy"></span>
<div class="name">
monitor-alarm_policy
</div>
<div class="code-name">.monitor-alarm_policy
</div>
</li>
<li class="dib">
<span class="icon iconfont monitor-alarm"></span>
<div class="name">
monitor-alarm
</div>
<div class="code-name">.monitor-alarm
</div>
</li>
<li class="dib">
<span class="icon iconfont monitor-healing"></span>
<div class="name">
monitor-healing
</div>
<div class="code-name">.monitor-healing
</div>
</li>
<li class="dib">
<span class="icon iconfont monitor-data_acquisition"></span>
<div class="name">
monitor-data_acquisition
</div>
<div class="code-name">.monitor-data_acquisition
</div>
</li>
<li class="dib">
<span class="icon iconfont monitor-analysis"></span>
<div class="name">
monitor-analysis
</div>
<div class="code-name">.monitor-analysis
</div>
</li>
<li class="dib">
<span class="icon iconfont monitor-index"></span>
<div class="name">
monitor-index
</div>
<div class="code-name">.monitor-index
</div>
</li>
<li class="dib">
<span class="icon iconfont monitor-user_defined"></span>
<div class="name">
monitor-user_defined
</div>
<div class="code-name">.monitor-user_defined
</div>
</li>
<li class="dib">
<span class="icon iconfont monitor-database"></span>
<div class="name">
monitor-database
</div>
<div class="code-name">.monitor-database
</div>
</li>
<li class="dib">
<span class="icon iconfont monitor-common"></span>
<div class="name">
monitor-common
</div>
<div class="code-name">.monitor-common
</div>
</li>
<li class="dib">
<span class="icon iconfont veops-edit"></span>
<div class="name">
veops-edit
</div>
<div class="code-name">.veops-edit
</div>
</li>
<li class="dib">
<span class="icon iconfont veops-empower"></span>
<div class="name">
veops-empower
</div>
<div class="code-name">.veops-empower
</div>
</li>
<li class="dib">
<span class="icon iconfont veops-share"></span>
<div class="name">
veops-share
</div>
<div class="code-name">.veops-share
</div>
</li>
<li class="dib">
<span class="icon iconfont veops-export"></span>
<div class="name">
veops-export
</div>
<div class="code-name">.veops-export
</div>
</li>
<li class="dib">
<span class="icon iconfont a-veops-import1"></span>
<div class="name">
veops-import
</div>
<div class="code-name">.a-veops-import1
</div>
</li>
<li class="dib">
<span class="icon iconfont monitor-ip"></span>
<div class="name">
monitor-ip (1)
</div>
<div class="code-name">.monitor-ip
</div>
</li>
<li class="dib">
<span class="icon iconfont monitor-director"></span>
<div class="name">
monitor-director
</div>
<div class="code-name">.monitor-director
</div>
</li>
<li class="dib">
<span class="icon iconfont monitor-host"></span>
<div class="name">
monitor-host
</div>
<div class="code-name">.monitor-host
</div>
</li>
<li class="dib">
<span class="icon iconfont a-cmdb-log1"></span>
<div class="name">
cmdb-log
</div>
<div class="code-name">.a-cmdb-log1
</div>
</li>
<li class="dib">
<span class="icon iconfont monitor-add"></span>
<div class="name">
monitor-add
</div>
<div class="code-name">.monitor-add
</div>
</li>
<li class="dib">
<span class="icon iconfont monitor-down"></span>
<div class="name">
monitor-down
</div>
<div class="code-name">.monitor-down
</div>
</li>
<li class="dib">
<span class="icon iconfont monitor-up"></span>
<div class="name">
monitor-up
</div>
<div class="code-name">.monitor-up
</div>
</li>
<li class="dib">
<span class="icon iconfont itsm-unfold"></span>
<div class="name">
itsm-unfold
</div>
<div class="code-name">.itsm-unfold
</div>
</li>
<li class="dib">
<span class="icon iconfont itsm-stretch"></span>
<div class="name">
itsm-shrink
</div>
<div class="code-name">.itsm-stretch
</div>
</li>
<li class="dib">
<span class="icon iconfont monitor-data_comaparison2"></span>
<div class="name">
monitor-data_comaparison2
</div>
<div class="code-name">.monitor-data_comaparison2
</div>
</li>
<li class="dib">
<span class="icon iconfont monitor-data_comaparison1"></span>
<div class="name">
monitor-data_comaparison1
</div>
<div class="code-name">.monitor-data_comaparison1
</div>
</li>
<li class="dib">
<span class="icon iconfont a-monitor-online1"></span>
<div class="name">
monitor-online
</div>
<div class="code-name">.a-monitor-online1
</div>
</li>
<li class="dib">
<span class="icon iconfont ops-setting-application-selected"></span>
<div class="name">
@@ -11497,6 +12112,334 @@
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#ops-topology_view"></use>
</svg>
<div class="name">ops-topology_view</div>
<div class="code-name">#ops-topology_view</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#monitor-host_analysis"></use>
</svg>
<div class="name">monitor-host_analysis</div>
<div class="code-name">#monitor-host_analysis</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#a-Group427319324"></use>
</svg>
<div class="name">monitor-add2</div>
<div class="code-name">#a-Group427319324</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#monitor-native"></use>
</svg>
<div class="name">monitor-native</div>
<div class="code-name">#monitor-native</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#veops-filter2"></use>
</svg>
<div class="name">veops-filter2</div>
<div class="code-name">#veops-filter2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#ops-cmdb-data_companies-selected"></use>
</svg>
<div class="name">ops-cmdb-data_companies-selected</div>
<div class="code-name">#ops-cmdb-data_companies-selected</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#ops-cmdb-data_companies"></use>
</svg>
<div class="name">ops-cmdb-data_companies</div>
<div class="code-name">#ops-cmdb-data_companies</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#monitor-threshold_value"></use>
</svg>
<div class="name">monitor-threshold_value</div>
<div class="code-name">#monitor-threshold_value</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#monitor-disposition"></use>
</svg>
<div class="name">monitor-disposition</div>
<div class="code-name">#monitor-disposition</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#monitor-automatic_discovery"></use>
</svg>
<div class="name">monitor-automatic_discovery</div>
<div class="code-name">#monitor-automatic_discovery</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#monitor-grouping_list"></use>
</svg>
<div class="name">monitor-grouping_list</div>
<div class="code-name">#monitor-grouping_list</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#monitor-node_list"></use>
</svg>
<div class="name">monitor-node_list</div>
<div class="code-name">#monitor-node_list</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#monitor-general_view"></use>
</svg>
<div class="name">monitor-general_view</div>
<div class="code-name">#monitor-general_view</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#monitor-network_topology"></use>
</svg>
<div class="name">monitor-network_topology</div>
<div class="code-name">#monitor-network_topology</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#monitor-node_management"></use>
</svg>
<div class="name">monitor-node_management</div>
<div class="code-name">#monitor-node_management</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#monitor-alarm_policy"></use>
</svg>
<div class="name">monitor-alarm_policy</div>
<div class="code-name">#monitor-alarm_policy</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#monitor-alarm"></use>
</svg>
<div class="name">monitor-alarm</div>
<div class="code-name">#monitor-alarm</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#monitor-healing"></use>
</svg>
<div class="name">monitor-healing</div>
<div class="code-name">#monitor-healing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#monitor-data_acquisition"></use>
</svg>
<div class="name">monitor-data_acquisition</div>
<div class="code-name">#monitor-data_acquisition</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#monitor-analysis"></use>
</svg>
<div class="name">monitor-analysis</div>
<div class="code-name">#monitor-analysis</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#monitor-index"></use>
</svg>
<div class="name">monitor-index</div>
<div class="code-name">#monitor-index</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#monitor-user_defined"></use>
</svg>
<div class="name">monitor-user_defined</div>
<div class="code-name">#monitor-user_defined</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#monitor-database"></use>
</svg>
<div class="name">monitor-database</div>
<div class="code-name">#monitor-database</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#monitor-common"></use>
</svg>
<div class="name">monitor-common</div>
<div class="code-name">#monitor-common</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#veops-edit"></use>
</svg>
<div class="name">veops-edit</div>
<div class="code-name">#veops-edit</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#veops-empower"></use>
</svg>
<div class="name">veops-empower</div>
<div class="code-name">#veops-empower</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#veops-share"></use>
</svg>
<div class="name">veops-share</div>
<div class="code-name">#veops-share</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#veops-export"></use>
</svg>
<div class="name">veops-export</div>
<div class="code-name">#veops-export</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#a-veops-import1"></use>
</svg>
<div class="name">veops-import</div>
<div class="code-name">#a-veops-import1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#monitor-ip"></use>
</svg>
<div class="name">monitor-ip (1)</div>
<div class="code-name">#monitor-ip</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#monitor-director"></use>
</svg>
<div class="name">monitor-director</div>
<div class="code-name">#monitor-director</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#monitor-host"></use>
</svg>
<div class="name">monitor-host</div>
<div class="code-name">#monitor-host</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#a-cmdb-log1"></use>
</svg>
<div class="name">cmdb-log</div>
<div class="code-name">#a-cmdb-log1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#monitor-add"></use>
</svg>
<div class="name">monitor-add</div>
<div class="code-name">#monitor-add</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#monitor-down"></use>
</svg>
<div class="name">monitor-down</div>
<div class="code-name">#monitor-down</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#monitor-up"></use>
</svg>
<div class="name">monitor-up</div>
<div class="code-name">#monitor-up</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#itsm-unfold"></use>
</svg>
<div class="name">itsm-unfold</div>
<div class="code-name">#itsm-unfold</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#itsm-stretch"></use>
</svg>
<div class="name">itsm-shrink</div>
<div class="code-name">#itsm-stretch</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#monitor-data_comaparison2"></use>
</svg>
<div class="name">monitor-data_comaparison2</div>
<div class="code-name">#monitor-data_comaparison2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#monitor-data_comaparison1"></use>
</svg>
<div class="name">monitor-data_comaparison1</div>
<div class="code-name">#monitor-data_comaparison1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#a-monitor-online1"></use>
</svg>
<div class="name">monitor-online</div>
<div class="code-name">#a-monitor-online1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#ops-setting-application-selected"></use>