openstack/vitrage-dashboard
Code Issues Proposed changes

sunburst minimap added

Browse Source 
Change-Id: I5fe7db155a89cbf7036484e6a47f7f02e6d95f95
This commit is contained in:
Alon Heller 2016-01-25 16:00:10 +02:00
parent 01349a4bfc
commit 677910f606
5 changed files with 302 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
vitragedashboard/static/dashboard/project/components/sunburst-minimap/sunburst-minimap.directive.js Normal file
View File

@ -0,0 +1,12 @@
angular.module('horizon.dashboard.project.vitrage')
.directive('hzSunburstMinimap', [
function () {
return {
restrict: 'E',
scope: {
selected: '='
},
templateUrl: STATIC_URL + 'dashboard/project/components/sunburst-minimap/sunburst-minimap.html'
};
}
]);

275
vitragedashboard/static/dashboard/project/components/sunburst-minimap/sunburst-minimap.html Normal file
View File

@ -0,0 +1,275 @@
<div style="margin-top: 180px">
<!-- ----------------------------------- Node ----------------------------------- -->
<div ng-if="selected.type == 'node'">
<svg width="100%" height="100%" viewBox="0 0 265 155">
<g>
<g>
<circle fill="#A9A9A9" stroke="#FFFFFF" stroke-miterlimit="10" cx="201.265" cy="63.69" r="58.227"/>
<circle fill="#A9A9A9" stroke="#FFFFFF" stroke-miterlimit="10" cx="201.265" cy="64.672" r="47.387"/>
<circle fill="#A9A9A9" stroke="#FFFFFF" stroke-miterlimit="10" cx="201.265" cy="63.938" r="35.982"/>
<circle fill="#757B7E" stroke="#FFFFFF" stroke-miterlimit="10" cx="201.265" cy="64.344" r="22.369"/>
</g>
<circle fill="#FFFFFF" cx="201.264" cy="63.691" r="1.5"/>
<g>
<line fill="#DEDEDE" x1="182" y1="28" x2="123" y2="28"/>
<g>
<path fill="#CCCDCD" d="M182,26.875c-19.667,0-39.333,0-59,0c-1.451,0-1.451,2.25,0,2.25c19.667,0,39.333,0,59,0
C183.451,29.125,183.451,26.875,182,26.875L182,26.875z"/>
</g>
</g>
<g>
<g>
<path fill="#4D545B" d="M191,67.5c-22.667,0-45.333,0-68,0c-1.935,0-1.935,3,0,3c22.667,0,45.333,0,68,0
C192.935,70.5,192.935,67.5,191,67.5L191,67.5z"/>
</g>
</g>
<rect x="85" y="60" fill="#4D545B" width="33" height="15"/>
<g>
<rect x="-0.096" y="6" fill="none" width="115.702" height="150.414"/>
<path fill="#4D545B" d="M97.197,14.52l-2.639-8.083h1.128l1.259,3.982c0.348,1.091,0.647,2.075,0.863,3.022h0.024
c0.228-0.936,0.563-1.955,0.924-3.01l1.367-3.994h1.115l-2.891,8.083H97.197z"/>
<path fill="#4D545B" d="M108.931,10.969c-0.06-1.127-0.132-2.482-0.12-3.49h-0.036c-0.275,0.947-0.611,1.967-1.019,3.07
l-1.428,3.922h-0.791l-1.308-3.85c-0.384-1.139-0.708-2.183-0.936-3.142h-0.024c-0.023,1.007-0.084,2.363-0.155,3.574
l-0.216,3.466h-0.996l0.564-8.083h1.331l1.379,3.91c0.336,0.996,0.611,1.883,0.815,2.723h0.036
c0.204-0.815,0.492-1.703,0.852-2.723l1.439-3.91h1.331l0.504,8.083h-1.02L108.931,10.969z"/>
<path fill="#4D545B" d="M111.586,13.44c0.312,0.204,0.863,0.42,1.392,0.42c0.768,0,1.127-0.384,1.127-0.863
c0-0.504-0.3-0.78-1.079-1.067c-1.044-0.372-1.535-0.948-1.535-1.644c0-0.935,0.756-1.703,2.003-1.703
c0.588,0,1.104,0.167,1.427,0.359l-0.264,0.768c-0.228-0.144-0.647-0.335-1.188-0.335c-0.623,0-0.971,0.36-0.971,0.792
c0,0.479,0.348,0.695,1.103,0.983c1.008,0.384,1.523,0.888,1.523,1.751c0,1.02-0.791,1.751-2.171,1.751
c-0.636,0-1.223-0.168-1.631-0.408L111.586,13.44z"/>
<path fill="#4D545B" d="M89.674,22.436v3.382h3.91v-3.382h1.055v8.083h-1.055v-3.79h-3.91v3.79H88.63v-8.083H89.674z"/>
<path fill="#4D545B" d="M101.672,27.569c0,2.146-1.487,3.082-2.891,3.082c-1.571,0-2.782-1.151-2.782-2.986
c0-1.943,1.271-3.082,2.878-3.082C100.544,24.583,101.672,25.794,101.672,27.569z M97.066,27.629c0,1.271,0.731,2.231,1.763,2.231
c1.008,0,1.763-0.947,1.763-2.255c0-0.983-0.491-2.23-1.738-2.23C97.605,25.375,97.066,26.526,97.066,27.629z"/>
<path fill="#4D545B" d="M102.862,29.44c0.312,0.204,0.863,0.42,1.392,0.42c0.768,0,1.127-0.384,1.127-0.863
c0-0.504-0.3-0.78-1.079-1.067c-1.044-0.372-1.535-0.948-1.535-1.644c0-0.935,0.756-1.703,2.003-1.703
c0.588,0,1.104,0.167,1.427,0.359l-0.264,0.768c-0.228-0.144-0.647-0.335-1.188-0.335c-0.623,0-0.971,0.36-0.971,0.792
c0,0.479,0.348,0.695,1.103,0.983c1.008,0.384,1.523,0.888,1.523,1.751c0,1.02-0.791,1.751-2.171,1.751
c-0.636,0-1.223-0.168-1.631-0.408L102.862,29.44z"/>
<path fill="#4D545B" d="M109.029,23.324v1.391h1.512v0.803h-1.512v3.13c0,0.72,0.204,1.127,0.792,1.127
c0.288,0,0.456-0.024,0.611-0.072l0.048,0.792c-0.203,0.084-0.527,0.156-0.936,0.156c-0.491,0-0.887-0.168-1.139-0.456
c-0.3-0.312-0.408-0.828-0.408-1.511v-3.167h-0.899v-0.803h0.899v-1.067L109.029,23.324z"/>
<path fill="#4D545B" d="M111.586,29.44c0.312,0.204,0.863,0.42,1.392,0.42c0.768,0,1.127-0.384,1.127-0.863
c0-0.504-0.3-0.78-1.079-1.067c-1.044-0.372-1.535-0.948-1.535-1.644c0-0.935,0.756-1.703,2.003-1.703
c0.588,0,1.104,0.167,1.427,0.359l-0.264,0.768c-0.228-0.144-0.647-0.335-1.188-0.335c-0.623,0-0.971,0.36-0.971,0.792
c0,0.479,0.348,0.695,1.103,0.983c1.008,0.384,1.523,0.888,1.523,1.751c0,1.02-0.791,1.751-2.171,1.751
c-0.636,0-1.223-0.168-1.631-0.408L111.586,29.44z"/>
<path fill="#4D545B" d="M85.462,45.908l4.486-6.56v-0.036h-4.103v-0.875h5.457v0.636l-4.461,6.536v0.036h4.521v0.875h-5.901
V45.908z"/>
<path fill="#4D545B" d="M97.724,43.569c0,2.146-1.487,3.082-2.891,3.082c-1.571,0-2.782-1.151-2.782-2.986
c0-1.943,1.271-3.082,2.878-3.082C96.596,40.583,97.724,41.794,97.724,43.569z M93.118,43.629c0,1.271,0.731,2.231,1.763,2.231
c1.008,0,1.763-0.947,1.763-2.255c0-0.983-0.491-2.23-1.738-2.23C93.657,41.375,93.118,42.526,93.118,43.629z"/>
<path fill="#4D545B" d="M99.059,42.286c0-0.6-0.013-1.091-0.049-1.571h0.936l0.061,0.959h0.023
c0.288-0.552,0.96-1.091,1.919-1.091c0.804,0,2.051,0.479,2.051,2.47v3.466h-1.055v-3.346c0-0.936-0.349-1.715-1.344-1.715
c-0.695,0-1.235,0.492-1.415,1.079c-0.048,0.132-0.072,0.312-0.072,0.492v3.49h-1.055V42.286z"/>
<path fill="#4D545B" d="M106.306,43.809c0.024,1.427,0.936,2.015,1.991,2.015c0.756,0,1.211-0.132,1.607-0.3l0.18,0.756
c-0.372,0.168-1.008,0.372-1.931,0.372c-1.787,0-2.854-1.187-2.854-2.938c0-1.751,1.031-3.13,2.723-3.13
c1.895,0,2.398,1.667,2.398,2.734c0,0.216-0.024,0.384-0.036,0.492H106.306z M109.4,43.053c0.012-0.671-0.276-1.715-1.463-1.715
c-1.067,0-1.535,0.983-1.619,1.715H109.4z"/>
<path fill="#4D545B" d="M111.586,45.44c0.312,0.204,0.863,0.42,1.392,0.42c0.768,0,1.127-0.384,1.127-0.863
c0-0.504-0.3-0.78-1.079-1.067c-1.044-0.372-1.535-0.948-1.535-1.644c0-0.935,0.756-1.703,2.003-1.703
c0.588,0,1.104,0.167,1.427,0.359l-0.264,0.768c-0.228-0.144-0.647-0.335-1.188-0.335c-0.623,0-0.971,0.36-0.971,0.792
c0,0.479,0.348,0.695,1.103,0.983c1.008,0.384,1.523,0.888,1.523,1.751c0,1.02-0.791,1.751-2.171,1.751
c-0.636,0-1.223-0.168-1.631-0.408L111.586,45.44z"/>
<path fill="#FFFFFF" d="M89.254,71.52v-8.083h1.14l2.591,4.09c0.6,0.947,1.067,1.799,1.451,2.626l0.023-0.012
c-0.096-1.079-0.119-2.062-0.119-3.322v-3.382h0.983v8.083h-1.056l-2.566-4.102c-0.563-0.9-1.104-1.823-1.512-2.699l-0.036,0.012
c0.061,1.019,0.084,1.991,0.084,3.334v3.454H89.254z"/>
<path fill="#FFFFFF" d="M102.367,68.569c0,2.146-1.487,3.082-2.891,3.082c-1.571,0-2.782-1.151-2.782-2.986
c0-1.943,1.271-3.082,2.878-3.082C101.239,65.583,102.367,66.794,102.367,68.569z M97.762,68.629c0,1.271,0.731,2.231,1.763,2.231
c1.008,0,1.763-0.947,1.763-2.255c0-0.983-0.491-2.23-1.738-2.23C98.301,66.375,97.762,67.526,97.762,68.629z"/>
<path fill="#FFFFFF" d="M108.715,63.004v7.016c0,0.516,0.012,1.103,0.048,1.499h-0.947l-0.048-1.007h-0.024
c-0.323,0.647-1.031,1.139-1.979,1.139c-1.403,0-2.482-1.187-2.482-2.95c-0.013-1.931,1.188-3.118,2.603-3.118
c0.888,0,1.487,0.419,1.751,0.887h0.023v-3.466H108.715z M107.659,68.078c0-0.132-0.012-0.312-0.048-0.444
c-0.155-0.672-0.731-1.224-1.523-1.224c-1.091,0-1.738,0.959-1.738,2.243c0,1.175,0.575,2.146,1.715,2.146
c0.708,0,1.355-0.468,1.547-1.259c0.036-0.144,0.048-0.288,0.048-0.456V68.078z"/>
<path fill="#FFFFFF" d="M111.058,68.809c0.024,1.427,0.936,2.015,1.991,2.015c0.756,0,1.211-0.132,1.607-0.3l0.18,0.756
c-0.372,0.168-1.008,0.372-1.931,0.372c-1.787,0-2.854-1.187-2.854-2.938c0-1.751,1.031-3.13,2.723-3.13
c1.895,0,2.398,1.667,2.398,2.734c0,0.216-0.024,0.384-0.036,0.492H111.058z M114.152,68.053c0.012-0.671-0.276-1.715-1.463-1.715
c-1.067,0-1.535,0.983-1.619,1.715H114.152z"/>
</g>
<g>
<line fill="#DEDEDE" x1="182" y1="13" x2="123" y2="13"/>
<g>
<path fill="#CCCDCD" d="M182,11.875c-19.667,0-39.333,0-59,0c-1.451,0-1.451,2.25,0,2.25c19.667,0,39.333,0,59,0
C183.451,14.125,183.451,11.875,182,11.875L182,11.875z"/>
</g>
</g>
<g>
<line fill="#DEDEDE" x1="182" y1="44" x2="123" y2="44"/>
<g>
<path fill="#CCCDCD" d="M182,42.875c-19.667,0-39.333,0-59,0c-1.451,0-1.451,2.25,0,2.25c19.667,0,39.333,0,59,0
C183.451,45.125,183.451,42.875,182,42.875L182,42.875z"/>
</g>
</g>
</g>
</svg>
</div>
<!-- ----------------------------------- Zone ----------------------------------- -->
<div ng-if="selected.type == 'nova.zone'">
<svg width="100%" height="100%" viewBox="0 0 265 155">
<g>
<g>
<circle fill="#A9A9A9" stroke="#FFFFFF" stroke-miterlimit="10" cx="204.265" cy="62.69" r="58.227"/>
<circle fill="#A9A9A9" stroke="#FFFFFF" stroke-miterlimit="10" cx="204.557" cy="63.396" r="42.602"/>
<circle fill="#757B7E" stroke="#FFFFFF" stroke-miterlimit="10" cx="204.265" cy="63.344" r="22.369"/>
</g>
<circle fill="#FFFFFF" cx="204.264" cy="62.691" r="1.5"/>
<g>
<line fill="#DEDEDE" x1="194" y1="27" x2="126" y2="27"/>
<g>
<path fill="#CCCDCD" d="M194,25.875c-22.667,0-45.333,0-68,0c-1.451,0-1.451,2.25,0,2.25c22.667,0,45.333,0,68,0
C195.451,28.125,195.451,25.875,194,25.875L194,25.875z"/>
</g>
</g>
<g>
<g>
<path fill="#4D545B" d="M194,66.5c-22.667,0-45.333,0-68,0c-1.935,0-1.935,3,0,3c22.667,0,45.333,0,68,0
C195.935,69.5,195.935,66.5,194,66.5L194,66.5z"/>
</g>
</g>
<rect x="88" y="59" fill="#4D545B" width="33" height="15"/>
<g>
<rect x="2.904" y="5" fill="none" width="115.702" height="150.414"/>
<path fill="#4D545B" d="M100.197,13.52l-2.639-8.083h1.128l1.259,3.982c0.348,1.091,0.647,2.075,0.863,3.022h0.024
c0.228-0.936,0.563-1.955,0.924-3.01l1.367-3.994h1.115l-2.891,8.083H100.197z"/>
<path fill="#4D545B" d="M111.931,9.969c-0.06-1.127-0.132-2.482-0.12-3.49h-0.036c-0.275,0.947-0.611,1.967-1.019,3.07
l-1.428,3.922h-0.791l-1.308-3.85c-0.384-1.139-0.708-2.183-0.936-3.142h-0.024c-0.023,1.007-0.084,2.363-0.155,3.574
l-0.216,3.466h-0.996l0.564-8.083h1.331l1.379,3.91c0.336,0.996,0.611,1.883,0.815,2.723h0.036
c0.204-0.815,0.492-1.703,0.852-2.723l1.439-3.91h1.331l0.504,8.083h-1.02L111.931,9.969z"/>
<path fill="#4D545B" d="M114.586,12.44c0.312,0.204,0.863,0.42,1.392,0.42c0.768,0,1.127-0.384,1.127-0.863
c0-0.504-0.3-0.78-1.079-1.067c-1.044-0.372-1.535-0.948-1.535-1.644c0-0.935,0.756-1.703,2.003-1.703
c0.588,0,1.104,0.167,1.427,0.359l-0.264,0.768c-0.228-0.144-0.647-0.335-1.188-0.335c-0.623,0-0.971,0.36-0.971,0.792
c0,0.479,0.348,0.695,1.103,0.983c1.008,0.384,1.523,0.888,1.523,1.751c0,1.02-0.791,1.751-2.171,1.751
c-0.636,0-1.223-0.168-1.631-0.408L114.586,12.44z"/>
<path fill="#4D545B" d="M92.674,21.436v3.382h3.91v-3.382h1.055v8.083h-1.055v-3.79h-3.91v3.79H91.63v-8.083H92.674z"/>
<path fill="#4D545B" d="M104.672,26.569c0,2.146-1.487,3.082-2.891,3.082c-1.571,0-2.782-1.151-2.782-2.986
c0-1.943,1.271-3.082,2.878-3.082C103.544,23.583,104.672,24.794,104.672,26.569z M100.066,26.629
c0,1.271,0.731,2.231,1.763,2.231c1.008,0,1.763-0.947,1.763-2.255c0-0.983-0.491-2.23-1.738-2.23
C100.605,24.375,100.066,25.526,100.066,26.629z"/>
<path fill="#4D545B" d="M105.862,28.44c0.312,0.204,0.863,0.42,1.392,0.42c0.768,0,1.127-0.384,1.127-0.863
c0-0.504-0.3-0.78-1.079-1.067c-1.044-0.372-1.535-0.948-1.535-1.644c0-0.935,0.756-1.703,2.003-1.703
c0.588,0,1.104,0.167,1.427,0.359l-0.264,0.768c-0.228-0.144-0.647-0.335-1.188-0.335c-0.623,0-0.971,0.36-0.971,0.792
c0,0.479,0.348,0.695,1.103,0.983c1.008,0.384,1.523,0.888,1.523,1.751c0,1.02-0.791,1.751-2.171,1.751
c-0.636,0-1.223-0.168-1.631-0.408L105.862,28.44z"/>
<path fill="#4D545B" d="M112.029,22.324v1.391h1.512v0.803h-1.512v3.13c0,0.72,0.204,1.127,0.792,1.127
c0.288,0,0.456-0.024,0.611-0.072l0.048,0.792c-0.203,0.084-0.527,0.156-0.936,0.156c-0.491,0-0.887-0.168-1.139-0.456
c-0.3-0.312-0.408-0.828-0.408-1.511v-3.167h-0.899v-0.803h0.899v-1.067L112.029,22.324z"/>
<path fill="#4D545B" d="M114.586,28.44c0.312,0.204,0.863,0.42,1.392,0.42c0.768,0,1.127-0.384,1.127-0.863
c0-0.504-0.3-0.78-1.079-1.067c-1.044-0.372-1.535-0.948-1.535-1.644c0-0.935,0.756-1.703,2.003-1.703
c0.588,0,1.104,0.167,1.427,0.359l-0.264,0.768c-0.228-0.144-0.647-0.335-1.188-0.335c-0.623,0-0.971,0.36-0.971,0.792
c0,0.479,0.348,0.695,1.103,0.983c1.008,0.384,1.523,0.888,1.523,1.751c0,1.02-0.791,1.751-2.171,1.751
c-0.636,0-1.223-0.168-1.631-0.408L114.586,28.44z"/>
<path fill="#FFFFFF" d="M93.214,69.908l4.486-6.56v-0.036h-4.103v-0.875h5.457v0.636l-4.461,6.536v0.036h4.521v0.875h-5.901
V69.908z"/>
<path fill="#FFFFFF" d="M105.476,67.569c0,2.146-1.487,3.082-2.891,3.082c-1.571,0-2.782-1.151-2.782-2.986
c0-1.943,1.271-3.082,2.878-3.082C104.348,64.583,105.476,65.794,105.476,67.569z M100.87,67.629c0,1.271,0.731,2.231,1.763,2.231
c1.008,0,1.763-0.947,1.763-2.255c0-0.983-0.491-2.23-1.738-2.23C101.409,65.375,100.87,66.526,100.87,67.629z"/>
<path fill="#FFFFFF" d="M106.811,66.286c0-0.6-0.013-1.091-0.049-1.571h0.936l0.061,0.959h0.023
c0.288-0.552,0.96-1.091,1.919-1.091c0.804,0,2.051,0.479,2.051,2.47v3.466h-1.055v-3.346c0-0.936-0.349-1.715-1.344-1.715
c-0.695,0-1.235,0.492-1.415,1.079c-0.048,0.132-0.072,0.312-0.072,0.492v3.49h-1.055V66.286z"/>
<path fill="#FFFFFF" d="M114.058,67.809c0.024,1.427,0.936,2.015,1.991,2.015c0.756,0,1.211-0.132,1.607-0.3l0.18,0.756
c-0.372,0.168-1.008,0.372-1.931,0.372c-1.787,0-2.854-1.187-2.854-2.938c0-1.751,1.031-3.13,2.723-3.13
c1.895,0,2.398,1.667,2.398,2.734c0,0.216-0.024,0.384-0.036,0.492H114.058z M117.152,67.053c0.012-0.671-0.276-1.715-1.463-1.715
c-1.067,0-1.535,0.983-1.619,1.715H117.152z"/>
</g>
<g>
<line fill="#DEDEDE" x1="194" y1="11" x2="126" y2="11"/>
<g>
<path fill="#CCCDCD" d="M194,9.875c-22.667,0-45.333,0-68,0c-1.451,0-1.451,2.25,0,2.25c22.667,0,45.333,0,68,0
C195.451,12.125,195.451,9.875,194,9.875L194,9.875z"/>
</g>
</g>
</g>
</svg>
</div>
<!-- ----------------------------------- Host----------------------------------- -->
<div ng-if="selected.type == 'nova.host'">
<svg width="100%" height="100%" viewBox="0 0 265 155">
<g>
<g>
<circle fill="#A9A9A9" stroke="#FFFFFF" stroke-miterlimit="10" cx="204.265" cy="62.69" r="58.227"/>
<circle fill="none" cx="204.265" cy="63.672" r="47.387"/>
<circle fill="#757B7E" cx="204.265" cy="62.938" r="35.982"/>
<circle fill="#757B7E" cx="204.265" cy="63.344" r="22.369"/>
</g>
<circle fill="#FFFFFF" cx="204.264" cy="62.691" r="1.5"/>
<g>
<g>
<path fill="#4D545B" d="M194,66.5c-22.667,0-45.333,0-68,0c-1.935,0-1.935,3,0,3c22.667,0,45.333,0,68,0
C195.935,69.5,195.935,66.5,194,66.5L194,66.5z"/>
</g>
</g>
<rect x="88" y="59" fill="#4D545B" width="33" height="15"/>
<g>
<rect x="2.904" y="5" fill="none" width="115.702" height="150.414"/>
<path fill="#4D545B" d="M100.197,13.52l-2.639-8.083h1.128l1.259,3.982c0.348,1.091,0.647,2.075,0.863,3.022h0.024
c0.228-0.936,0.563-1.955,0.924-3.01l1.367-3.994h1.115l-2.891,8.083H100.197z"/>
<path fill="#4D545B" d="M111.931,9.969c-0.06-1.127-0.132-2.482-0.12-3.49h-0.036c-0.275,0.947-0.611,1.967-1.019,3.07
l-1.428,3.922h-0.791l-1.308-3.85c-0.384-1.139-0.708-2.183-0.936-3.142h-0.024c-0.023,1.007-0.084,2.363-0.155,3.574
l-0.216,3.466h-0.996l0.564-8.083h1.331l1.379,3.91c0.336,0.996,0.611,1.883,0.815,2.723h0.036
c0.204-0.815,0.492-1.703,0.852-2.723l1.439-3.91h1.331l0.504,8.083h-1.02L111.931,9.969z"/>
<path fill="#4D545B" d="M114.586,12.44c0.312,0.204,0.863,0.42,1.392,0.42c0.768,0,1.127-0.384,1.127-0.863
c0-0.504-0.3-0.78-1.079-1.067c-1.044-0.372-1.535-0.948-1.535-1.644c0-0.935,0.756-1.703,2.003-1.703
c0.588,0,1.104,0.167,1.427,0.359l-0.264,0.768c-0.228-0.144-0.647-0.335-1.188-0.335c-0.623,0-0.971,0.36-0.971,0.792
c0,0.479,0.348,0.695,1.103,0.983c1.008,0.384,1.523,0.888,1.523,1.751c0,1.02-0.791,1.751-2.171,1.751
c-0.636,0-1.223-0.168-1.631-0.408L114.586,12.44z"/>
<path fill="#FFFFFF" d="M97.426,62.436v3.382h3.91v-3.382h1.055v8.083h-1.055v-3.79h-3.91v3.79h-1.044v-8.083H97.426z"/>
<path fill="#FFFFFF" d="M109.424,67.569c0,2.146-1.487,3.082-2.891,3.082c-1.571,0-2.782-1.151-2.782-2.986
c0-1.943,1.271-3.082,2.878-3.082C108.296,64.583,109.424,65.794,109.424,67.569z M104.818,67.629
c0,1.271,0.731,2.231,1.763,2.231c1.008,0,1.763-0.947,1.763-2.255c0-0.983-0.491-2.23-1.738-2.23
C105.357,65.375,104.818,66.526,104.818,67.629z"/>
<path fill="#FFFFFF" d="M110.614,69.44c0.312,0.204,0.863,0.42,1.392,0.42c0.768,0,1.127-0.384,1.127-0.863
c0-0.504-0.3-0.78-1.079-1.067c-1.044-0.372-1.535-0.948-1.535-1.644c0-0.935,0.756-1.703,2.003-1.703
c0.588,0,1.104,0.167,1.427,0.359l-0.264,0.768c-0.228-0.144-0.647-0.335-1.188-0.335c-0.623,0-0.971,0.36-0.971,0.792
c0,0.479,0.348,0.695,1.103,0.983c1.008,0.384,1.523,0.888,1.523,1.751c0,1.02-0.791,1.751-2.171,1.751
c-0.636,0-1.223-0.168-1.631-0.408L110.614,69.44z"/>
<path fill="#FFFFFF" d="M116.781,63.324v1.391h1.512v0.803h-1.512v3.13c0,0.72,0.204,1.127,0.792,1.127
c0.288,0,0.456-0.024,0.611-0.072l0.048,0.792c-0.203,0.084-0.527,0.156-0.936,0.156c-0.491,0-0.887-0.168-1.139-0.456
c-0.3-0.312-0.408-0.828-0.408-1.511v-3.167h-0.899v-0.803h0.899v-1.067L116.781,63.324z"/>
</g>
<g>
<line fill="#DEDEDE" x1="185" y1="12" x2="126" y2="12"/>
<g>
<path fill="#CCCDCD" d="M185,10.875c-19.667,0-39.333,0-59,0c-1.451,0-1.451,2.25,0,2.25c19.667,0,39.333,0,59,0
C186.451,13.125,186.451,10.875,185,10.875L185,10.875z"/>
</g>
</g>
</g>
</svg>
</div>
<!-- ----------------------------------- VM ----------------------------------- -->
<div ng-if="selected.type == 'nova.instance'">
<svg width="100%" height="100%" viewBox="0 0 265 155">
<g>
<g>
<circle fill="#757B7E" stroke="#FFFFFF" stroke-miterlimit="10" cx="201.265" cy="66.69" r="58.227"/>
<circle fill="#757B7E" cx="201.265" cy="67.672" r="47.387"/>
<circle fill="#757B7E" cx="201.265" cy="66.938" r="35.982"/>
<circle fill="#757B7E" cx="201.265" cy="67.344" r="22.369"/>
</g>
<circle fill="#FFFFFF" cx="201.264" cy="66.691" r="1.5"/>
<g>
<g>
<path fill="#4D545B" d="M191,70.5c-22.667,0-45.333,0-68,0c-1.935,0-1.935,3,0,3c22.667,0,45.333,0,68,0
C192.935,73.5,192.935,70.5,191,70.5L191,70.5z"/>
</g>
</g>
<rect x="85" y="63" fill="#4D545B" width="33" height="15"/>
<g>
<rect x="-0.096" y="5.777" fill="none" width="115.702" height="150.414"/>
<path fill="#FFFFFF" d="M101.949,75.097l-2.639-8.083h1.128l1.259,3.982c0.348,1.091,0.647,2.075,0.863,3.022h0.024
c0.228-0.936,0.563-1.955,0.924-3.01l1.367-3.994h1.115l-2.891,8.083H101.949z"/>
<path fill="#FFFFFF" d="M113.683,71.546c-0.06-1.127-0.132-2.482-0.12-3.49h-0.036c-0.275,0.947-0.611,1.967-1.019,3.07
l-1.428,3.922h-0.791l-1.308-3.85c-0.384-1.139-0.708-2.183-0.936-3.142h-0.024c-0.023,1.007-0.084,2.363-0.155,3.574
l-0.216,3.466h-0.996l0.564-8.083h1.331l1.379,3.91c0.336,0.996,0.611,1.883,0.815,2.723h0.036
c0.204-0.815,0.492-1.703,0.852-2.723l1.439-3.91h1.331l0.504,8.083h-1.02L113.683,71.546z"/>
</g>
</g>
</svg>
</div>
</div>

2
vitragedashboard/static/dashboard/project/components/sunburst/sunburst.directive.js
View File

@ -88,7 +88,7 @@ function hzSunburst() {
}
function cloneSelectedItem(d) {
scope.selected = {id: d.id, name: d.name, state: d.state};
scope.selected = {id: d.id, name: d.name, state: d.state, type: d.type};
}
// Interpolate the scales!

7
vitragedashboard/static/dashboard/project/layout/main/compute/compute.html
View File

@ -19,7 +19,12 @@
<h3 class="panel-title">Topology</h3>
</div>
<div class="panel-body">
<hz-sunburst name="compute" data="computeCtrl.model.computeTopology" selected="computeCtrl.model.selected"></hz-sunburst>
<div class="col-md-10">
<hz-sunburst name="compute" data="computeCtrl.model.computeTopology" selected="computeCtrl.model.selected"></hz-sunburst>
</div>
<div class="col-md-2 visual-legend">
<hz-sunburst-minimap selected="computeCtrl.model.selected"></hz-sunburst-minimap>
</div>
</div>
</div>

8
vitragedashboard/static/dashboard/project/layout/main/compute/compute.scss
View File

@ -1,3 +1,11 @@
.vitrage-compute {
.visual-legend {
width: 264px;
height: 100px;
position: absolute;
right: 40px;
margin-top: 20px;
}
}