<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns:mv="http://macVmlSchemaUri" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Title" content="">
<meta name="Keywords" content="">
<meta name="Generator" content="Microsoft Word 15 (filtered medium)">
<!--[if !mso]><style>v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style><![endif]--><style><!--
/* Font Definitions */
@font-face
        {font-family:"Courier New";
        panose-1:2 7 3 9 2 2 5 2 4 4;}
@font-face
        {font-family:Wingdings;
        panose-1:5 0 0 0 0 0 0 0 0 0;}
@font-face
        {font-family:"Cambria Math";
        panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
        {font-family:Calibri;
        panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
        {font-family:"Apple Color Emoji";
        panose-1:0 0 0 0 0 0 0 0 0 0;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
        {margin:0in;
        margin-bottom:.0001pt;
        font-size:12.0pt;
        font-family:"Calibri",sans-serif;}
a:link, span.MsoHyperlink
        {mso-style-priority:99;
        color:#0563C1;
        text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
        {mso-style-priority:99;
        color:#954F72;
        text-decoration:underline;}
p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph
        {mso-style-priority:34;
        margin-top:0in;
        margin-right:0in;
        margin-bottom:0in;
        margin-left:.5in;
        margin-bottom:.0001pt;
        font-size:12.0pt;
        font-family:"Calibri",sans-serif;}
span.EmailStyle17
        {mso-style-type:personal-compose;
        font-family:"Calibri",sans-serif;
        color:windowtext;}
span.msoIns
        {mso-style-type:export-only;
        mso-style-name:"";
        text-decoration:underline;
        color:teal;}
.MsoChpDefault
        {mso-style-type:export-only;
        font-family:"Calibri",sans-serif;}
@page WordSection1
        {size:8.5in 11.0in;
        margin:1.0in 1.0in 1.0in 1.0in;}
div.WordSection1
        {page:WordSection1;}
/* List Definitions */
@list l0
        {mso-list-id:223221165;
        mso-list-type:hybrid;
        mso-list-template-ids:1940575360 1373033506 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;}
@list l0:level1
        {mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-.25in;
        mso-ansi-font-weight:normal;}
@list l0:level2
        {mso-level-number-format:alpha-lower;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-.25in;}
@list l0:level3
        {mso-level-number-format:roman-lower;
        mso-level-tab-stop:none;
        mso-level-number-position:right;
        text-indent:-9.0pt;}
@list l0:level4
        {mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-.25in;}
@list l0:level5
        {mso-level-number-format:alpha-lower;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-.25in;}
@list l0:level6
        {mso-level-number-format:roman-lower;
        mso-level-tab-stop:none;
        mso-level-number-position:right;
        text-indent:-9.0pt;}
@list l0:level7
        {mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-.25in;}
@list l0:level8
        {mso-level-number-format:alpha-lower;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-.25in;}
@list l0:level9
        {mso-level-number-format:roman-lower;
        mso-level-tab-stop:none;
        mso-level-number-position:right;
        text-indent:-9.0pt;}
@list l1
        {mso-list-id:788357925;
        mso-list-type:hybrid;
        mso-list-template-ids:-1753575290 67698689 67698691 67698693 67698689 67698691 67698693 67698689 67698691 67698693;}
@list l1:level1
        {mso-level-number-format:bullet;
        mso-level-text:;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-.25in;
        font-family:Symbol;}
@list l1:level2
        {mso-level-number-format:bullet;
        mso-level-text:o;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-.25in;
        font-family:"Courier New",serif;}
@list l1:level3
        {mso-level-number-format:bullet;
        mso-level-text:;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-.25in;
        font-family:Wingdings;}
@list l1:level4
        {mso-level-number-format:bullet;
        mso-level-text:;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-.25in;
        font-family:Symbol;}
@list l1:level5
        {mso-level-number-format:bullet;
        mso-level-text:o;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-.25in;
        font-family:"Courier New",serif;}
@list l1:level6
        {mso-level-number-format:bullet;
        mso-level-text:;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-.25in;
        font-family:Wingdings;}
@list l1:level7
        {mso-level-number-format:bullet;
        mso-level-text:;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-.25in;
        font-family:Symbol;}
@list l1:level8
        {mso-level-number-format:bullet;
        mso-level-text:o;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-.25in;
        font-family:"Courier New",serif;}
@list l1:level9
        {mso-level-number-format:bullet;
        mso-level-text:;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-.25in;
        font-family:Wingdings;}
@list l2
        {mso-list-id:888762816;
        mso-list-type:hybrid;
        mso-list-template-ids:1247855008 67698703 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;}
@list l2:level1
        {mso-level-tab-stop:none;
        mso-level-number-position:left;
        margin-left:38.25pt;
        text-indent:-.25in;}
@list l2:level2
        {mso-level-number-format:alpha-lower;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        margin-left:74.25pt;
        text-indent:-.25in;}
@list l2:level3
        {mso-level-number-format:roman-lower;
        mso-level-tab-stop:none;
        mso-level-number-position:right;
        margin-left:110.25pt;
        text-indent:-9.0pt;}
@list l2:level4
        {mso-level-tab-stop:none;
        mso-level-number-position:left;
        margin-left:146.25pt;
        text-indent:-.25in;}
@list l2:level5
        {mso-level-number-format:alpha-lower;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        margin-left:182.25pt;
        text-indent:-.25in;}
@list l2:level6
        {mso-level-number-format:roman-lower;
        mso-level-tab-stop:none;
        mso-level-number-position:right;
        margin-left:218.25pt;
        text-indent:-9.0pt;}
@list l2:level7
        {mso-level-tab-stop:none;
        mso-level-number-position:left;
        margin-left:254.25pt;
        text-indent:-.25in;}
@list l2:level8
        {mso-level-number-format:alpha-lower;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        margin-left:290.25pt;
        text-indent:-.25in;}
@list l2:level9
        {mso-level-number-format:roman-lower;
        mso-level-tab-stop:none;
        mso-level-number-position:right;
        margin-left:326.25pt;
        text-indent:-9.0pt;}
@list l3
        {mso-list-id:1446805287;
        mso-list-type:hybrid;
        mso-list-template-ids:1859012400 1373033506 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;}
@list l3:level1
        {mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-.25in;
        mso-ansi-font-weight:normal;}
@list l3:level2
        {mso-level-number-format:alpha-lower;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-.25in;}
@list l3:level3
        {mso-level-number-format:roman-lower;
        mso-level-tab-stop:none;
        mso-level-number-position:right;
        text-indent:-9.0pt;}
@list l3:level4
        {mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-.25in;}
@list l3:level5
        {mso-level-number-format:alpha-lower;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-.25in;}
@list l3:level6
        {mso-level-number-format:roman-lower;
        mso-level-tab-stop:none;
        mso-level-number-position:right;
        text-indent:-9.0pt;}
@list l3:level7
        {mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-.25in;}
@list l3:level8
        {mso-level-number-format:alpha-lower;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-.25in;}
@list l3:level9
        {mso-level-number-format:roman-lower;
        mso-level-tab-stop:none;
        mso-level-number-position:right;
        text-indent:-9.0pt;}
ol
        {margin-bottom:0in;}
ul
        {margin-bottom:0in;}
--></style>
</head>
<body bgcolor="white" lang="EN-US" link="#0563C1" vlink="#954F72">
<div class="WordSection1">
<p class="MsoNormal"><span style="font-size:11.0pt">Hi all,<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt">The last few months working on stx-horizon have given me a broad understanding of the customizations, new dependencies, additions and removals of LOCs that WRS have added on top of Horizon. For simplicity,
 let’s imagine stx-horizon as a superset of horizon that makes stx-specific functionality a reality. The downside of having and maintaining a custom “superset” of horizon is that catching up with upstream is expensive, painful and time-consuming that requires
 a having solid understanding of this project. In an attempt to alleviate the tedious, rebase work after every upstream release, a pluggable python package that would carry stx-specific functionality was the most sound option and architecture to adopt.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt">Horizon supports “plugins”, the recommended way to extend and add to the functionality that already exists and, after removing more than 25,000 lines of code from stx-horizon, the stx-gui horizon was born.
<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt"><o:p> </o:p></span></p>
<p class="MsoNormal" align="center" style="text-align:center"><span style="font-size:11.0pt"><img width="533" height="422" id="Picture_x0020_1" src="cid:image001.png@01D43A47.F8374DD0"></span><span style="font-size:11.0pt"><o:p></o:p></span></p>
<p class="MsoNormal" align="center" style="text-align:center"><span style="font-size:11.0pt">*<b>the stx-horizon superset of horizon is smaller now</b>*<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt"><o:p> </o:p></span></p>
<p class="MsoNormal"><b>What does the plugin do?<o:p></o:p></b></p>
<p class="MsoNormal"><span style="font-size:11.0pt">Stx-gui isolates new panels (System Inventory, Fault Management, Server Groups, etc), API wrappers for clients (cgtsclient, cgcs_patch, sysinv, etc) and many other utility functions that are specific to the
 StarlingX project. This architecture helps us to:<o:p></o:p></span></p>
<ol style="margin-top:0in" start="1" type="1">
<li class="MsoListParagraph" style="margin-left:2.25pt;mso-list:l2 level1 lfo1"><span style="font-size:11.0pt">Significantly improve the way we deal with technical debt: rebases will be easier as more LOCs are moved from stx-horizon to stx-gui, until we end
 up using the upstream version of horizon </span><span style="font-size:11.0pt;font-family:"Apple Color Emoji"">☺</span><span style="font-size:11.0pt"><o:p></o:p></span></li><li class="MsoListParagraph" style="margin-left:2.25pt;mso-list:l2 level1 lfo1"><span style="font-size:11.0pt">Follow a community well-known architecture for extending horizon: “want to add custom functionality to horizon? Write a plugin”… that’s what you’d
 hear from the community<o:p></o:p></span></li></ol>
<p class="MsoNormal"><span style="font-size:11.0pt"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt">Another side-benefits from doing this splitting<o:p></o:p></span></p>
<ol style="margin-top:0in" start="1" type="1">
<li class="MsoListParagraph" style="margin-left:0in;mso-list:l3 level1 lfo2"><span style="font-size:11.0pt">Detected additions that can make horizon upstream better: this process threw light on the upstreaming work that I do in parallel.<b><o:p></o:p></b></span></li><li class="MsoListParagraph" style="margin-left:0in;mso-list:l3 level1 lfo2"><span style="font-size:11.0pt">Detected dead code: some files are still holding portions of code that are never executed<b><o:p></o:p></b></span></li><li class="MsoListParagraph" style="margin-left:0in;mso-list:l3 level1 lfo2"><span style="font-size:11.0pt">Found and documented hard dependencies that must be defined somewhere (requirements.txt)<b><o:p></o:p></b></span></li><li class="MsoListParagraph" style="margin-left:0in;mso-list:l3 level1 lfo2"><span style="font-size:11.0pt">An x-ray for understanding what the development documentation would look like<b><o:p></o:p></b></span></li><li class="MsoListParagraph" style="margin-left:0in;mso-list:l3 level1 lfo2"><span style="font-size:11.0pt">Understanding the dimension of the customizations made by WRS: horizon acts as a proxy between operators/users and API endpoints through python-clients.
 Future modifications to python-clients and APIs will certainly affect the way Horizon talks to them.<b><o:p></o:p></b></span></li></ol>
<p class="MsoListParagraph"><b><span style="font-size:11.0pt"><o:p> </o:p></span></b></p>
<p class="MsoNormal"><b>What does NOT the plugin do?<o:p></o:p></b></p>
<ul style="margin-top:0in" type="disc">
<li class="MsoListParagraph" style="margin-left:0in;mso-list:l1 level1 lfo3"><span style="font-size:11.0pt">It does not remove all of the customizations made to the internals of Horizon, that includes:<b><o:p></o:p></b></span>
<ul style="margin-top:0in" type="circle">
<li class="MsoListParagraph" style="margin-left:0in;mso-list:l1 level2 lfo3"><span style="font-size:11.0pt">Any modification done to existing panels (built in panels like Instances, Containers, etc)<b><o:p></o:p></b></span></li><li class="MsoListParagraph" style="margin-left:0in;mso-list:l1 level2 lfo3"><span style="font-size:11.0pt">The horizon Framework (the way tables are rendered or respond to user actions)<b><o:p></o:p></b></span></li><li class="MsoListParagraph" style="margin-left:0in;mso-list:l1 level2 lfo3"><span style="font-size:11.0pt">Fixes to JS files, etc.<b><o:p></o:p></b></span></li></ul>
</li><li class="MsoListParagraph" style="margin-left:0in;mso-list:l1 level1 lfo3"><span style="font-size:11.0pt">Tests<b><o:p></o:p></b></span></li><li class="MsoListParagraph" style="margin-left:0in;mso-list:l1 level1 lfo3"><span style="font-size:11.0pt">Tabs added to Horizon Panels: Network->Routers->Port Forwarding is an example<b><o:p></o:p></b></span></li><li class="MsoListParagraph" style="margin-left:0in;mso-list:l1 level1 lfo3"><span style="font-size:11.0pt">It does not specify what dependencies it needs (but they are documented)<b><o:p></o:p></b></span></li></ul>
<p class="MsoNormal"><b><span style="font-size:11.0pt"><o:p> </o:p></span></b></p>
<p class="MsoNormal"><b>How do I use it?<o:p></o:p></b></p>
<p class="MsoNormal"><span style="font-size:11.0pt">The steps below are ONLY for development and assuming you’re developing outside of the VM running StarlingX.
<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt"><o:p> </o:p></span></p>
<ol style="margin-top:0in" start="1" type="1">
<li class="MsoListParagraph" style="margin-left:0in;mso-list:l0 level1 lfo4"><span style="font-size:11.0pt">Git clone stx-horizon and switch to branch post-stx-gui-cleanup,
<a href="https://github.com/ediardo/stx-horizon/tree/post-sxt-gui-cleanup">you can find the branch on my github profile</a> or
<a href="https://github.com/starlingx-staging/stx-horizon/pull/3">check the PR</a>.<o:p></o:p></span></li><li class="MsoListParagraph" style="margin-left:0in;mso-list:l0 level1 lfo4"><span style="font-size:11.0pt">cd stx-horizon and create a virtualenv with py27 in it.<o:p></o:p></span></li><li class="MsoListParagraph" style="margin-left:0in;mso-list:l0 level1 lfo4"><span style="font-size:11.0pt">Install Horizon dependencies:pip install -r requirements.txt<o:p></o:p></span></li><li class="MsoListParagraph" style="margin-left:0in;mso-list:l0 level1 lfo4"><span style="font-size:11.0pt">Git clone stx-gui in a different directory outside of stx-horizon<o:p></o:p></span></li><li class="MsoListParagraph" style="margin-left:0in;mso-list:l0 level1 lfo4"><span style="font-size:11.0pt">cd stx-gui and using the same virtualenvironment for stx-horizon, run python setup.py install. This will create a packaged version of the plugin that
 is accessible by stx-horizon’s venv.<o:p></o:p></span></li><li class="MsoListParagraph" style="margin-left:0in;mso-list:l0 level1 lfo4"><span style="font-size:11.0pt">Install all stx-gui dependencies<o:p></o:p></span></li><li class="MsoListParagraph" style="margin-left:0in;mso-list:l0 level1 lfo4"><span style="font-size:11.0pt">Copy enable files inside of stx-gui/starlingx_dashboard/enabled/ to stx-horizon/openstack_dashboard/local/enabled/<o:p></o:p></span></li><li class="MsoListParagraph" style="margin-left:0in;mso-list:l0 level1 lfo4"><span style="font-size:11.0pt">Finally, inside of stx-horizon, run the horizon dev server with “python manage.py runserver”<o:p></o:p></span></li></ol>
<p class="MsoNormal"><span style="font-size:11.0pt"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;background:yellow;mso-highlight:yellow">The installation can be simplified and automated when building an ISO</span><span style="font-size:11.0pt">. I’m not familiar with the process but I can guide by explaining
 what steps must be followed and in what order. It basically involves moving to the right branches, cloning stx-gui, creating a package and copying files to one directory.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt">Please read the extensive documentation I’ve put on
<a href="https://etherpad.openstack.org/p/stx-gui">this etherpad for more instructions</a> for better format.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt"><o:p> </o:p></span></p>
<p class="MsoNormal"><b>What’s next?<o:p></o:p></b></p>
<p class="MsoNormal"><span style="font-size:11.0pt">There will be a number of things to keep in mind from now on, answering some questions can help to understand if a change goes to stx-horizon or stx-gui. Also, the long work to make stx-gui work with Upstream
 Horizon is still pending, but fairly documented thanks to the splitting process. The developer experience is important too, how can we make working with stx-gui an inviting place for others? Py3 compatibility and many other things that are aligned to our priorities
 and commitments.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt">Eddie <o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt"><o:p> </o:p></span></p>
</div>
</body>
</html>