cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              
<!-- https://codepen.io/hellt/pen/ONjwYY -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>PLAZA Project</title>
        <meta name="description" content="NOKIA Launchpad for scripts">
        <meta name="author" content="Roman Dodin">
        <link href="/static/css/bootstrap.min.css" rel="stylesheet">
        <link href="/static/css/style.css" rel="stylesheet"> <!-- custom CSS -->
        <link href="/static/css/font-awesome.min.css" rel="stylesheet">
    </head>
    <body>
        <!-- NAV BAR -->
        <div class="navbar navbar-nokia navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/">PLAZA</a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">

                        <li>
                            <a href="#contact">Contact</a>
                        </li>
                        <li>
                           <a href="#modalSearch" data-toggle="modal" data-target="#modalSearch">
                               Search <span id="searchGlyph" class="glyphicon glyphicon-search"></span>
                           </a>
                       </li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
        </div>
        <!-- NAV BAR -->


        <!-- Search Modal (https://www.w3schools.com/bootstrap/bootstrap_modal.asp) -->
        <div id="modalSearch" class="modal fade" role="dialog">
           <div class="modal-dialog modal-lg">

               <!-- Modal content-->
               <div class="modal-content">
                   <div class="modal-header">
                       <button type="button" class="close" data-dismiss="modal">&times;</button>
                       <h4 class="modal-title">Search PLAZA (under development)</h4>
                   </div>
                   <div class="modal-body">
                       <!-- Add the modal body here -->
                   </div>
                   <div class="modal-footer">
                       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                   </div>
               </div>
           </div>
        </div>


        <div class="container">
            <div class="row">
                <div class="col-md-3">
                  <div class="nav-side-menu">
                    <div class="brand">MENU</div>
                    <i class="fa fa-bars fa-3x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>

                    <!-- START OF SIDE MENU AREA-->
                    <div class="menu-list">
                      <ul id="menu-content" class="menu-content collapse out">
                          <!-- PLACEHOLDER FOR ELEMENT W/O CHILDREN
                          <li>
                              <a href="#">
                                  <i class="fa fa-angle-right fa-fw"></i>Element wo children
                              </a>
                          </li>
                          -->

                          <li data-toggle="collapse" data-target="#5620sam" class="collapsed">
                              <a href="#">
                                  <i class="fa fa-angle-double-right fa-fw chevron-rotate"></i>5620 SAM
                              </a>
                          </li>
                              <ul class="sub-menu collapse out" id="5620sam">
                                  <li>
                                      <i class="fa fa-angle-right fa-fw"></i>
                                      <a href="/5620SAM/SAM-O_XML_API_Tester">
                                          SAM-O XML API Test Engine
                                      </a>
                                  </li>
                              </ul>

                          <li data-toggle="collapse" data-target="#vmware" class="collapsed">
                              <a href="#">
                                  <i class="fa fa-angle-double-right fa-fw chevron-rotate"></i>VMWare
                              </a>
                          </li>
                              <ul class="sub-menu collapse out" id="vmware">
                                  <li>
                                      <i class="fa fa-angle-right fa-fw"></i>
                                      <a href="/vmware/get_vmrc_links">
                                          VMRC Link Composer
                                      </a>
                                  </li>

                                  <li data-toggle="collapse" data-target="#products2" class="collapsed">
                                      <i class="fa fa-angle-double-right fa-fw chevron-rotate"></i>
                                      <a href="#">Placeholder-sublevel1
                                      </a>
                                  </li>
                                      <ul class="sub-sub-menu collapse out" id="products2">
                                          <li class="sub-level2">
                                              <i class="fa fa-angle-right fa-fw"></i>
                                              <a href="#">
                                                  Placeholder-sublevel2
                                              </a>
                                          </li>
                                      </ul>
                              </ul>
                      </ul>
                    </div>
                  </div>
                </div>
                <!-- END OF SIDE MENU AREA -->
                <!-- START OF CONTENT AREA -->
                <div class="col-md-9">
                    

<h2 class="text-primary">
    
    VMRC Links Composer

</h2>

<p class="lead" >
    
This script composes clickable links for VMWare Remote Console (VMRC) standalone client along with basic info
about VMs on a ESXi host or vCenter.

</p>

<h3>
    Description
</h3>
    <p>
It became quite a pain to get Web-based console working on ESXi hosts or vCenter servers (<=v.5.5) with
<a href="https://kb.vmware.com/selfservice/microsites/search.do?language=en_US&amp;cmd=displayKC&amp;externalId=2114800">deprecation of NPAPI</a>
plugins in modern browsers. An easy method to get a remote console access would be to use a standalone
<a href="https://kb.vmware.com/selfservice/microsites/search.do?language=en_US&amp;cmd=displayKC&amp;externalId=2091284">Virtual Machine Remote Console client (VMRC)</a>
which is available for free for major OSes.
<p>For standalone VMRC client to work a special link has to be composed - <br/>i.e. <code>vmrc://root@172.17.9.254:443/?moid=vm-13</code></p>
This script generates such links and is based on an appropriate <a href="http://noshut.ru/2016/01/getting-vmrc-links-with-python/">console version</a>.

</p>

<h3>
    Usage
</h3>
    <p>
Script works both with independent ESXi hosts and managed by vCenter. Select desired entity from the
<code>Known hosts</code> select element or specify ESXi/vCenter IP address along with
credentials of the user with root privileges and you are good to go.
</p>


<h3>
    Limitations
</h3>
    <p>
In rare cases the script couldn't compose the whole link, in that case use the <code>moID</code> value specified in the
output section to compose VMRC link manually.
</p>

<!-- Author and info block -->
<small>
<dl class="dl-horizontal">
  <dt>Author</dt>
  <dd>
Roman Dodin
</dd>

  <dt>Version</dt>
  <dd>
0.1
</dd>

  <dt>Tags</dt>
  <dd>
VMWare, VMRC
</dd>
</dl>
</small>

    

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Inputs</h3>
                </div>
                <div class="panel-body">


                    <!-- FORM -->
                    <form data-toggle="validator" role="form" method="post"> <!-- validation form https://1000hz.github.io/bootstrap-validator/ -->

                        <div class="form-group col-md-12">
                            <label class="control-label" for="known_hosts_select">
                                Known hosts
                            </label>
                            <select class="form-control" id="known_hosts_select">
                              <option>-- List of known hosts --</option>
                              <option ip="172.17.9.254" login="root" pass="mypass">vCenter (172.17.9.254) -- managing hosts 172.17.9.50, 172.17.9.51</option>
                              <option ip="172.17.11.253" login="root" pass="mypass">ESXi (172.17.11.253) -- main IPD ESXi host</option>
                            </select>
                        </div>

                        <div class="form-group col-md-12">
                            <label class="control-label requiredField" for="vmware_ip_addr">
                                ESXi/vCenter IP address
                            </label>
                            <input class="form-control" type="text"
                                   pattern="^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$"
                                   id="vmware_ip_addr" name="vmware_ip_addr" placeholder="i.e. 172.17.9.254"
                                   data-error="How did you pass NRS I? Its not a valid IP address" />
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group col-md-6">
                            <label class="control-label requiredField" for="vmware_login">Login
                            </label>
                            <input class="form-control" id="vmware_login" name="vmware_login" placeholder="root" type="text" required/>
                        </div>
                        <div class="form-group col-md-6">
                            <label class="control-label requiredField" for="vmware_pass">Password
                            </label>
                            <input class="form-control"  id="vmware_pass" name="vmware_pass"
                                   placeholder="password" type="password" required/>
                        </div>
                        <div class="form-group col-md-12">
                            <div> <!-- RD: type="submit" changed to button, since JQuery is in use -->
                                <button class="btn btn-primary" id="submit_form" name="submit" type="button">
                                    Submit
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!-- OUTPUT SECTION -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Output</h3>
                </div>
                <div class="panel-body" id="output_div">
                </div>
            </div>
            <!-- END OF OUTPUT SECTION -->
        </div>
    </div>
</div>



                </div>
                <!-- END OF CONTENT AREA -->
            </div>
        </div>


        <script src="/static/js/jquery-2.2.0.min.js"></script>
        <script src="/static/js/bootstrap.min.js"></script>
        <script src="/static/js/scripts.js"></script>            <!-- custom JS -->
        <script src="/static/js/validator.min.js"></script>      <!-- https://github.com/1000hz/bootstrap-validator -->
        <script src="/static/js/loadingoverlay.min.js"></script> <!-- http://gasparesganga.com/labs/jquery-loading-overlay/-->
        
<script src="/vmware/get_vmrc_links/static/get_vmrc_links.js"></script>
                       <!-- block for JS added on pages on demand -->
    </body>
</html>
            
          
!
            
              /* http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/ */
@font-face {
  font-family: 'Nokia Pure Text';
  src: url('/static/fonts/NokiaPureText-Regular.ttf');
}

@font-face {
  font-family: 'Nokia Pure Text';
  font-weight: 200;
  src: url('/static/fonts/NokiaPureText-Light.ttf');
}

@font-face {
  font-family: 'Nokia Pure Headline';
  font-weight: bold;
  src: url('/static/fonts/NokiaPureHeadline-Bold.ttf');
}

.navbar-nokia {
    background-color: #001135;
    border: #000
}

.navbar-brand:focus, .navbar-brand:hover {
    color: #ffffff
}


.nav>li>a:focus, .nav>li>a:hover {
    background-color: #ffffff;
    color: #00c9ff
}

.navbar-nav>li>a {
    color: #ffffff
}

.navbar-nokia a:hover {
    color: #00c9ff
}

.navbar-brand {
    font-family: Nokia Pure Headline;
    letter-spacing: 0.3em;
    font-weight: bold;
    font-size: 24px;
    color: #ffffff
}

/*class for elements which need monospace font*/
.code_output {
  font-family: Consolas
}

/*not used at this moment*/
#plaza_navbar {
  background-color: #124191;
}

/*override bootstrap font settings fot the whole template*/
body {
    font-size: 16px;
    font-family: Nokia Pure Text, Helvetica Neue, Helvetica,Arial,sans-serif
}

.nav-side-menu {
  /*font-family: verdana;*/
  font-size: 14px;
  /*font-weight: 200;*/
  /*background-color: #364252;*/
  position: absolute;
  width: 95%;
  height: 100%;
  color: #333;
}
.nav-side-menu .brand {
  display: block;
  text-align: left;
  font-weight: 800;
  margin-left: 10px;
  font-size: 16px;
  letter-spacing: 5px;
}
.nav-side-menu .toggle-btn {
  display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
  list-style: none;
  padding: 0px;
  margin: 0px;
  line-height: 35px;
  /*background-color: #364252;*/
  cursor: pointer;
}

/*TESTING*/
ul.sub-menu.out {
  margin-left: 20px !important;
}

ul.sub-sub-menu.out {
  margin-left: 20px !important;
}

li.sub-level1 {
  margin-left: 27px !important;
}
/*TESTING*/

.nav-side-menu ul .collapsed .arrow:before,
.nav-side-menu li .collapsed .arrow:before {
  font-family: FontAwesome;
  content: "\f101";
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
  float: left;
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
  font-family: FontAwesome;
  content: "\f103"; /*chevron for top level menu. Opened state  */
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
  float: left;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
  border-left: 3px solid #124191;
  background-color: #f8f8f8;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
  color: #1AAE98;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
  /*background-color: #222933;*/
  border: none;
  line-height: 28px;
  /*border-bottom: 1px dashed #333;*/
  margin-left: 0px;
}

.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
  padding-left: 0px;
  border-left: 3px solid #FFFFFF;
}

/*hover coloring for submenu items*/
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
  border-left: 3px solid #124191; /*fill for leftside vertical border on menu item hover*/
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
  font-family: FontAwesome;
  /*content: "\f111";*/ /*chevron for single item*/
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
}


.nav-side-menu ul .sub-sub-menu li:before,
.nav-side-menu li .sub-sub-menu li:before {
  font-family: FontAwesome;
  /*content: "\f101";*/ /*chevron for sub-sub-menu items*/
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
}
/*borders settings for menu items*/
.nav-side-menu li {
  padding-left: 0px;
  border-left: 3px solid #FFFFFF;
  /*border-bottom: 1px dashed #f8f8f8;*/
}
/*text color for main menu items*/
.nav-side-menu li a {
  text-decoration: none;
  color: #333;
}
.nav-side-menu li a i {
  padding-left: 10px;
  width: 20px;
  padding-right: 20px;
}
.nav-side-menu li:hover {
  border-left: 3px solid #124191; /*fill for leftside vertical border on menu item hover*/
  /*background-color: #f8f8f8;*/
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
@media (max-width: 1000px) {
  .nav-side-menu {
    position: relative;
    width: 100%;
  }
  .nav-side-menu .toggle-btn {
    display: block;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 10 !important;
  }
  .brand {
    text-align: left !important;
    font-size: 20px;
    padding-left: 10px;
    line-height: 50px !important;
  }
}
@media (min-width: 767px) {
  .nav-side-menu .menu-list .menu-content {
    display: block;
  }
  
/*.container {
        width: 1130px;
        margin-left: 300px;
  }*/
}
body {
  margin: 0px;
  padding-top: 70px;
}

/*.container {

text-align:justify;
}*/



.chevron-rotate{
    -moz-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.chevron-rotate.down{
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    transform:rotate(90deg);
}
            
          
!
            
              /*rotate chevron on click over the whole <li> area
see styles.css for .chevron-rotate and .chevron-rotate.down*/
$("#menu-content li").click(function(){
 $(this).find('i').toggleClass("down")  ;
})


// filling data to the input elements based on selection of predefined hosts
$('#known_hosts_select').change(function () {
    $("#vmware_ip_addr").val($('#known_hosts_select option:selected').attr('ip'));
    $("#vmware_login").val($('#known_hosts_select option:selected').attr('login'));
    $("#vmware_pass").val($('#known_hosts_select option:selected').attr('pass'));
});

// path: /scripts_bank/vmware/get_vmrc_links/static/get_vmrc_links.js
$(function() {
    $('#submit_form').click(function() {
        // start showing loading animation
        $.LoadingOverlay("show", {
                        image       : "",
                        fontawesome : "fa fa-cog fa-spin"
                        })
        // compose URL (newPathname) which will prepend jquery function URL
        // in the case of base URL like this: /vmware/get_vmrc_links.html
        // we need to get /vmware portion, since our flask blueprint is registered at this point
        var base_url = window.location.pathname.split('/')
        var newPathname = "/";
        for (i = 1; i < base_url.length-1; i++) {
          newPathname += base_url[i];
        }
//        alert(newPathname)
        $.ajax({
            url: newPathname + '/get_vmrc_links', // url: /vmware/get_vmrc_links
            data: $('form').serialize(),
            type: 'POST',
            success: function(response) {
                $.LoadingOverlay("hide");
//                alert(response.result);
                if (response.error != "") {
                    $('#output_div').html(response.error)
                } else {
                    $('#output_div').html(response.collected_vm_info)
                }
            },
            error: function(error) {
                $.LoadingOverlay("hide");
                alert(error);
                $('#output_div').html(response.error)
            }
        });
    });
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console