mirror of https://github.com/rancher/ui.git
1130 lines
53 KiB
Handlebars
1130 lines
53 KiB
Handlebars
<div id="wrapper">
|
|
|
|
<!-- Sidebar -->
|
|
<div id="sidebar-wrapper">
|
|
<ul class="sidebar-nav">
|
|
<li class="sidebar-brand">
|
|
<a href="#">
|
|
Rancher UI Styleguide
|
|
</a>
|
|
</li>
|
|
<li><a href="#typography">Typography</a></li>
|
|
<li><a href="#colors">Colors</a></li>
|
|
<li><a href="#buttons">Buttons</a></li>
|
|
<li><a href="#badges">Badges</a></li>
|
|
<li><a href="#banners">Banners</a></li>
|
|
<li><a href="#icons">Icons</a></li>
|
|
<li><a href="#tables">Tables</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- /#sidebar-wrapper -->
|
|
|
|
<!-- Page Content -->
|
|
<div id="page-content-wrapper">
|
|
<div class="container-fluid">
|
|
<div id="typography" class="row well">
|
|
<div class="col-lg-12">
|
|
<h1>Typography</h1>
|
|
|
|
<section class="header">
|
|
<h1>Section header h1</h1>
|
|
</section>
|
|
|
|
<h5>h5 with hr as underline</h5>
|
|
<hr>
|
|
|
|
<h1>h1: Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</h1>
|
|
<h2>h2: Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</h2>
|
|
<h3>h3: Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</h3>
|
|
<h4>h4: Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</h4>
|
|
<h5>h5: Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</h5>
|
|
<h6>h6: Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</h6>
|
|
<hr>
|
|
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum
|
|
orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
|
|
|
|
<h2>Header Level 2</h2>
|
|
|
|
<ol>
|
|
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
|
|
<li>Aliquam tincidunt mauris eu risus.</li>
|
|
</ol>
|
|
|
|
<blockquote>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at
|
|
luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
|
|
</blockquote>
|
|
|
|
<h3>Header Level 3</h3>
|
|
|
|
<ul>
|
|
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
|
|
<li>Aliquam tincidunt mauris eu risus.</li>
|
|
</ul>
|
|
|
|
<pre><code>
|
|
#header h1 a {
|
|
display: block;
|
|
width: 300px;
|
|
height: 80px;
|
|
}
|
|
</code></pre>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div id="colors" class="row well">
|
|
<div class="col-lg-12">
|
|
<h1>Colors</h1>
|
|
|
|
<div class="col-sm-12 col-md-2 r-mt10 r-mb10">
|
|
<div title="$red" class="colordot r-mb5 red">
|
|
<div title="$redDark" class="halfdot redDark"></div>
|
|
</div>
|
|
|
|
<p><code>$red</code></p>
|
|
<p><code>$redDark</code></p>
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-md-2 r-mt10 r-mb10">
|
|
<div title="$redTwo" class="colordot r-mb5 redTwo">
|
|
<div title="$redTwoDark" class="halfdot redTwoDark"></div>
|
|
</div>
|
|
<p><code>$redTwo</code></p>
|
|
<p><code>$redTwoDark</code></p>
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-md-2 r-mt10 r-mb10">
|
|
<div title="$orange" class="colordot r-mb5 orange">
|
|
<div title="$orangeDark" class="halfdot orangeDark"></div>
|
|
</div>
|
|
<p><code>$orange</code></p>
|
|
<p><code>$orangeDark</code></p>
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-md-2 r-mt10 r-mb10">
|
|
<div title="$yellow" class="colordot r-mb5 yellow">
|
|
<div title="$yellowDark" class="halfdot yellowDark"></div>
|
|
</div>
|
|
<p><code>$yellow</code></p>
|
|
<p><code>$yellowDark</code></p>
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-md-2 r-mt10 r-mb10">
|
|
<div title="$yellowTwo" class="colordot r-mb5 yellowTwo">
|
|
<div title="$yellowTwoDark" class="halfdot yellowTwoDark"></div>
|
|
</div>
|
|
<p><code>$yellowTwo</code></p>
|
|
<p><code>$yellowTwoDark</code></p>
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-md-2 r-mt10 r-mb10">
|
|
<div title="$green" class="colordot r-mb5 green">
|
|
<div title="$greenDark" class="halfdot greenDark"></div>
|
|
</div>
|
|
<p><code>$green</code></p>
|
|
<p><code>$greenDark</code></p>
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-md-2 r-mt10 r-mb10">
|
|
<div title="$greenTwo" class="colordot r-mb5 greenTwo">
|
|
<div title="$greenTwoDark" class="halfdot greenTwoDark"></div>
|
|
</div>
|
|
<p><code>$greenTwo</code></p>
|
|
<p><code>$greenTwoDark</code></p>
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-md-2 r-mt10 r-mb10">
|
|
<div title="$navy" class="colordot r-mb5 navy">
|
|
<div title="$navyDark" class="halfdot navyDark"></div>
|
|
</div>
|
|
<p><code>$navy</code></p>
|
|
<p><code>$navyDark</code></p>
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-md-2 r-mt10 r-mb10">
|
|
<div title="$navyTwo" class="colordot r-mb5 navyTwo">
|
|
<div title="$navyTwoDark" class="halfdot navyTwoDark"></div>
|
|
</div>
|
|
<p><code>$navyTwo</code></p>
|
|
<p><code>$navyTwoDark</code></p>
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-md-2 r-mt10 r-mb10">
|
|
<div title="$blue" class="colordot r-mb5 blue">
|
|
<div title="$blueDark" class="halfdot blueDark"></div>
|
|
</div>
|
|
<p><code>$blue</code></p>
|
|
<p><code>$blueDark</code></p>
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-md-2 r-mt10 r-mb10">
|
|
<div title="$blueTwo" class="colordot r-mb5 blueTwo">
|
|
<div title="$blueTwoDark" class="halfdot blueTwoDark"></div>
|
|
</div>
|
|
<p><code>$blueTwoName</code></p>
|
|
<p><code>$blueTwoNameDark</code></p>
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-md-2 r-mt10 r-mb10">
|
|
<div title="$teal" class="colordot r-mb5 teal">
|
|
<div title="$tealDark" class="halfdot tealDark"></div>
|
|
</div>
|
|
<p><code>$teal</code></p>
|
|
<p><code>$tealDark</code></p>
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-md-2 r-mt10 r-mb10">
|
|
<div title="$tealTwo" class="colordot r-mb5 tealTwo">
|
|
<div title="$tealTwoDark" class="halfdot tealTwoDark"></div>
|
|
</div>
|
|
<p><code>$tealTwo</code></p>
|
|
<p><code>$tealTwoDark</code></p>
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-md-2 r-mt10 r-mb10">
|
|
<div title="$lightTeal" class="colordot r-mb5 lightTeal">
|
|
<div title="$lightTealDark" class="halfdot lightTealDark"></div>
|
|
</div>
|
|
<p><code>$lightTeal</code></p>
|
|
<p><code>$lightTealDark</code></p>
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-md-2 r-mt10 r-mb10">
|
|
<div title="$black" class="colordot r-mb5 black">
|
|
<div title="$blackDark" class="halfdot blackDark"></div>
|
|
</div>
|
|
<p><code>$black</code></p>
|
|
<p><code>$blackDark</code></p>
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-md-2 r-mt10 r-mb10">
|
|
<div title="$darkestGray" class="colordot r-mb5 darkestGray">
|
|
<div title="$darkestGrayDark" class="halfdot darkestGrayDark"></div>
|
|
</div>
|
|
<p><code>$darkestGray</code></p>
|
|
<p><code>$darkestGrayDark</code></p>
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-md-2 r-mt10 r-mb10">
|
|
<div title="$darkestGrayTwo" class="colordot r-mb5 darkestGrayTwo">
|
|
<div title="$darketstGrayTwoDark" class="halfdot darkestGrayTwoDark"></div>
|
|
</div>
|
|
<p><code>$darkestGray</code></p>
|
|
<p><code>$darkestGrayDark</code></p>
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-md-2 r-mt10 r-mb10">
|
|
<div title="$midGray" class="colordot r-mb5 midGray">
|
|
<div title="$midGrayDark" class="halfdot midGrayDark"></div>
|
|
</div>
|
|
<p><code>$midGray</code></p>
|
|
<p><code>$midGrayDark</code></p>
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-md-2 r-mt10 r-mb10">
|
|
<div title="$midGrayTwo" class="colordot r-mb5 midGrayTwo">
|
|
<div title="$midGrayTwoDark" class="halfdot midGrayTwoDark"></div>
|
|
</div>
|
|
<p><code>$midGrayTwo</code></p>
|
|
<p><code>$midGrayTwoDark</code></p>
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-md-2 r-mt10 r-mb10">
|
|
<div title="$lightGray" class="colordot r-mb5 lightGray">
|
|
<div title="$lightGrayDark" class="halfdot lightGrayDark"></div>
|
|
</div>
|
|
<p><code>$lightGray</code></p>
|
|
<p><code>$lightGrayDark</code></p>
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-md-2 r-mt10 r-mb10">
|
|
<div title="$lightGrayTwo" class="colordot r-mb5 lightGrayTwo">
|
|
<div title="$lightGrayTwoDark" class="halfdot lightGrayTwoDark"></div>
|
|
</div>
|
|
<p><code>$lightGrayTwo</code></p>
|
|
<p><code>$lightGrayTwoDark</code></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="buttons" class="row well">
|
|
<div class="col-lg-12">
|
|
<h2>Buttons</h2>
|
|
<hr/>
|
|
<div class="r-pt20">
|
|
<h3>Button Sizes</h3>
|
|
<button type="button" class="btn btn-default btn-xs">Extra Small (xs)</button>
|
|
<button type="button" class="btn btn-default btn-sm">Small (sm)</button>
|
|
<button type="button" class="btn btn-default">Default</button>
|
|
<button type="button" class="btn btn-default btn-md">Medium (md)</button>
|
|
<button type="button" class="btn btn-default btn-lg">Large (lg)</button>
|
|
</div>
|
|
|
|
<div class="r-pt20">
|
|
<h3>Common buttons</h3>
|
|
<!-- Standard button -->
|
|
<button type="button" class="btn btn-default">Default</button>
|
|
|
|
<!-- disabled button -->
|
|
<button type="button" class="btn btn-disabled">Disabled</button>
|
|
|
|
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
|
|
<button type="button" class="btn btn-primary">Primary</button>
|
|
|
|
<!-- Indicates a successful or positive action -->
|
|
<button type="button" class="btn btn-success">Success</button>
|
|
|
|
<!-- Contextual button for informational alert messages -->
|
|
<button type="button" class="btn btn-info">Info</button>
|
|
|
|
<!-- Indicates caution should be taken with this action -->
|
|
<button type="button" class="btn btn-warning">Warning</button>
|
|
|
|
<!-- Indicates a dangerous or potentially negative action -->
|
|
<button type="button" class="btn btn-danger">Danger</button>
|
|
|
|
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
|
|
<button type="button" class="btn btn-link">Button Link</button>
|
|
|
|
<!-- icon button -->
|
|
<button class="btn-circle-text" data-ember-action="1403"><i class="icon icon-plus-circle"></i> <span>Add Icon Button</span></button>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
|
|
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
|
|
</div>
|
|
|
|
<div class="r-pt20">
|
|
<h3>Pills</h3>
|
|
<!-- sort pill -->
|
|
<label class="text-muted r-pr5" style="font-size: 13px;">Sort By: </label>
|
|
<div class="btn-group r-pr0" role="group" aria-label="Sort By">
|
|
<button type="button" class="btn btn-sm btn-default active" data-ember-action="1957">State</button>
|
|
<button type="button" class="btn btn-sm btn-default " data-ember-action="1958">Name</button>
|
|
</div>
|
|
|
|
<!-- btn group -->
|
|
<div class="btn-group">
|
|
<a id="ember1693" href="/env/1a5/apps/add-service?environmentId=1e2" class="ember-view btn btn-default btn-sm">Add Service</a>
|
|
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
|
|
<i class="icon icon-fw icon-chevron-down"></i>
|
|
<span class="sr-only">Toggle Dropdown</span>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
|
<li><a id="ember1694" href="/env/1a5/apps/add-balancer?environmentId=1e2" class="ember-view">Add Load Balancer</a></li>
|
|
<li><a id="ember1695" href="/env/1a5/apps/add-alias?environmentId=1e2" class="ember-view">Add Service Alias</a></li>
|
|
<li><a id="ember1696" href="/env/1a5/apps/add-external?environmentId=1e2" class="ember-view">Add External Service</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- action menu -->
|
|
<div class="btn-group resource-actions action-menu">
|
|
<button class="btn btn-default btn-sm" data-primary="0" aria-label="Stop Services">
|
|
<div role="tooltip" class="ember-view inline-block"><i class="icon-fw icon icon-stop" alt="Stop Services"></i></div>
|
|
</button>
|
|
<button aria-label="More Actions" aria-controls="resource-actions" data-toggle="dropdown" data-target=".resource-actions" aria-expanded="false" class="btn btn-default btn-sm more-actions">
|
|
<i class="icon icon-fw icon-vertical-ellipsis" alt="More Actions"></i>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!--badges -->
|
|
<div id="badges" class="row well">
|
|
<h2>Badges</h2>
|
|
<hr/>
|
|
<span class="state badge text-success bg-success"><i class="icon icon-services"></i> Active</span>
|
|
<span class="state badge text-info bg-info"><i class="icon icon-spinner icon-spin"></i> Activating</span>
|
|
<span class="state badge text-warning bg-warning"><i class="icon icon-circle"></i> Initializing</span>
|
|
<span class="state badge text-danger bg-danger"><i class="icon icon-alert"></i> Inactive</span>
|
|
</div>
|
|
|
|
<!--banners and alerts -->
|
|
<div id="banners" class="row well">
|
|
<h2>Banners and Alerts</h2>
|
|
<hr/>
|
|
<div class="col-md-6">
|
|
<div class="alert alert-success alert-header">
|
|
<span class="banner-head">Alert with a header</span>
|
|
<span class="banner-content">Lorem ipsum dolor sit amet, adipiscing elit.</span>
|
|
</div>
|
|
|
|
<div class="alert alert-info alert-header">
|
|
<span class="banner-head">Alert with a header</span>
|
|
<span class="banner-content">Lorem ipsum dolor sit amet, adipiscing elit.</span>
|
|
</div>
|
|
|
|
<div class="alert alert-warning alert-header">
|
|
<span class="banner-head">Alert with a header</span>
|
|
<span class="banner-content">Lorem ipsum dolor sit amet, adipiscing elit.</span>
|
|
</div>
|
|
|
|
<div class="alert alert-danger alert-header">
|
|
<span class="banner-head">Alert with a header</span>
|
|
<span class="banner-content">Lorem ipsum dolor sit amet, adipiscing elit.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="alert alert-success" role="alert">
|
|
<a href="#" class="alert-link">Alert: Success message!</a>
|
|
</div>
|
|
|
|
<div class="alert alert-info" role="alert">
|
|
<a href="#" class="alert-link">Alert: Just some helpfule info...</a>
|
|
</div>
|
|
|
|
<div class="alert alert-warning" role="alert">
|
|
<a href="#" class="alert-link">Alert: Watch out this is a warning</a>
|
|
</div>
|
|
|
|
<div class="alert alert-danger" role="alert">
|
|
<a href="#" class="alert-link">Oh crap :(</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="icons" class="row well">
|
|
<h2>Icons</h2>
|
|
<hr/>
|
|
<span class="icon icon-auto"></span>
|
|
<span class="icon icon-moon"></span>
|
|
<span class="icon icon-sun"></span>
|
|
<span class="icon icon-circle"></span>
|
|
<span class="icon icon-adjust"></span>
|
|
<span class="icon icon-circle-o"></span>
|
|
<span class="icon icon-dot-diagonalfill"></span>
|
|
<span class="icon icon-dot-circlefill"></span>
|
|
<span class="icon icon-target"></span>
|
|
<span class="icon icon-spinner"></span>
|
|
<span class="icon icon-check"></span>
|
|
<span class="icon icon-x"></span>
|
|
<span class="icon icon-close"></span>
|
|
<span class="icon icon-chevron-down"></span>
|
|
<span class="icon icon-chevron-left"></span>
|
|
<span class="icon icon-chevron-right"></span>
|
|
<span class="icon icon-chevron-up"></span>
|
|
<span class="icon icon-plus"></span>
|
|
<span class="icon icon-medical-cross"></span>
|
|
<span class="icon icon-minus"></span>
|
|
<span class="icon icon-pause"></span>
|
|
<span class="icon icon-play"></span>
|
|
<span class="icon icon-stop"></span>
|
|
<span class="icon icon-download"></span>
|
|
<span class="icon icon-upload"></span>
|
|
<span class="icon icon-arrow-circle-up"></span>
|
|
<span class="icon icon-face-frown"></span>
|
|
<span class="icon icon-face-gasp"></span>
|
|
<span class="icon icon-face-meh"></span>
|
|
<span class="icon icon-face-open-smile"></span>
|
|
<span class="icon icon-face-smile"></span>
|
|
<span class="icon icon-help"></span>
|
|
<span class="icon icon-info"></span>
|
|
<span class="icon icon-history"></span>
|
|
<span class="icon icon-refresh"></span>
|
|
<span class="icon icon-success"></span>
|
|
<span class="icon icon-minus-circle"></span>
|
|
<span class="icon icon-plus-circle"></span>
|
|
<span class="icon icon-x-circle"></span>
|
|
<span class="icon icon-plus-square"></span>
|
|
<span class="icon icon-minus-square"></span>
|
|
<span class="icon icon-x-square"></span>
|
|
<span class="icon icon-square"></span>
|
|
<span class="icon icon-cpu"></span>
|
|
<span class="icon icon-memory"></span>
|
|
<span class="icon icon-hdd"></span>
|
|
<span class="icon icon-database"></span>
|
|
<span class="icon icon-network"></span>
|
|
<span class="icon icon-vm"></span>
|
|
<span class="icon icon-box"></span>
|
|
<span class="icon icon-container"></span>
|
|
<span class="icon icon-containers"></span>
|
|
<span class="icon icon-service"></span>
|
|
<span class="icon icon-services"></span>
|
|
<span class="icon icon-share"></span>
|
|
<span class="icon icon-tag"></span>
|
|
<span class="icon icon-home"></span>
|
|
<span class="icon icon-certificate"></span>
|
|
<span class="icon icon-process"></span>
|
|
<span class="icon icon-processes"></span>
|
|
<span class="icon icon-gear"></span>
|
|
<span class="icon icon-user"></span>
|
|
<span class="icon icon-users"></span>
|
|
<span class="icon icon-alert"></span>
|
|
<span class="icon icon-notification"></span>
|
|
<span class="icon icon-cloud"></span>
|
|
<span class="icon icon-compass"></span>
|
|
<span class="icon icon-tachometer"></span>
|
|
<span class="icon icon-globe"></span>
|
|
<span class="icon icon-stacks"></span>
|
|
<span class="icon icon-edit"></span>
|
|
<span class="icon icon-trash"></span>
|
|
<span class="icon icon-lock"></span>
|
|
<span class="icon icon-unlock"></span>
|
|
<span class="icon icon-key"></span>
|
|
<span class="icon icon-umbrella"></span>
|
|
<span class="icon icon-purged"></span>
|
|
<span class="icon icon-life-ring"></span>
|
|
<span class="icon icon-search"></span>
|
|
<span class="icon icon-terminal"></span>
|
|
<span class="icon icon-link"></span>
|
|
<span class="icon icon-external-link"></span>
|
|
<span class="icon icon-line-ellipsis"></span>
|
|
<span class="icon icon-ellipsis"></span>
|
|
<span class="icon icon-vertical-ellipsis"></span>
|
|
<span class="icon icon-copy"></span>
|
|
<span class="icon icon-file"></span>
|
|
<span class="icon icon-files"></span>
|
|
<span class="icon icon-layeredgroup"></span>
|
|
<span class="icon icon-layers"></span>
|
|
<span class="icon icon-catalog"></span>
|
|
<span class="icon icon-thumbnails"></span>
|
|
<span class="icon icon-folder"></span>
|
|
<span class="icon icon-folder-open"></span>
|
|
<span class="icon icon-sort"></span>
|
|
<span class="icon icon-sort-up"></span>
|
|
<span class="icon icon-sort-down"></span>
|
|
<span class="icon icon-fork"></span>
|
|
<span class="icon icon-level-down"></span>
|
|
<span class="icon icon-hamburger-nav"></span>
|
|
<span class="icon icon-tasks"></span>
|
|
<span class="icon icon-host"></span>
|
|
<span class="icon icon-logout"></span>
|
|
<span class="icon icon-apple"></span>
|
|
<span class="icon icon-docker"></span>
|
|
<span class="icon icon-github"></span>
|
|
<span class="icon icon-kubernetes"></span>
|
|
<span class="icon icon-linux"></span>
|
|
<span class="icon icon-rancher-cow"></span>
|
|
<span class="icon icon-windows"></span>
|
|
</div>
|
|
|
|
<div id="spinners">
|
|
</div>
|
|
|
|
<div id="forms" class="row well">
|
|
<h2>Forms</h2>
|
|
<hr>
|
|
<div class="row form-group">
|
|
<div class="col-sm-12 col-md-2 form-label">
|
|
<label>Quantity</label>
|
|
</div>
|
|
<div class="col-sm-2 col-md-1">
|
|
1
|
|
</div>
|
|
<div class="col-sm-10 col-md-7">
|
|
<div id="ember3272" class="ember-view slider"><div class="slider-bar" style="width: 0%;"></div>
|
|
<div class="slider-handle" tabindex="0" style="left: 0%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row form-group">
|
|
<div class="col-sm-12 col-md-2 form-label">
|
|
<label for="prefix" class="form-control-static">Name*</label>
|
|
</div>
|
|
<div class="col-sm-12 col-md-8">
|
|
<input id="prefix" placeholder="e.g. host01" type="text" style="" class="ember-view ember-text-field form-control">
|
|
<p class="help-block"><!----></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row form-group">
|
|
<div class="col-sm-12 col-md-2 form-label">
|
|
<label for="description" class="form-control-static">Description</label>
|
|
</div>
|
|
<div class="col-sm-12 col-md-8">
|
|
<textarea id="description" placeholder="e.g. My development host" rows="3" style="" class="ember-view ember-text-area form-control no-resize"><!----></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tables" class="row">
|
|
<h2>Cards</h2>
|
|
<div class="col-md-3 card">
|
|
<h3>This is a card header</h3>
|
|
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
|
|
</div>
|
|
|
|
<div class="col-md-3 card">
|
|
<h3>This is a card header</h3>
|
|
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
|
|
</div>
|
|
|
|
<div class="col-md-3 card">
|
|
<h3>This is a card header</h3>
|
|
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
|
|
</div>
|
|
|
|
<div class="col-md-3 card">
|
|
<h3>This is a card header</h3>
|
|
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tables" class="row">
|
|
<div class="col-lg-12">
|
|
<h2>Tables</h2>
|
|
<hr/>
|
|
<p>This style of table is found on /containers, /registries, </p>
|
|
<p><code>class="grid fixed"</code></p>
|
|
<table class="grid fixed well" style="margin-bottom: 0;">
|
|
<thead>
|
|
<tr>
|
|
{{sortable-th sortable=this action="changeSort" name="state" width="125"}} {{sortable-th sortable=this action="changeSort" name="name"}} {{sortable-th sortable=this action="changeSort" name="cn" label="Domain Name"}} {{sortable-th sortable=this action="changeSort"
|
|
name="expires" width="120"}}
|
|
<th class="actions" width="75"> </th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr id="ember1815" class="ember-view">
|
|
<td data-title="State:" class="state">
|
|
<span id="ember1816" class="ember-view state badge text-success bg-success"><i class="icon icon-dot-circlefill"></i> Started-Once</span>
|
|
</td>
|
|
<td data-title="Name:" class="force-wrap">
|
|
<a data-transition-link="true" href="/env/1a5/infra/containers/1i13">glusterfs_glusterfs-server_glusterfs-data_2</a>
|
|
</td>
|
|
<td data-title="IP Address:">
|
|
<span class="text-muted">None</span>
|
|
</td>
|
|
<td data-title="Primary Host:">
|
|
<a id="ember1817" href="/env/1a5/infra/hosts/1h3" class="ember-view">lauren-10acre-3</a>
|
|
</td>
|
|
<td data-title="Image:" class="clip">
|
|
busybox
|
|
<!---->
|
|
</td>
|
|
<td data-title="Command:" class="clip">
|
|
/bin/true
|
|
</td>
|
|
<td data-title="Actions:" class="actions">
|
|
<div id="ember1818" class="ember-view btn-group resource-actions action-menu">
|
|
<!---->
|
|
<button class="btn btn-default btn-xs" data-primary="0" aria-label="Start">
|
|
<div id="ember1992" role="tooltip" class="ember-view inline-block"> <i class="icon-fw icon icon-play" alt="Start"></i></div>
|
|
</button>
|
|
<button aria-label="More Actions" aria-controls="resource-actions" data-toggle="dropdown" data-target=".resource-actions" aria-expanded="false" class="btn btn-default btn-xs more-actions">
|
|
<i class="icon icon-fw icon-vertical-ellipsis" alt="More Actions"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr id="ember1822" class="ember-view">
|
|
<td data-title="State:" class="state">
|
|
<span id="ember1823" class="ember-view state badge text-success bg-success"><i class="icon icon-dot-circlefill"></i> Started-Once
|
|
</span>
|
|
</td>
|
|
<td data-title="Name:" class="force-wrap">
|
|
<a data-transition-link="true" href="/env/1a5/infra/containers/1i19">glusterfs_glusterfs-server_glusterfs-data_3</a>
|
|
</td>
|
|
<td data-title="IP Address:">
|
|
<span class="text-muted">None</span>
|
|
</td>
|
|
<td data-title="Primary Host:">
|
|
<a id="ember1824" href="/env/1a5/infra/hosts/1h1" class="ember-view">lauren-10acre-1</a>
|
|
</td>
|
|
<td data-title="Image:" class="clip">
|
|
busybox
|
|
<!---->
|
|
</td>
|
|
<td data-title="Command:" class="clip">
|
|
/bin/true
|
|
</td>
|
|
<td data-title="Actions:" class="actions">
|
|
<div id="ember1825" class="ember-view btn-group resource-actions action-menu">
|
|
<!---->
|
|
<button class="btn btn-default btn-xs" data-primary="0" aria-label="Start">
|
|
<div id="ember2010" role="tooltip" class="ember-view inline-block"> <i class="icon-fw icon icon-play" alt="Start"></i>
|
|
|
|
</div>
|
|
</button>
|
|
<button aria-label="More Actions" aria-controls="resource-actions" data-toggle="dropdown" data-target=".resource-actions" aria-expanded="false" class="btn btn-default btn-xs more-actions">
|
|
<i class="icon icon-fw icon-vertical-ellipsis" alt="More Actions"></i>
|
|
</button>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="ember1843" class="ember-view">
|
|
<td data-title="State:" class="state">
|
|
<span id="ember1844" class="ember-view state badge text-success bg-success"><i class="icon icon-dot-circlefill"></i> Started-Once
|
|
</span>
|
|
</td>
|
|
<td data-title="Name:" class="force-wrap">
|
|
<a data-transition-link="true" href="/env/1a5/infra/containers/1i25">glusterfs_glusterfs-server_glusterfs-volume-create_3</a>
|
|
</td>
|
|
<td data-title="IP Address:">
|
|
<span class="text-muted">None</span>
|
|
</td>
|
|
<td data-title="Primary Host:">
|
|
<a id="ember1845" href="/env/1a5/infra/hosts/1h1" class="ember-view">lauren-10acre-1</a>
|
|
</td>
|
|
<td data-title="Image:" class="clip">
|
|
rancher/glusterfs:v0.2.1
|
|
<!---->
|
|
</td>
|
|
<td data-title="Command:" class="clip">
|
|
/opt/rancher/replicated_volume_create.sh,container:glusterfs-server
|
|
</td>
|
|
<td data-title="Actions:" class="actions">
|
|
<div id="ember1846" class="ember-view btn-group resource-actions action-menu">
|
|
<!---->
|
|
<button class="btn btn-default btn-xs" data-primary="0" aria-label="Start">
|
|
<div id="ember2012" role="tooltip" class="ember-view inline-block"> <i class="icon-fw icon icon-play" alt="Start"></i>
|
|
|
|
</div>
|
|
</button>
|
|
<button aria-label="More Actions" aria-controls="resource-actions" data-toggle="dropdown" data-target=".resource-actions" aria-expanded="false" class="btn btn-default btn-xs more-actions">
|
|
<i class="icon icon-fw icon-vertical-ellipsis" alt="More Actions"></i>
|
|
</button>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr id="ember1850" class="ember-view">
|
|
<td data-title="State:" class="state">
|
|
<span id="ember1851" class="ember-view state badge text-warning bg-warning"><i class="icon icon-alert"></i> Initializing
|
|
</span>
|
|
</td>
|
|
<td data-title="Name:" class="force-wrap">
|
|
<a data-transition-link="true" href="/env/1a5/infra/containers/1i4643">kafka_broker_1</a>
|
|
</td>
|
|
<td data-title="IP Address:">
|
|
10.42.227.109
|
|
</td>
|
|
<td data-title="Primary Host:">
|
|
<a id="ember1852" href="/env/1a5/infra/hosts/1h2" class="ember-view">lauren-10acre-2</a>
|
|
</td>
|
|
<td data-title="Image:" class="clip">
|
|
rawmind/rancher-kafka:0.9.0
|
|
<!---->
|
|
</td>
|
|
<td data-title="Command:" class="clip">
|
|
<span class="text-muted">None</span>
|
|
</td>
|
|
<td data-title="Actions:" class="actions">
|
|
<div id="ember1853" class="ember-view btn-group resource-actions action-menu">
|
|
<!---->
|
|
<button class="btn btn-default btn-xs" data-primary="0" aria-label="Restart">
|
|
<div id="ember2027" role="tooltip" class="ember-view inline-block"> <i class="icon-fw icon icon-refresh" alt="Restart"></i>
|
|
|
|
</div>
|
|
</button>
|
|
<button aria-label="More Actions" aria-controls="resource-actions" data-toggle="dropdown" data-target=".resource-actions" aria-expanded="false" class="btn btn-default btn-xs more-actions">
|
|
<i class="icon icon-fw icon-vertical-ellipsis" alt="More Actions"></i>
|
|
</button>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr id="ember1856" class="ember-view">
|
|
<td data-title="State:" class="state">
|
|
<span id="ember1857" class="ember-view state badge text-warning bg-warning"><i class="icon icon-alert"></i> Initializing
|
|
</span>
|
|
</td>
|
|
<td data-title="Name:" class="force-wrap">
|
|
<a data-transition-link="true" href="/env/1a5/infra/containers/1i4644">kafka_broker_2</a>
|
|
</td>
|
|
<td data-title="IP Address:">
|
|
10.42.112.226
|
|
</td>
|
|
<td data-title="Primary Host:">
|
|
<a id="ember1858" href="/env/1a5/infra/hosts/1h2" class="ember-view">lauren-10acre-2</a>
|
|
</td>
|
|
<td data-title="Image:" class="clip">
|
|
rawmind/rancher-kafka:0.9.0
|
|
<!---->
|
|
</td>
|
|
<td data-title="Command:" class="clip">
|
|
<span class="text-muted">None</span>
|
|
</td>
|
|
<td data-title="Actions:" class="actions">
|
|
<div id="ember1859" class="ember-view btn-group resource-actions action-menu">
|
|
<!---->
|
|
<button class="btn btn-default btn-xs" data-primary="0" aria-label="Restart">
|
|
<div id="ember2029" role="tooltip" class="ember-view inline-block"> <i class="icon-fw icon icon-refresh" alt="Restart"></i>
|
|
|
|
</div>
|
|
</button>
|
|
<button aria-label="More Actions" aria-controls="resource-actions" data-toggle="dropdown" data-target=".resource-actions" aria-expanded="false" class="btn btn-default btn-xs more-actions">
|
|
<i class="icon icon-fw icon-vertical-ellipsis" alt="More Actions"></i>
|
|
</button>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
<p>Expanding nested list with alternting row color</p>
|
|
<div id="ember1611" class="ember-view stack-section">
|
|
<div class="clearfix well r-p0 r-m0">
|
|
<div class="stack-state pull-left bg-success">
|
|
<div id="ember1612" role="tooltip" class="ember-view inline-block"> <i class="icon icon-layers" aria-label="Active"></i>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="header-left collapser">
|
|
<a class="btn btn-link" data-ember-action="1613"><i alt="Toggle stack details" title="" class="icon icon-minus"></i></a>
|
|
</div>
|
|
|
|
<div class="header-left name ">
|
|
<h4 class="divider clip environment-link">
|
|
<a id="ember1614" href="/env/1a5/apps/stacks/1e1" class="ember-view">elasticsearch</a>
|
|
</h4>
|
|
<!---->
|
|
</div>
|
|
|
|
<!---->
|
|
<div class="header-right right-divider stack-actions wide">
|
|
<div id="ember1615" class="ember-view btn-group resource-actions action-menu">
|
|
<!---->
|
|
<button class="btn btn-default btn-xs" data-primary="0" aria-label="Stop Services">
|
|
<div id="ember1617" role="tooltip" class="ember-view inline-block"> <i class="icon-fw icon icon-stop" alt="Stop Services"></i>
|
|
|
|
</div>
|
|
</button>
|
|
<button aria-label="More Actions" aria-controls="resource-actions" data-toggle="dropdown" data-target=".resource-actions" aria-expanded="false" class="btn btn-default btn-xs more-actions">
|
|
<i class="icon icon-fw icon-vertical-ellipsis" alt="More Actions"></i>
|
|
</button>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="header-right right-divider count">
|
|
<p>11</p>
|
|
<label>Containers</label>
|
|
</div>
|
|
|
|
<div class="header-right right-divider count">
|
|
<p>5</p>
|
|
<label>Services</label>
|
|
</div>
|
|
|
|
<div class="header-right right-divider stack-template">
|
|
<button id="ember1619" class="ember-view btn btn-sm btn-disabled">Up to date
|
|
</button>
|
|
<div class="btn-group">
|
|
<a id="ember1620" href="/env/1a5/apps/add-service?environmentId=1e1" class="ember-view btn btn-default btn-sm">Add Service</a>
|
|
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
|
|
<i class="icon icon-fw icon-chevron-down"></i>
|
|
<span class="sr-only">Toggle Dropdown</span>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
|
<li><a id="ember1621" href="/env/1a5/apps/add-balancer?environmentId=1e1" class="ember-view">Add Load Balancer</a></li>
|
|
<li><a id="ember1622" href="/env/1a5/apps/add-alias?environmentId=1e1" class="ember-view">Add Service Alias</a></li>
|
|
<li><a id="ember1623" href="/env/1a5/apps/add-external?environmentId=1e1" class="ember-view">Add External Service</a></li>
|
|
<!---->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="ember1625" class="ember-view liquid-container">
|
|
<div id="ember1628" class="ember-view liquid-child" style="top: 0px; left: 0px;">
|
|
<div class="stack-body ">
|
|
<!---->
|
|
<table class="grid fixed" style="margin-bottom: 0">
|
|
<tbody>
|
|
<tr>
|
|
<td data-title="State:" class="state">
|
|
<span id="ember1630" class="ember-view state badge text-success bg-success"><i class="icon icon-services"></i> Active
|
|
</span>
|
|
</td>
|
|
<td data-title="Service Name:" class="force-wrap">
|
|
<a id="ember1631" href="/env/1a5/apps/stacks/1e1/services/1s3" class="ember-view">elasticsearch-clients</a> + 2 Sidekicks
|
|
<button type="button" class="btn-link" role="button" data-ember-action="1632">
|
|
<i class="icon icon-info addtl-info-trigger"></i>
|
|
</button>
|
|
</td>
|
|
<td data-title="Details:" class="force-wrap service-detail">
|
|
<label>Image: </label><span>rancher/elasticsearch-conf:v0.4.0</span>
|
|
<!---->
|
|
</td>
|
|
<td data-title="Kind:">
|
|
Service
|
|
</td>
|
|
<td data-title="Containers:">
|
|
3 Containers
|
|
</td>
|
|
<td data-title="Actions:" class="actions wide">
|
|
<div id="ember1633" class="ember-view btn-group resource-actions action-menu">
|
|
<!---->
|
|
<button class="btn btn-default btn-xs" data-primary="0" aria-label="Stop">
|
|
<div id="ember1635" role="tooltip" class="ember-view inline-block"> <i class="icon-fw icon icon-stop" alt="Stop"></i>
|
|
|
|
</div>
|
|
</button>
|
|
<button aria-label="More Actions" aria-controls="resource-actions" data-toggle="dropdown" data-target=".resource-actions" aria-expanded="false" class="btn btn-default btn-xs more-actions">
|
|
<i class="icon icon-fw icon-vertical-ellipsis" alt="More Actions"></i>
|
|
</button>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-title="State:" class="state">
|
|
<span id="ember1637" class="ember-view state badge text-success bg-success"><i class="icon icon-services"></i> Active
|
|
</span>
|
|
</td>
|
|
<td data-title="Service Name:" class="force-wrap">
|
|
<a id="ember1638" href="/env/1a5/apps/stacks/1e1/services/1s2" class="ember-view">elasticsearch-datanodes</a> + 2 Sidekicks
|
|
<button type="button" class="btn-link" role="button" data-ember-action="1639">
|
|
<i class="icon icon-info addtl-info-trigger"></i>
|
|
</button>
|
|
</td>
|
|
<td data-title="Details:" class="force-wrap service-detail">
|
|
<label>Image: </label><span>rancher/elasticsearch-conf:v0.4.0</span>
|
|
<!---->
|
|
</td>
|
|
<td data-title="Kind:">
|
|
Service
|
|
</td>
|
|
<td data-title="Containers:">
|
|
3 Containers
|
|
</td>
|
|
<td data-title="Actions:" class="actions wide">
|
|
<div id="ember1640" class="ember-view btn-group resource-actions action-menu">
|
|
<!---->
|
|
<button class="btn btn-default btn-xs" data-primary="0" aria-label="Stop">
|
|
<div id="ember1642" role="tooltip" class="ember-view inline-block"> <i class="icon-fw icon icon-stop" alt="Stop"></i>
|
|
|
|
</div>
|
|
</button>
|
|
<button aria-label="More Actions" aria-controls="resource-actions" data-toggle="dropdown" data-target=".resource-actions" aria-expanded="false" class="btn btn-default btn-xs more-actions">
|
|
<i class="icon icon-fw icon-vertical-ellipsis" alt="More Actions"></i>
|
|
</button>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-title="State:" class="state">
|
|
<span id="ember1644" class="ember-view state badge text-success bg-success"><i class="icon icon-services"></i> Active
|
|
</span>
|
|
</td>
|
|
<td data-title="Service Name:" class="force-wrap">
|
|
<a id="ember1645" href="/env/1a5/apps/stacks/1e1/services/1s1" class="ember-view">elasticsearch-masters</a> + 2 Sidekicks
|
|
<button type="button" class="btn-link" role="button" data-ember-action="1646">
|
|
<i class="icon icon-info addtl-info-trigger"></i>
|
|
</button>
|
|
</td>
|
|
<td data-title="Details:" class="force-wrap service-detail">
|
|
<label>Image: </label><span>rancher/elasticsearch-conf:v0.4.0</span>
|
|
<!---->
|
|
</td>
|
|
<td data-title="Kind:">
|
|
Service
|
|
</td>
|
|
<td data-title="Containers:">
|
|
3 Containers
|
|
</td>
|
|
<td data-title="Actions:" class="actions wide">
|
|
<div id="ember1647" class="ember-view btn-group resource-actions action-menu">
|
|
<!---->
|
|
<button class="btn btn-default btn-xs" data-primary="0" aria-label="Stop">
|
|
<div id="ember1649" role="tooltip" class="ember-view inline-block"> <i class="icon-fw icon icon-stop" alt="Stop"></i>
|
|
|
|
</div>
|
|
</button>
|
|
<button aria-label="More Actions" aria-controls="resource-actions" data-toggle="dropdown" data-target=".resource-actions" aria-expanded="false" class="btn btn-default btn-xs more-actions">
|
|
<i class="icon icon-fw icon-vertical-ellipsis" alt="More Actions"></i>
|
|
</button>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-title="State:" class="state">
|
|
<span id="ember1651" class="ember-view state badge text-success bg-success"><i class="icon icon-services"></i> Active
|
|
</span>
|
|
</td>
|
|
<td data-title="Service Name:" class="force-wrap">
|
|
<a id="ember1652" href="/env/1a5/apps/stacks/1e1/services/1s4" class="ember-view">kopf</a>
|
|
<!---->
|
|
<button type="button" class="btn-link" role="button" data-ember-action="1653">
|
|
<i class="icon icon-info addtl-info-trigger"></i>
|
|
</button>
|
|
</td>
|
|
<td data-title="Details:" class="force-wrap service-detail">
|
|
<label>Image: </label><span>rancher/kopf:v0.4.0</span>
|
|
<label>Ports: </label><span><a href="http://104.154.79.99" target="_blank">80</a></span> </td>
|
|
<td data-title="Kind:">
|
|
Service
|
|
</td>
|
|
<td data-title="Containers:">
|
|
1 Container
|
|
<!---->
|
|
</td>
|
|
<td data-title="Actions:" class="actions wide">
|
|
<div id="ember1654" class="ember-view btn-group resource-actions action-menu">
|
|
<!---->
|
|
<button class="btn btn-default btn-xs" data-primary="0" aria-label="Stop">
|
|
<div id="ember1656" role="tooltip" class="ember-view inline-block"> <i class="icon-fw icon icon-stop" alt="Stop"></i>
|
|
|
|
</div>
|
|
</button>
|
|
<button aria-label="More Actions" aria-controls="resource-actions" data-toggle="dropdown" data-target=".resource-actions" aria-expanded="false" class="btn btn-default btn-xs more-actions">
|
|
<i class="icon icon-fw icon-vertical-ellipsis" alt="More Actions"></i>
|
|
</button>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-title="State:" class="state">
|
|
<span id="ember1658" class="ember-view state badge text-success bg-success"><i class="icon icon-services"></i> Active
|
|
</span>
|
|
</td>
|
|
<td data-title="Service Name:" class="force-wrap">
|
|
<a id="ember1659" href="/env/1a5/apps/stacks/1e1/services/1s16" class="ember-view">test4343</a>
|
|
<!---->
|
|
<button type="button" class="btn-link" role="button" data-ember-action="1660">
|
|
<i class="icon icon-info addtl-info-trigger"></i>
|
|
</button>
|
|
</td>
|
|
<td data-title="Details:" class="force-wrap service-detail">
|
|
<label>Image: </label><span>ubuntu:14.04.3</span>
|
|
<label>Ports: </label><span><a href="http://104.197.220.119" target="_blank">80</a></span> </td>
|
|
<td data-title="Kind:">
|
|
Service
|
|
</td>
|
|
<td data-title="Containers:">
|
|
1 Container
|
|
<!---->
|
|
</td>
|
|
<td data-title="Actions:" class="actions wide">
|
|
<div id="ember1661" class="ember-view btn-group resource-actions action-menu">
|
|
<!---->
|
|
<button class="btn btn-default btn-xs" data-primary="0" aria-label="Stop">
|
|
<div id="ember1663" role="tooltip" class="ember-view inline-block"> <i class="icon-fw icon icon-stop" alt="Stop"></i>
|
|
|
|
</div>
|
|
</button>
|
|
<button aria-label="More Actions" aria-controls="resource-actions" data-toggle="dropdown" data-target=".resource-actions" aria-expanded="false" class="btn btn-default btn-xs more-actions">
|
|
<i class="icon icon-fw icon-vertical-ellipsis" alt="More Actions"></i>
|
|
</button>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p>Tabbed Table</p>
|
|
<section>
|
|
<ul class="nav nav-tabs nav-tabs-well shadowed">
|
|
<li id="ember1592" href="false" class="ember-view active"><a href="#"><i class="icon icon-tag"></i> Labels</a></li>
|
|
<li id="ember1593" href="false" class="ember-view"><a href="#"><i class="icon icon-hdd"></i> Volumes</a></li>
|
|
<li id="ember1594" href="false" class="ember-view"><a href="#"><i class="icon icon-network"></i> Ports</a></li>
|
|
</ul>
|
|
<div class="table-flat well">
|
|
<div id="ember1773" class="ember-view">
|
|
<table class="grid fixed" style="margin-bottom: 0;">
|
|
<thead>
|
|
<tr>
|
|
<th id="ember1783" role="columnheader" width="90" class="ember-view sortable">
|
|
<button class="btn btn-link r-p0">
|
|
Kind
|
|
<span class="icon-stack">
|
|
<i class="icon icon-sort icon-stack-1x faded"></i>
|
|
<i class="icon icon-sort-up icon-stack-1x"></i>
|
|
</span>
|
|
</button>
|
|
</th>
|
|
<th id="ember1784" role="columnheader" class="ember-view sortable">
|
|
<button class="btn btn-link r-p0">
|
|
Key
|
|
<span class="icon-stack">
|
|
<i class="icon icon-sort icon-stack-1x faded"></i>
|
|
<!----> </span>
|
|
</button>
|
|
</th>
|
|
<th id="ember1785" role="columnheader" class="ember-view sortable">
|
|
<button class="btn btn-link r-p0">
|
|
Value
|
|
<span class="icon-stack">
|
|
<i class="icon icon-sort icon-stack-1x faded"></i>
|
|
<!----> </span>
|
|
</button>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-title="Kind:">System</td>
|
|
<td data-title="Key:" class="force-wrap">io.rancher.stack.name</td>
|
|
<td data-title="Value:" class="force-wrap">
|
|
<div id="ember1786" class="ember-view"> elasticsearch</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td data-title="Kind:">System</td>
|
|
<td data-title="Key:" class="force-wrap">io.rancher.project.name</td>
|
|
<td data-title="Value:" class="force-wrap">
|
|
<div id="ember1791" class="ember-view"> elasticsearch</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-title="Kind:">System</td>
|
|
<td data-title="Key:" class="force-wrap">io.rancher.project_service.name</td>
|
|
<td data-title="Value:" class="force-wrap">
|
|
<div id="ember1792" class="ember-view"> elasticsearch/elasticsearch-clients</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-title="Kind:">System</td>
|
|
<td data-title="Key:" class="force-wrap">io.rancher.container.hostname_override</td>
|
|
<td data-title="Value:" class="force-wrap">
|
|
<div id="ember1793" class="ember-view"> container_name</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-title="Kind:">Affinity</td>
|
|
<td data-title="Key:" class="force-wrap">io.rancher.scheduler.affinity:container_label_soft</td>
|
|
<td data-title="Value:" class="force-wrap">
|
|
<div id="ember1794" class="ember-view"> io.rancher.service.deployment.unit=54d88c7f-e5bc-47d7-a18b-0d012b057559</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- /#page-content-wrapper -->
|
|
|
|
</div>
|
|
<!-- /#wrapper -->
|