Replace all usages of container-fluid class
Page && PageSection compoents should be used in the react pages and the corresponding classes in the non-react. container-fluid class comes from bootstrap which we try to stop using. Closes #14717
This commit is contained in:
Katerina Koukiou
Matej Marusak
parent
7f5528976a
commit
a406a35805
|
|
@ -5,15 +5,19 @@
|
|||
<script src="../base1/cockpit.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<h2>Docker Daemon Info</h2>
|
||||
<ul>
|
||||
<li>Total Memory: <span id="docker-memory">?</span></li>
|
||||
<li>Go Routines: <span id="docker-routines">?</span></li>
|
||||
<li>File Descriptors: <span id="docker-files">?</span></li>
|
||||
<li>Containers: <span id="docker-containers">?</span></li>
|
||||
<li>Images: <span id="docker-images">?</span></li>
|
||||
</ul>
|
||||
<div class="pf-c-page">
|
||||
<main class="pf-c-page__main" tabindex="-1">
|
||||
<section class="pf-c-page__main-section pf-m-light">
|
||||
<h2>Docker Daemon Info</h2>
|
||||
<ul>
|
||||
<li>Total Memory: <span id="docker-memory">?</span></li>
|
||||
<li>Go Routines: <span id="docker-routines">?</span></li>
|
||||
<li>File Descriptors: <span id="docker-files">?</span></li>
|
||||
<li>Containers: <span id="docker-containers">?</span></li>
|
||||
<li>Images: <span id="docker-images">?</span></li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -11,10 +11,14 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<p><label>State:</label> <span id="state"></span></p>
|
||||
<p><input id="command" type="text" /> <button id="run" disabled>Start</button></p>
|
||||
<pre id="output"></pre>
|
||||
<div class="pf-c-page">
|
||||
<main class="pf-c-page__main" tabindex="-1">
|
||||
<section class="pf-c-page__main-section pf-m-light">
|
||||
<p><label>State:</label> <span id="state"></span></p>
|
||||
<p><input id="command" type="text" /> <button id="run" disabled>Start</button></p>
|
||||
<pre id="output"></pre>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -28,48 +28,49 @@ along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
|
|||
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
|
||||
</head>
|
||||
<body hidden>
|
||||
|
||||
<div class="curtain-ocserv blank-slate-pf" hidden>
|
||||
<div class="blank-slate-pf-icon">
|
||||
<div class="fa fa-exclamation-circle"></div>
|
||||
</div>
|
||||
<h1>Couldn't connect to OpenConnect Server</h1>
|
||||
<p></p>
|
||||
</div>
|
||||
|
||||
<div id="status-info" class="container-fluid page-ct">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<span id="head">Server status</span>
|
||||
<div class="pf-c-page">
|
||||
<main class="pf-c-page__main" tabindex="-1">
|
||||
<div class="curtain-ocserv blank-slate-pf" hidden>
|
||||
<div class="blank-slate-pf-icon">
|
||||
<div class="fa fa-exclamation-circle"></div>
|
||||
</div>
|
||||
<h1>Couldn't connect to OpenConnect Server</h1>
|
||||
<p></p>
|
||||
</div>
|
||||
<table class="info-table-ct" id="status-table">
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<section id="status-info" class="pf-c-page__main-section pf-m-light">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<span id="head">Server status</span>
|
||||
</div>
|
||||
<table class="info-table-ct" id="status-table">
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="users-info" class="pf-c-page__main-section pf-m-light">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<span id="head">Connected users</span>
|
||||
</div>
|
||||
<table class="table table-hover" id="users-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="ocserv-users-id">ID</th>
|
||||
<th class="ocserv-users-name">Username</th>
|
||||
<th class="ocserv-users-remote-ip">Remote IP</th>
|
||||
<th class="ocserv-users-ip">VPN IP</th>
|
||||
<th class="ocserv-users-since">Since</th>
|
||||
<th class="ocserv-users-state">State</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="users-table-tbody">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div id="users-info" class="container-fluid">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<span id="head">Connected users</span>
|
||||
</div>
|
||||
<table class="table table-hover" id="users-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="ocserv-users-id">ID</th>
|
||||
<th class="ocserv-users-name">Username</th>
|
||||
<th class="ocserv-users-remote-ip">Remote IP</th>
|
||||
<th class="ocserv-users-ip">VPN IP</th>
|
||||
<th class="ocserv-users-since">Since</th>
|
||||
<th class="ocserv-users-state">State</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="users-table-tbody">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
var raw;
|
||||
var status_raw;
|
||||
|
|
|
|||
|
|
@ -6,42 +6,46 @@
|
|||
<script src="../base1/cockpit.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<h2>Example: Simple Package</h2>
|
||||
<div class="pf-c-page">
|
||||
<main class="pf-c-page__main" tabindex="-1">
|
||||
<section class="pf-c-page__main-section pf-m-light">
|
||||
<h2>Example: Simple Package</h2>
|
||||
|
||||
<p>This example is an installable cockpit package that runs a simple command
|
||||
to ping a remote address.</p>
|
||||
<p>This example is an installable cockpit package that runs a simple command
|
||||
to ping a remote address.</p>
|
||||
|
||||
<p>Link the package into your home directory:</p>
|
||||
<ol>
|
||||
<li>Make sure Cockpit works on the local machine.</li>
|
||||
<li>Link this directory into your home directory:
|
||||
<pre>$ mkdir -p ~/.local/share/cockpit
|
||||
$ ln -snf $(pwd) ~/.local/share/cockpit/playground
|
||||
$ sudo systemctl restart cockpit</pre>
|
||||
</li>
|
||||
<li>Log into cockpit using your web browser, with the same account as the above.</li>
|
||||
<li>Choose this item from the sidebar menu</li>
|
||||
<li>Feel free to edit this file and refresh in the browser.</li>
|
||||
</ol>
|
||||
</div>
|
||||
<p>Link the package into your home directory:</p>
|
||||
<ol>
|
||||
<li>Make sure Cockpit works on the local machine.</li>
|
||||
<li>Link this directory into your home directory:
|
||||
<pre>$ mkdir -p ~/.local/share/cockpit
|
||||
$ ln -snf $(pwd) ~/.local/share/cockpit/playground
|
||||
$ sudo systemctl restart cockpit</pre>
|
||||
</li>
|
||||
<li>Log into cockpit using your web browser, with the same account as the above.</li>
|
||||
<li>Choose this item from the sidebar menu</li>
|
||||
<li>Feel free to edit this file and refresh in the browser.</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<div class="container-fluid">
|
||||
<table class="form-table-ct">
|
||||
<tr>
|
||||
<td><label class="control-label" for="address">URL</label></td>
|
||||
<td><input class="form-control" id="address" value="8.8.8.8"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button class="pf-c-button pf-m-secondary pf-m-primary" id="ping">Ping</button></td>
|
||||
<td><button class="pf-c-button pf-m-secondary pf-m-danger" disabled id="stop">Stop</button></td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>
|
||||
<pre id="output" style="display: none;">
|
||||
</pre>
|
||||
</p>
|
||||
<p id="failure" class="warning"></p>
|
||||
<section class="pf-c-page__main-section pf-m-light">
|
||||
<table class="form-table-ct">
|
||||
<tr>
|
||||
<td><label class="control-label" for="address">URL</label></td>
|
||||
<td><input class="form-control" id="address" value="8.8.8.8"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button class="pf-c-button pf-m-secondary pf-m-primary" id="ping">Ping</button></td>
|
||||
<td><button class="pf-c-button pf-m-secondary pf-m-danger" disabled id="stop">Stop</button></td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>
|
||||
<pre id="output" style="display: none;">
|
||||
</pre>
|
||||
</p>
|
||||
<p id="failure" class="warning"></p>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -7,18 +7,22 @@
|
|||
<script src="../base1/cockpit.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<table class="form-table-ct">
|
||||
<tr>
|
||||
<td><label class="control-label" for="address">Address</label></td>
|
||||
<td><input class="form-control" id="address" value="8.8.8.8"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button class="pf-c-button pf-m-primary" id="ping">Ping</button></td>
|
||||
<td><span id="result"></span></td>
|
||||
</tr>
|
||||
</table>
|
||||
<pre id="output"></pre>
|
||||
<div class="pf-c-page">
|
||||
<main class="pf-c-page__main" tabindex="-1">
|
||||
<section class="pf-c-page__main-section pf-m-light">
|
||||
<table class="form-table-ct">
|
||||
<tr>
|
||||
<td><label class="control-label" for="address">Address</label></td>
|
||||
<td><input class="form-control" id="address" value="8.8.8.8"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button class="pf-c-button pf-m-primary" id="ping">Ping</button></td>
|
||||
<td><span id="result"></span></td>
|
||||
</tr>
|
||||
</table>
|
||||
<pre id="output"></pre>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="pinger.js"></script>
|
||||
|
|
|
|||
|
|
@ -7,27 +7,30 @@
|
|||
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<h2>Proof of Concept: CIM Access</h2>
|
||||
<div class="pf-c-page">
|
||||
<main class="pf-c-page__main" tabindex="-1">
|
||||
<section class="pf-c-page__main-section pf-m-light">
|
||||
<h2>Proof of Concept: CIM Access</h2>
|
||||
|
||||
<p>This is a proof of concept for accessing CIM data via Pegasus in Cockpit.</p>
|
||||
<p>This is a proof of concept for accessing CIM data via Pegasus in Cockpit.</p>
|
||||
|
||||
<p><button class="pf-c-button pf-m-secondary pf-m-primary" id="process">Process List</button>
|
||||
<span id="message" class="warning" hidden></span></p>
|
||||
|
||||
<table class="table table-hover" style="font-size: 11px" hidden>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>PID</td>
|
||||
<td>Name</td>
|
||||
<td>UID</td>
|
||||
<td>Priority</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
<p><button class="pf-c-button pf-m-secondary pf-m-primary" id="process">Process List</button>
|
||||
<span id="message" class="warning" hidden></span></p>
|
||||
|
||||
<table class="table table-hover" style="font-size: 11px" hidden>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>PID</td>
|
||||
<td>Name</td>
|
||||
<td>UID</td>
|
||||
<td>Priority</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -7,24 +7,27 @@
|
|||
<script src="../base1/cockpit.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<table class="form-table-ct">
|
||||
<tr>
|
||||
<th><label class="control-label" for="address">URL</label></th>
|
||||
<td><input class="form-control" id="address" value="http://localhost:12345"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th></th>
|
||||
<td><button class="pf-c-button pf-m-primary" id="get">GET request</button></td>
|
||||
<tr>
|
||||
<th>Code</th>
|
||||
<td><span id="result"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Output</th>
|
||||
<td><pre id="output"></pre></td>
|
||||
</table>
|
||||
|
||||
<div class="pf-c-page">
|
||||
<main class="pf-c-page__main" tabindex="-1">
|
||||
<section class="pf-c-page__main-section pf-m-light">
|
||||
<table class="form-table-ct">
|
||||
<tr>
|
||||
<th><label class="control-label" for="address">URL</label></th>
|
||||
<td><input class="form-control" id="address" value="http://localhost:12345"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th></th>
|
||||
<td><button class="pf-c-button pf-m-primary" id="get">GET request</button></td>
|
||||
<tr>
|
||||
<th>Code</th>
|
||||
<td><span id="result"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Output</th>
|
||||
<td><pre id="output"></pre></td>
|
||||
</table>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="xhrproxy.js"></script>
|
||||
|
|
|
|||
|
|
@ -5,21 +5,25 @@
|
|||
<script src="../base1/cockpit.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid" style='max-width: 400px'>
|
||||
<table class="form-table-ct">
|
||||
<tr>
|
||||
<td><label class="control-label">Time Zone</label></td>
|
||||
<td><span id="current"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label class="control-label" for="new">New Zone</label></td>
|
||||
<td><input class="form-control" id="new" value="UTC"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button class="pf-c-button pf-m-secondary pf-m-primary" id="change">Change</button></td>
|
||||
<td><span id="failure"></span></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="pf-c-page">
|
||||
<main class="pf-c-page__main" tabindex="-1">
|
||||
<section class="pf-c-page__main-section pf-m-light">
|
||||
<table class="form-table-ct">
|
||||
<tr>
|
||||
<td><label class="control-label">Time Zone</label></td>
|
||||
<td><span id="current"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label class="control-label" for="new">New Zone</label></td>
|
||||
<td><input class="form-control" id="new" value="UTC"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button class="pf-c-button pf-m-secondary pf-m-primary" id="change">Change</button></td>
|
||||
<td><span id="failure"></span></td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ import {
|
|||
DataList, DataListItem, DataListItemRow, DataListCell,
|
||||
DataListAction,
|
||||
DataListItemCells,
|
||||
Page, PageSection, PageSectionVariants,
|
||||
} from "@patternfly/react-core";
|
||||
import { RebootingIcon } from "@patternfly/react-icons";
|
||||
|
||||
|
|
@ -162,20 +163,22 @@ export class ApplicationList extends React.Component {
|
|||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<header className='ct-table-header'>
|
||||
<h2 className='ct-table-heading'>{_("Applications")}</h2>
|
||||
<div className='ct-table-actions'>
|
||||
<div className="right-menu">
|
||||
{refresh_progress}
|
||||
{refresh_button}
|
||||
<Page>
|
||||
<PageSection variant={PageSectionVariants.light}>
|
||||
<header className='ct-table-header'>
|
||||
<h2 className='ct-table-heading'>{_("Applications")}</h2>
|
||||
<div className='ct-table-actions'>
|
||||
<div className="right-menu">
|
||||
{refresh_progress}
|
||||
{refresh_button}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<DataList aria-label={_("Applications list")}>
|
||||
{ tbody }
|
||||
</DataList>
|
||||
</>
|
||||
</header>
|
||||
<DataList aria-label={_("Applications list")}>
|
||||
{ tbody }
|
||||
</DataList>
|
||||
</PageSection>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,11 +8,6 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.ct-table-header {
|
||||
/* Add enough spacing to align header & refresh to the list edges */
|
||||
padding: 0 var(--pf-global--spacer--md) var(--pf-global--spacer--md);
|
||||
}
|
||||
|
||||
.app-list-empty {
|
||||
color: var(--color-subtle-copy);
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -30,11 +30,11 @@ along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
|
|||
</head>
|
||||
<body class="pf-m-redhat-font" hidden>
|
||||
|
||||
<div id="list-page" class="container-fluid page-ct">
|
||||
<div id="list-page">
|
||||
<div id="list"></div>
|
||||
</div>
|
||||
|
||||
<div id="app-page" class="container-fluid page-ct">
|
||||
<div id="app-page">
|
||||
<div id="app"></div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -32,9 +32,9 @@
|
|||
</head>
|
||||
<body class="pf-m-redhat-font" hidden>
|
||||
|
||||
<div id="dashboard" class="container-fluid page-ct">
|
||||
<div class="row" role="presentation">
|
||||
<div class="col-md-12">
|
||||
<div id="dashboard" class="pf-c-page">
|
||||
<main class="pf-c-page__main">
|
||||
<section class="pf-c-page__main-section pf-m-light">
|
||||
<div id="dashboard-toolbar" class="pull-right zoom-controls">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
|
|
@ -80,10 +80,8 @@
|
|||
<div class="dashboard-plot zoomable-plot" id="dashboard-plot-1"></div>
|
||||
<div class="dashboard-plot zoomable-plot" id="dashboard-plot-2"></div>
|
||||
<div class="dashboard-plot zoomable-plot" id="dashboard-plot-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
</section>
|
||||
<section class="pf-c-page__main-section pf-m-light">
|
||||
<div class="panel panel-default" id="dashboard-hosts">
|
||||
<div class="panel-heading">
|
||||
<h2 class="panel-title" translate>Servers</h2>
|
||||
|
|
@ -101,90 +99,90 @@
|
|||
<div class="list-group">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script id="dashboard-hosts-tmpl" type="x-template/mustache">
|
||||
{{#machines}}
|
||||
{{! state can be 'failed' or 'connected' }}
|
||||
<a data-address="{{address}}" class="list-group-item {{state}}"
|
||||
data-color="{{ color }}" target="_parent" href="/@{{address}}">
|
||||
<button class="pf-c-button pf-m-danger delete-button servers-privileged delete-{{address}} btn-sm">
|
||||
<span class='pficon pficon-delete' />
|
||||
</button>
|
||||
<button class="pf-c-button pf-m-secondary edit-button servers-privileged btn-sm">
|
||||
<span class="pficon pficon-edit" />
|
||||
</button>
|
||||
<img class="host-avatar {{avatar_display}}" role="{{aria_role}}" alt="{{alt_text}}" title="{{alt_text}}" src="{{render_avatar}}">
|
||||
<div class="spinner {{connecting_display}}"></div>
|
||||
<div class="os">{{os}}</div>
|
||||
<span class="host-label">{{label}}
|
||||
<span class="reconnecting {{connecting_display}}"
|
||||
translate="yes">Lost connection. Trying to reconnect</span></span>
|
||||
</a>
|
||||
{{/machines}}
|
||||
</script>
|
||||
|
||||
<div class="modal" id="dashboard_setup_server_dialog" tabindex="-1" role="dialog"
|
||||
data-backdrop="static">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script id="dashboard-hosts-tmpl" type="x-template/mustache">
|
||||
{{#machines}}
|
||||
{{! state can be 'failed' or 'connected' }}
|
||||
<a data-address="{{address}}" class="list-group-item {{state}}"
|
||||
data-color="{{ color }}" target="_parent" href="/@{{address}}">
|
||||
<button class="pf-c-button pf-m-danger delete-button servers-privileged delete-{{address}} btn-sm">
|
||||
<span class='pficon pficon-delete' />
|
||||
</button>
|
||||
<button class="pf-c-button pf-m-secondary edit-button servers-privileged btn-sm">
|
||||
<span class="pficon pficon-edit" />
|
||||
</button>
|
||||
<img class="host-avatar {{avatar_display}}" role="{{aria_role}}" alt="{{alt_text}}" title="{{alt_text}}" src="{{render_avatar}}">
|
||||
<div class="spinner {{connecting_display}}"></div>
|
||||
<div class="os">{{os}}</div>
|
||||
<span class="host-label">{{label}}
|
||||
<span class="reconnecting {{connecting_display}}"
|
||||
translate="yes">Lost connection. Trying to reconnect</span></span>
|
||||
</a>
|
||||
{{/machines}}
|
||||
</script>
|
||||
|
||||
<div class="modal" id="dashboard_setup_server_dialog" tabindex="-1" role="dialog"
|
||||
data-backdrop="static">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal" id="host-edit-dialog" tabindex="-1" role="dialog" data-backdrop="static">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title" translate>Edit server</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div>
|
||||
<input data-role="none" type="file" id="host-edit-file-input" hidden/>
|
||||
<table class="form-table-ct">
|
||||
<tr>
|
||||
<td class="top" translate="yes">Host name</td>
|
||||
<td>
|
||||
<input class="form-control" id="host-edit-name"/>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr id="host-edit-user-row">
|
||||
<td class="top" translate="yes">User</td>
|
||||
<td>
|
||||
<input class="form-control" id="host-edit-user"/>
|
||||
</td>
|
||||
<td>
|
||||
<a tabindex="0" role="button" data-toggle="popover"
|
||||
data-trigger="focus" data-placement="bottom" translate="data-content"
|
||||
data-content="Leave blank to connect to this machine as the currently logged in user. If you enter a different username, that user will always be used when connecting to this machine.">
|
||||
<span class="fa fa-lg fa-info-circle"></span>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td translate="yes">Color</td>
|
||||
<td id="host-edit-colorpicker">
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="top" translate="yes">Avatar</td>
|
||||
<td>
|
||||
<div id="host-edit-avatar"></div>
|
||||
<div id="host-edit-fail"></div>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="pf-c-button pf-m-primary" id="host-edit-apply" translate="yes">Set</button>
|
||||
<button class="pf-c-button pf-m-link" data-dismiss="modal" translate="yes">Cancel</button>
|
||||
<div class="pull-right"><a role="link" tabindex="0" id="host-edit-sync-users" translate="yes">Synchronize users</a></div>
|
||||
<div class="modal" id="host-edit-dialog" tabindex="-1" role="dialog" data-backdrop="static">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title" translate>Edit server</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div>
|
||||
<input data-role="none" type="file" id="host-edit-file-input" hidden/>
|
||||
<table class="form-table-ct">
|
||||
<tr>
|
||||
<td class="top" translate="yes">Host name</td>
|
||||
<td>
|
||||
<input class="form-control" id="host-edit-name"/>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr id="host-edit-user-row">
|
||||
<td class="top" translate="yes">User</td>
|
||||
<td>
|
||||
<input class="form-control" id="host-edit-user"/>
|
||||
</td>
|
||||
<td>
|
||||
<a tabindex="0" role="button" data-toggle="popover"
|
||||
data-trigger="focus" data-placement="bottom" translate="data-content"
|
||||
data-content="Leave blank to connect to this machine as the currently logged in user. If you enter a different username, that user will always be used when connecting to this machine.">
|
||||
<span class="fa fa-lg fa-info-circle"></span>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td translate="yes">Color</td>
|
||||
<td id="host-edit-colorpicker">
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="top" translate="yes">Avatar</td>
|
||||
<td>
|
||||
<div id="host-edit-avatar"></div>
|
||||
<div id="host-edit-fail"></div>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="pf-c-button pf-m-primary" id="host-edit-apply" translate="yes">Set</button>
|
||||
<button class="pf-c-button pf-m-link" data-dismiss="modal" translate="yes">Cancel</button>
|
||||
<div class="pull-right"><a role="link" tabindex="0" id="host-edit-sync-users" translate="yes">Synchronize users</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,6 @@
|
|||
|
||||
.popover-ct-kdump {
|
||||
margin-left: 5px;
|
||||
/* Don't escape the container-fluid */
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import "./patternfly/patternfly-4-overrides.scss";
|
||||
@import "../../node_modules/@patternfly/patternfly/components/Page/page.scss";
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -452,8 +452,7 @@ small {
|
|||
// Bump content away from cards
|
||||
.content,
|
||||
.page-ct,
|
||||
.container,
|
||||
.container-fluid {
|
||||
.container {
|
||||
--container-padding-x: var(--pf-global--spacer--md);
|
||||
--container-padding-y: var(--pf-global--spacer--lg);
|
||||
--container-padding: var(--container-padding-y) var(--container-padding-x);
|
||||
|
|
@ -468,8 +467,7 @@ small {
|
|||
// Add PF4 padding to desktop mode
|
||||
.content,
|
||||
.page-ct,
|
||||
.container,
|
||||
.container-fluid {
|
||||
.container {
|
||||
--container-padding-x: var(--pf-global--spacer--lg);
|
||||
--container-padding-y: var(--pf-global--spacer--xl);
|
||||
|
||||
|
|
@ -481,7 +479,7 @@ small {
|
|||
|
||||
// Rely on page-ct padding; don't duplicate
|
||||
.page-ct .container,
|
||||
.page-ct .container-fluid {
|
||||
.page-ct {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
|
@ -494,8 +492,7 @@ small {
|
|||
// Bump content away from cards
|
||||
.content,
|
||||
.page-ct,
|
||||
.container,
|
||||
.container-fluid {
|
||||
.container {
|
||||
.cards-pf + & {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -73,9 +73,8 @@
|
|||
@media screen and (max-width: 640px) {
|
||||
/* Remove _most_ of the gaps on the sides of small screens */
|
||||
/* to maximize space, but still keep the boxy panel look */
|
||||
/* (container-fluid & page-ct adds 20px, so we remove 1/2 of that) */
|
||||
/* (page-ct adds 20px, so we remove 1/2 of that) */
|
||||
.page-ct > .panel,
|
||||
.container-fluid > .panel,
|
||||
.col-md-12 > .panel {
|
||||
margin-left: -10px;
|
||||
margin-right: -10px;
|
||||
|
|
|
|||
|
|
@ -7,12 +7,16 @@
|
|||
<script src="../base1/cockpit.js"></script>
|
||||
</head>
|
||||
<body class="pf-m-redhat-font" hidden>
|
||||
<div id="internal" class="container-fluid">
|
||||
<h2>Exception</h2>
|
||||
<div id="internal" class="pf-c-page">
|
||||
<main class="pf-c-page__main" tabindex="-1">
|
||||
<section class="pf-c-page__main-section pf-m-light">
|
||||
<h2>Exception</h2>
|
||||
|
||||
<p>Clicking this button should make a javascript exception happen.<p>
|
||||
<p>Clicking this button should make a javascript exception happen.<p>
|
||||
|
||||
<button id="exception">Exception</button>
|
||||
<button id="exception">Exception</button>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
<script src="exception.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -10,16 +10,20 @@
|
|||
<script src="index.js"></script>
|
||||
</head>
|
||||
<body class="pf-m-redhat-font">
|
||||
<section class="container-fluid">
|
||||
<h2>Development Playground</h2>
|
||||
<ul id="nav"></ul>
|
||||
</section>
|
||||
<section class="container-fluid">
|
||||
<h2>Page Status</h2>
|
||||
<label>Type <input id="type"></label>
|
||||
<label>Title <input id="title"></label>
|
||||
<button id="set-status">Set</button>
|
||||
<button id="clear-status">Clear</button>
|
||||
</section>
|
||||
<div class="pf-c-page">
|
||||
<main class="pf-c-page__main" tabindex="-1">
|
||||
<section class="pf-c-page__main-section pf-m-light">
|
||||
<h2>Development Playground</h2>
|
||||
<ul id="nav"></ul>
|
||||
</section>
|
||||
<section class="pf-c-page__main-section pf-m-light">
|
||||
<h2>Page Status</h2>
|
||||
<label>Type <input id="type"></label>
|
||||
<label>Title <input id="title"></label>
|
||||
<button id="set-status">Set</button>
|
||||
<button id="clear-status">Clear</button>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -10,10 +10,12 @@
|
|||
</head>
|
||||
|
||||
<body class="pf-m-redhat-font">
|
||||
|
||||
<div class="container-fluid">
|
||||
<div id="journal-box"></div>
|
||||
</div>
|
||||
|
||||
<div class="pf-c-page">
|
||||
<main class="pf-c-page__main" tabindex="-1">
|
||||
<section class="pf-c-page__main-section pf-m-light">
|
||||
<div id="journal-box"></div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -10,364 +10,365 @@
|
|||
<script src="jquery-patterns.js"></script>
|
||||
</head>
|
||||
<body class="pf-m-redhat-font" hidden>
|
||||
|
||||
<div class="modal" id="test-dialog" tabindex="-1" role="dialog" data-backdrop="static">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Example Dialog</h4>
|
||||
<div class="pf-c-page">
|
||||
<main class="pf-c-page__main" tabindex="-1">
|
||||
<div class="modal" id="test-dialog" tabindex="-1" role="dialog" data-backdrop="static">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Example Dialog</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<table class="form-table-ct">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="top">
|
||||
<label class="control-label" for="control-1">
|
||||
Label
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<input id="control-1" class="form-control" type="text">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="top">
|
||||
<label class="control-label" for="control-2">
|
||||
Select
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<!-- Note that bootstrap-select is horrible ... but we use the styling -->
|
||||
<div class="btn-group bootstrap-select dropdown form-control" id="control-2">
|
||||
<button class="btn btn-default dropdown-toggle" type="button"
|
||||
data-toggle="dropdown">
|
||||
<span class="pull-left">One</span>
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li value="one"><a role="link" tabindex="0">One</a></li>
|
||||
<li value="two"><a role="link" tabindex="0">Two</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="pf-c-button pf-m-link" data-dismiss="modal">
|
||||
Cancel
|
||||
</button>
|
||||
<button class="pf-c-button pf-m-secondary" id="clear-button">
|
||||
Clear
|
||||
</button>
|
||||
<button class="pf-c-button pf-m-danger" id="error-button">
|
||||
Error
|
||||
</button>
|
||||
<button class="pf-c-button pf-m-primary" id="wait-button">
|
||||
Wait
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<table class="form-table-ct">
|
||||
<tbody>
|
||||
|
||||
<section class="pf-c-page__main-section pf-m-light">
|
||||
<h3>Dialogs</h3>
|
||||
<button class="pf-c-button pf-m-secondary" data-target="#test-dialog" data-toggle="modal">
|
||||
Show Dialog
|
||||
</button>
|
||||
<hr>
|
||||
</section>
|
||||
|
||||
<section class="pf-c-page__main-section pf-m-light">
|
||||
<table class="listing-ct">
|
||||
<thead>
|
||||
<tr>
|
||||
<td class="top">
|
||||
<label class="control-label" for="control-1">
|
||||
Label
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<input id="control-1" class="form-control" type="text">
|
||||
<td colspan="5">
|
||||
<h3>Listing with Panels</h3>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="top">
|
||||
<label class="control-label" for="control-2">
|
||||
Select
|
||||
</label>
|
||||
<th class="listing-ct-toggle"></th>
|
||||
<th>Name</th>
|
||||
<th>Project</th>
|
||||
<th>Address</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="listing-ct-item">
|
||||
<td class="listing-ct-toggle">
|
||||
<i class="fa fa-fw"></i>
|
||||
</td>
|
||||
<td>
|
||||
<!-- Note that bootstrap-select is horrible ... but we use the styling -->
|
||||
<div class="btn-group bootstrap-select dropdown form-control" id="control-2">
|
||||
<button class="btn btn-default dropdown-toggle" type="button"
|
||||
data-toggle="dropdown">
|
||||
<span class="pull-left">One</span>
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li value="one"><a role="link" tabindex="0">One</a></li>
|
||||
<li value="two"><a role="link" tabindex="0">Two</a></li>
|
||||
<th>frontend</th>
|
||||
<td>aoeuaoeu</td>
|
||||
<td>127.30.168.10</td>
|
||||
<td>Running</td>
|
||||
</tr>
|
||||
<tr class="ct-listing-panel">
|
||||
<td colspan="5">
|
||||
<div class=ct-listing-panel-head">
|
||||
<div class="ct-listing-panel-actions">
|
||||
<button title="Adjust" class="pf-c-button pf-m-secondary pficon pficon-edit"></button>
|
||||
</div>
|
||||
<ul class="nav nav-tabs nav-tabs-pf">
|
||||
<li class="active"><a href="#">Pod</a></li>
|
||||
<li><a href="#">Containers</a></li>
|
||||
<li><a href="#">Logs</a></li>
|
||||
<li><a href="#">Shell</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-listing-panel-body">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<dl>
|
||||
<dt>Project</dt>
|
||||
<dd>aoeuaoeu</dd>
|
||||
<dt>Created</dt>
|
||||
<dd title="2015-09-26 15:33">14 days ago</dd>
|
||||
<dt>Restart policy</dt>
|
||||
<dd>Always</dd>
|
||||
<dt>Service Account</dt>
|
||||
<dd>default</dd>
|
||||
<dt>DNS Policy</dt>
|
||||
<dd>ClusterFirst</dd>
|
||||
<dt>Phase</dt>
|
||||
<dd>running</dd>
|
||||
<dt>Node</dt>
|
||||
<dd>openshiftdev.local</dd>
|
||||
<dt>Pod Address</dt>
|
||||
<dd>1.2.3.4</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<dl class="full-width">
|
||||
<dt>Labels</dt>
|
||||
<dd>name=frontend</dd>
|
||||
<dd>template=ruby-hello-world</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr class="listing-ct-item">
|
||||
<td class="listing-ct-toggle">
|
||||
<i class="fa fa-fw"></i>
|
||||
</td>
|
||||
<th>redis-master</th>
|
||||
<td>aoeuaoeu</td>
|
||||
<td>127.30.173.79:6379</td>
|
||||
<td>Ready</td>
|
||||
</tr>
|
||||
<tr class="ct-listing-panel">
|
||||
<td colspan="5">
|
||||
<div class="ct-listing-panel-head">
|
||||
<div class="ct-listing-panel-actions">
|
||||
<button title="Adjust" class="pf-c-button pf-m-secondary pficon pficon-edit"></button>
|
||||
</div>
|
||||
<ul class="nav nav-tabs nav-tabs-pf">
|
||||
<li class="active"><a href="#">Pod</a></li>
|
||||
<li><a href="#">Containers</a></li>
|
||||
<li><a href="#">Logs</a></li>
|
||||
<li><a href="#">Shell</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="listing-ct-body">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<dl>
|
||||
<dt>Project</dt>
|
||||
<dd>aoeuaoeu</dd>
|
||||
<dt>Created</dt>
|
||||
<dd title="2015-09-26 15:33">10 days ago</dd>
|
||||
<dt>Restart policy</dt>
|
||||
<dd>Always</dd>
|
||||
<dt>Service Account</dt>
|
||||
<dd>default</dd>
|
||||
<dt>DNS Policy</dt>
|
||||
<dd>ClusterFirst</dd>
|
||||
<dt>Phase</dt>
|
||||
<dd>running</dd>
|
||||
<dt>Node</dt>
|
||||
<dd>openshiftdev.local</dd>
|
||||
<dt>Pod Address</dt>
|
||||
<dd>1.2.3.5</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<dl class="full-width">
|
||||
<dt>Labels</dt>
|
||||
<dd>name=redis-master</dd>
|
||||
<dd>template=ruby-hello-world</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="pf-c-button pf-m-link" data-dismiss="modal">
|
||||
Cancel
|
||||
</button>
|
||||
<button class="pf-c-button pf-m-secondary" id="clear-button">
|
||||
Clear
|
||||
</button>
|
||||
<button class="pf-c-button pf-m-danger" id="error-button">
|
||||
Error
|
||||
</button>
|
||||
<button class="pf-c-button pf-m-primary" id="wait-button">
|
||||
Wait
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="listing-ct">
|
||||
<thead>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<h3>Listing with Timeline</h3>
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="timeline-ct timeline-ct-end">
|
||||
<i class="fa fa-caret-up timeline-ct-point timeline-ct-md"></i>
|
||||
<div class="ct-listing-panel listing-ct-maybe">
|
||||
<div class="listing-ct-head">
|
||||
<div class="listing-ct-actions">
|
||||
<button class="pf-c-button pf-m-secondary">Check for updates</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="timeline-ct">
|
||||
<i class="fa fa-circle timeline-ct-point"></i>
|
||||
<div class="ct-listing-panel">
|
||||
<div class="ct-listing-panel-head">
|
||||
<div class="ct-listing-panel-actions">
|
||||
<button class="pf-c-button pf-m-primary">Update and reboot</button>
|
||||
</div>
|
||||
<h3>fedora-atomic: 24.2</h3>
|
||||
<div class="listing-ct-status">
|
||||
Available
|
||||
</div>
|
||||
<ul class="nav nav-tabs nav-tabs-pf">
|
||||
<li><a href="#">Tree</a></li>
|
||||
<li class="active"><a href="#">Packages</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="listing-ct-error alert" ng-if="error">
|
||||
<span class="pficon pficon-warning-triangle-o"></span>
|
||||
There was an error
|
||||
</div>
|
||||
<div class="listing-ct-body">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<dl>
|
||||
<dt>Operating system</dt>
|
||||
<dd>fedora-atomic</dd>
|
||||
<dt>Revision Number</dt>
|
||||
<dd>24.2</dd>
|
||||
<dt>Released</dt>
|
||||
<dd title="2015-09-26 15:33">3 days ago</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<dl>
|
||||
<dt>Additions</dt>
|
||||
<dd>10 packages</dd>
|
||||
<dt>Removals</dt>
|
||||
<dd>3 packages</dd>
|
||||
<dt>Changes</dt>
|
||||
<dd>18 packages</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody class="active">
|
||||
<tr>
|
||||
<td>
|
||||
<div class="timeline-ct">
|
||||
<i class="fa fa-check-circle-o timeline-ct-point timeline-ct-lg active"></i>
|
||||
<div class="ct-listing-panel">
|
||||
<div class="ct-listing-panel-head">
|
||||
<div class="ct-listing-panel-actions">
|
||||
</div>
|
||||
<div class="listing-ct-status">
|
||||
Installed
|
||||
</div>
|
||||
<h3>fedora-atomic: 24.1</h3>
|
||||
<ul class="nav nav-tabs nav-tabs-pf">
|
||||
<li class="active"><a href="#">Tree</a></li>
|
||||
<li><a href="#">Packages</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="listing-ct-body">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<dl>
|
||||
<dt>Operating system</dt>
|
||||
<dd>fedora-atomic</dd>
|
||||
<dt>Revision Number</dt>
|
||||
<dd>24.1</dd>
|
||||
<dt>Released</dt>
|
||||
<dd title="2015-08-29 15:33">1 month ago</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="timeline-ct">
|
||||
<div class="timeline-ct-point timeline-ct-md">
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
<div class="ct-listing-panel">
|
||||
<div class="ct-listing-panel-head">
|
||||
<div class="ct-listing-panel-actions">
|
||||
</div>
|
||||
<div class="listing-ct-status">
|
||||
Downloading manifests 85%
|
||||
</div>
|
||||
<h3>fedora-atomic: 24.0</h3>
|
||||
<ul class="nav nav-tabs nav-tabs-pf">
|
||||
<li class="active"><a href="#">Tree</a></li>
|
||||
<li><a href="#">Packages</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="listing-ct-body">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<dl>
|
||||
<dt>Operating system</dt>
|
||||
<dd>fedora-atomic</dd>
|
||||
<dt>Revision Number</dt>
|
||||
<dd>24.1</dd>
|
||||
<dt>Released</dt>
|
||||
<dd title="2015-08-29 15:33">1 month ago</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3>Dialogs</h3>
|
||||
<button class="pf-c-button pf-m-secondary" data-target="#test-dialog" data-toggle="modal">
|
||||
Show Dialog
|
||||
</button>
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<table class="listing-ct">
|
||||
<thead>
|
||||
<tr>
|
||||
<td colspan="5">
|
||||
<h3>Listing with Panels</h3>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="listing-ct-toggle"></th>
|
||||
<th>Name</th>
|
||||
<th>Project</th>
|
||||
<th>Address</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="listing-ct-item">
|
||||
<td class="listing-ct-toggle">
|
||||
<i class="fa fa-fw"></i>
|
||||
</td>
|
||||
<th>frontend</th>
|
||||
<td>aoeuaoeu</td>
|
||||
<td>127.30.168.10</td>
|
||||
<td>Running</td>
|
||||
</tr>
|
||||
<tr class="ct-listing-panel">
|
||||
<td colspan="5">
|
||||
<div class=ct-listing-panel-head">
|
||||
<div class="ct-listing-panel-actions">
|
||||
<button title="Adjust" class="pf-c-button pf-m-secondary pficon pficon-edit"></button>
|
||||
</div>
|
||||
<ul class="nav nav-tabs nav-tabs-pf">
|
||||
<li class="active"><a href="#">Pod</a></li>
|
||||
<li><a href="#">Containers</a></li>
|
||||
<li><a href="#">Logs</a></li>
|
||||
<li><a href="#">Shell</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-listing-panel-body">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<dl>
|
||||
<dt>Project</dt>
|
||||
<dd>aoeuaoeu</dd>
|
||||
<dt>Created</dt>
|
||||
<dd title="2015-09-26 15:33">14 days ago</dd>
|
||||
<dt>Restart policy</dt>
|
||||
<dd>Always</dd>
|
||||
<dt>Service Account</dt>
|
||||
<dd>default</dd>
|
||||
<dt>DNS Policy</dt>
|
||||
<dd>ClusterFirst</dd>
|
||||
<dt>Phase</dt>
|
||||
<dd>running</dd>
|
||||
<dt>Node</dt>
|
||||
<dd>openshiftdev.local</dd>
|
||||
<dt>Pod Address</dt>
|
||||
<dd>1.2.3.4</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<dl class="full-width">
|
||||
<dt>Labels</dt>
|
||||
<dd>name=frontend</dd>
|
||||
<dd>template=ruby-hello-world</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr class="listing-ct-item">
|
||||
<td class="listing-ct-toggle">
|
||||
<i class="fa fa-fw"></i>
|
||||
</td>
|
||||
<th>redis-master</th>
|
||||
<td>aoeuaoeu</td>
|
||||
<td>127.30.173.79:6379</td>
|
||||
<td>Ready</td>
|
||||
</tr>
|
||||
<tr class="ct-listing-panel">
|
||||
<td colspan="5">
|
||||
<div class="ct-listing-panel-head">
|
||||
<div class="ct-listing-panel-actions">
|
||||
<button title="Adjust" class="pf-c-button pf-m-secondary pficon pficon-edit"></button>
|
||||
</div>
|
||||
<ul class="nav nav-tabs nav-tabs-pf">
|
||||
<li class="active"><a href="#">Pod</a></li>
|
||||
<li><a href="#">Containers</a></li>
|
||||
<li><a href="#">Logs</a></li>
|
||||
<li><a href="#">Shell</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="listing-ct-body">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<dl>
|
||||
<dt>Project</dt>
|
||||
<dd>aoeuaoeu</dd>
|
||||
<dt>Created</dt>
|
||||
<dd title="2015-09-26 15:33">10 days ago</dd>
|
||||
<dt>Restart policy</dt>
|
||||
<dd>Always</dd>
|
||||
<dt>Service Account</dt>
|
||||
<dd>default</dd>
|
||||
<dt>DNS Policy</dt>
|
||||
<dd>ClusterFirst</dd>
|
||||
<dt>Phase</dt>
|
||||
<dd>running</dd>
|
||||
<dt>Node</dt>
|
||||
<dd>openshiftdev.local</dd>
|
||||
<dt>Pod Address</dt>
|
||||
<dd>1.2.3.5</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<dl class="full-width">
|
||||
<dt>Labels</dt>
|
||||
<dd>name=redis-master</dd>
|
||||
<dd>template=ruby-hello-world</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table class="listing-ct">
|
||||
<thead>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<h3>Listing with Timeline</h3>
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="timeline-ct timeline-ct-end">
|
||||
<i class="fa fa-caret-up timeline-ct-point timeline-ct-md"></i>
|
||||
<div class="ct-listing-panel listing-ct-maybe">
|
||||
<div class="listing-ct-head">
|
||||
<div class="listing-ct-actions">
|
||||
<button class="pf-c-button pf-m-secondary">Check for updates</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="timeline-ct">
|
||||
<i class="fa fa-circle timeline-ct-point"></i>
|
||||
<div class="ct-listing-panel">
|
||||
<div class="ct-listing-panel-head">
|
||||
<div class="ct-listing-panel-actions">
|
||||
<button class="pf-c-button pf-m-primary">Update and reboot</button>
|
||||
</div>
|
||||
<h3>fedora-atomic: 24.2</h3>
|
||||
<div class="listing-ct-status">
|
||||
Available
|
||||
</div>
|
||||
<ul class="nav nav-tabs nav-tabs-pf">
|
||||
<li><a href="#">Tree</a></li>
|
||||
<li class="active"><a href="#">Packages</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="listing-ct-error alert" ng-if="error">
|
||||
<span class="pficon pficon-warning-triangle-o"></span>
|
||||
There was an error
|
||||
</div>
|
||||
<div class="listing-ct-body">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<dl>
|
||||
<dt>Operating system</dt>
|
||||
<dd>fedora-atomic</dd>
|
||||
<dt>Revision Number</dt>
|
||||
<dd>24.2</dd>
|
||||
<dt>Released</dt>
|
||||
<dd title="2015-09-26 15:33">3 days ago</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<dl>
|
||||
<dt>Additions</dt>
|
||||
<dd>10 packages</dd>
|
||||
<dt>Removals</dt>
|
||||
<dd>3 packages</dd>
|
||||
<dt>Changes</dt>
|
||||
<dd>18 packages</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody class="active">
|
||||
<tr>
|
||||
<td>
|
||||
<div class="timeline-ct">
|
||||
<i class="fa fa-check-circle-o timeline-ct-point timeline-ct-lg active"></i>
|
||||
<div class="ct-listing-panel">
|
||||
<div class="ct-listing-panel-head">
|
||||
<div class="ct-listing-panel-actions">
|
||||
</div>
|
||||
<div class="listing-ct-status">
|
||||
Installed
|
||||
</div>
|
||||
<h3>fedora-atomic: 24.1</h3>
|
||||
<ul class="nav nav-tabs nav-tabs-pf">
|
||||
<li class="active"><a href="#">Tree</a></li>
|
||||
<li><a href="#">Packages</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="listing-ct-body">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<dl>
|
||||
<dt>Operating system</dt>
|
||||
<dd>fedora-atomic</dd>
|
||||
<dt>Revision Number</dt>
|
||||
<dd>24.1</dd>
|
||||
<dt>Released</dt>
|
||||
<dd title="2015-08-29 15:33">1 month ago</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="timeline-ct">
|
||||
<div class="timeline-ct-point timeline-ct-md">
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
<div class="ct-listing-panel">
|
||||
<div class="ct-listing-panel-head">
|
||||
<div class="ct-listing-panel-actions">
|
||||
</div>
|
||||
<div class="listing-ct-status">
|
||||
Downloading manifests 85%
|
||||
</div>
|
||||
<h3>fedora-atomic: 24.0</h3>
|
||||
<ul class="nav nav-tabs nav-tabs-pf">
|
||||
<li class="active"><a href="#">Tree</a></li>
|
||||
<li><a href="#">Packages</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="listing-ct-body">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<dl>
|
||||
<dt>Operating system</dt>
|
||||
<dd>fedora-atomic</dd>
|
||||
<dt>Revision Number</dt>
|
||||
<dd>24.1</dd>
|
||||
<dt>Released</dt>
|
||||
<dd title="2015-08-29 15:33">1 month ago</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -10,10 +10,14 @@
|
|||
<script src="metrics.js"></script>
|
||||
</head>
|
||||
<body class="pf-m-redhat-font" hidden>
|
||||
<div class="container-fluid">
|
||||
<h1>Monitoring</h1>
|
||||
<button id="reload">Reload</button>
|
||||
<div id="results"></div>
|
||||
<div class="pf-c-page">
|
||||
<main class="pf-c-page__main" tabindex="-1">
|
||||
<section class="pf-c-page__main-section pf-m-light">
|
||||
<h1>Monitoring</h1>
|
||||
<button id="reload">Reload</button>
|
||||
<div id="results"></div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -9,8 +9,12 @@
|
|||
<script src="pkgs.js"></script>
|
||||
</head>
|
||||
<body class="pf-m-redhat-font" hidden>
|
||||
<div class="container-fluid">
|
||||
<button id="reload">Reload</button>
|
||||
<div class="pf-c-page">
|
||||
<main class="pf-c-page__main" tabindex="-1">
|
||||
<section class="pf-c-page__main-section pf-m-light">
|
||||
<button id="reload">Reload</button>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -10,43 +10,47 @@
|
|||
<script src="plot.js"></script>
|
||||
</head>
|
||||
<body class="pf-m-redhat-font" hidden>
|
||||
<div class="container-fluid">
|
||||
<h1>Plots</h1>
|
||||
<div class="pf-c-page">
|
||||
<main class="pf-c-page__main" tabindex="-1">
|
||||
<header class="pf-c-page__header">
|
||||
<h1>Plots</h1>
|
||||
</header>
|
||||
|
||||
<div id="toolbar" class="zoom-controls">
|
||||
<div class="dropdown" style="display:inline-block">
|
||||
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<span style="width:6em;text-align:left;padding-left:5px;display:inline-block"></span>
|
||||
<i class="fa fa-caret-down pf-c-context-selector__toggle-icon" aria-hidden="true"></i>
|
||||
<div id="toolbar" class="zoom-controls">
|
||||
<div class="dropdown" style="display:inline-block">
|
||||
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<span style="width:6em;text-align:left;padding-left:5px;display:inline-block"></span>
|
||||
<i class="fa fa-caret-down pf-c-context-selector__toggle-icon" aria-hidden="true"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li role="presentation"><a tabindex="0" role="menuitem" data-action="goto-now">Go to now</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a tabindex="0" role="menuitem" data-range="300">5 minutes</a></li>
|
||||
<li role="presentation"><a tabindex="0" role="menuitem" data-range="3600">1 hour</a></li>
|
||||
<li role="presentation"><a tabindex="0" role="menuitem" data-range="21600">6 hours</a></li>
|
||||
<li role="presentation"><a tabindex="0" role="menuitem" data-range="86400">1 day</a></li>
|
||||
<li role="presentation"><a tabindex="0" role="menuitem" data-range="604800">1 week</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<button class="pf-c-button pf-m-secondary" data-action="zoom-out">
|
||||
<span class="glyphicon glyphicon-zoom-out"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li role="presentation"><a tabindex="0" role="menuitem" data-action="goto-now">Go to now</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a tabindex="0" role="menuitem" data-range="300">5 minutes</a></li>
|
||||
<li role="presentation"><a tabindex="0" role="menuitem" data-range="3600">1 hour</a></li>
|
||||
<li role="presentation"><a tabindex="0" role="menuitem" data-range="21600">6 hours</a></li>
|
||||
<li role="presentation"><a tabindex="0" role="menuitem" data-range="86400">1 day</a></li>
|
||||
<li role="presentation"><a tabindex="0" role="menuitem" data-range="604800">1 week</a></li>
|
||||
</ul>
|
||||
<div class="btn-group">
|
||||
<button class="pf-c-button pf-m-secondary" data-action="scroll-left">
|
||||
<span class="fa fa-angle-left" />
|
||||
</button>
|
||||
<button class="pf-c-button pf-m-secondary" data-action="scroll-right">
|
||||
<span class="fa fa-angle-right" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="pf-c-button pf-m-secondary" data-action="zoom-out">
|
||||
<span class="glyphicon glyphicon-zoom-out"></span>
|
||||
</button>
|
||||
<div class="btn-group">
|
||||
<button class="pf-c-button pf-m-secondary" data-action="scroll-left">
|
||||
<span class="fa fa-angle-left" />
|
||||
</button>
|
||||
<button class="pf-c-button pf-m-secondary" data-action="scroll-right">
|
||||
<span class="fa fa-angle-right" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="plot-unit" id="plot_direct_unit"></span>
|
||||
<div id="plot_direct" class="zoomable-plot"></div>
|
||||
<span class="plot-unit" id="plot_direct_unit"></span>
|
||||
<div id="plot_direct" class="zoomable-plot"></div>
|
||||
|
||||
<span class="plot-unit" id="plot_pmcd_unit"></span>
|
||||
<div id="plot_pmcd" class="zoomable-plot"></div>
|
||||
<span class="plot-unit" id="plot_pmcd_unit"></span>
|
||||
<div id="plot_pmcd" class="zoomable-plot"></div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -10,43 +10,38 @@
|
|||
</head>
|
||||
|
||||
<body class="pf-m-redhat-font">
|
||||
<div class="pf-c-page">
|
||||
<main class="pf-c-page__main" tabindex="-1">
|
||||
<section class="pf-c-page__main-section pf-m-light">
|
||||
<h3>Select file</h3>
|
||||
<div id="demo-file-ac"></div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
<section class="pf-c-page__main-section pf-m-light">
|
||||
<h3>Dialogs</h3>
|
||||
<button id="demo-show-dialog" class="pf-c-button pf-m-secondary">Show Dialog</button>
|
||||
<button id="demo-show-error-dialog" class="pf-c-button pf-m-secondary">Show Error-Dialog</button>
|
||||
<div id="demo-dialog-result"></div>
|
||||
</section>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3>Select file</h3>
|
||||
<div id="demo-file-ac"></div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<section class="pf-c-page__main-section pf-m-light">
|
||||
<h3>Listing Pattern</h3>
|
||||
<div id="demo-listing"></div>
|
||||
<div id="demo-listing-selectable"></div>
|
||||
<div id="demo-listing-empty"></div>
|
||||
</section>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3>Dialogs</h3>
|
||||
<button id="demo-show-dialog" class="pf-c-button pf-m-secondary">Show Dialog</button>
|
||||
<button id="demo-show-error-dialog" class="pf-c-button pf-m-secondary">Show Error-Dialog</button>
|
||||
<div id="demo-dialog-result"></div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3>Listing Pattern</h3>
|
||||
<div id="demo-listing"></div>
|
||||
<div id="demo-listing-selectable"></div>
|
||||
<div id="demo-listing-empty"></div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3>OnOff Switch</h3>
|
||||
<div id="demo-onoff"></div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3>Cards</h3>
|
||||
<div id="demo-cards"></div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<section class="pf-c-page__main-section pf-m-light">
|
||||
<h3>OnOff Switch</h3>
|
||||
<div id="demo-onoff"></div>
|
||||
</section>
|
||||
|
||||
<section class="pf-c-page__main-section pf-m-light">
|
||||
<h3>Cards</h3>
|
||||
<div id="demo-cards"></div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -9,102 +9,106 @@
|
|||
<script src="speed.js"></script>
|
||||
</head>
|
||||
<body class="pf-m-redhat-font" hidden>
|
||||
<div class="container-fluid">
|
||||
<h1>Speed Tests</h1>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><label class="control-label">Speed: </label></td>
|
||||
<td> <label id="speed"></label></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label class="control-label">Process ID: </label></td>
|
||||
<td> <label id="pid"></label></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label class="control-label">Bridge Memory: </label></td>
|
||||
<td> <label id="memory"></label></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p><button class="pf-c-button pf-m-secondary pf-m-primary" id="stop">Stop</button></p>
|
||||
<div class="pf-c-page">
|
||||
<main class="pf-c-page__main" tabindex="-1">
|
||||
<section class="pf-c-page__main-section pf-m-light">
|
||||
<h1>Speed Tests</h1>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><label class="control-label">Speed: </label></td>
|
||||
<td> <label id="speed"></label></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label class="control-label">Process ID: </label></td>
|
||||
<td> <label id="pid"></label></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label class="control-label">Bridge Memory: </label></td>
|
||||
<td> <label id="memory"></label></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p><button class="pf-c-button pf-m-secondary pf-m-primary" id="stop">Stop</button></p>
|
||||
|
||||
<h2>Echo Tests</h2>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><label class="control-label" for="message">Message</label></td>
|
||||
<td><input class="form-control" id="message" value="100000"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label class="control-label" for="batch">Batch</label></td>
|
||||
<td><input class="form-control" id="batch" value="1"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label class="control-label" for="interval">Interval</label></td>
|
||||
<td><input class="form-control" id="interval" value="100"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label class="control-label" for="binary">Binary</label></td>
|
||||
<td><input type="checkbox" id="binary"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button class="pf-c-button pf-m-secondary pf-m-primary" id="echo-normal">Normal Channel</button></td>
|
||||
<td><button class="pf-c-button pf-m-secondary pf-m-primary" id="echo-sideband">Sideband Channel</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<h1>Read Test</h1>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><label class="control-label" for="message">Path</label></td>
|
||||
<td><input class="form-control" id="read-path" value="/dev/sda"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button class="pf-c-button pf-m-secondary pf-m-primary" id="read-normal">Normal Channel</button></td>
|
||||
<td><button class="pf-c-button pf-m-secondary pf-m-primary" id="read-sideband">Sideband Channel</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<h1>Download Test</h1>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><label class="control-label" for="message">Path</label></td>
|
||||
<td><input class="form-control" id="download-path" value="/dev/sda"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button class="pf-c-button pf-m-secondary pf-m-primary" id="download-external">External Download</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<h1>Spawn Test</h1>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><label class="control-label" for="spawn">Command</label></td>
|
||||
<td><input class="form-control" id="spawn-command" value="seq 1000000"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label class="control-label" for="spawn-result">Result</label></td>
|
||||
<td><label class="form-control" id="spawn-result"></label>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label class="control-label" for="spawn-output">Output block</label></td>
|
||||
<td><pre id="spawn-output"></pre>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button class="pf-c-button pf-m-secondary pf-m-primary" id="spawn">Spawn Command</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2>Echo Tests</h2>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><label class="control-label" for="message">Message</label></td>
|
||||
<td><input class="form-control" id="message" value="100000"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label class="control-label" for="batch">Batch</label></td>
|
||||
<td><input class="form-control" id="batch" value="1"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label class="control-label" for="interval">Interval</label></td>
|
||||
<td><input class="form-control" id="interval" value="100"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label class="control-label" for="binary">Binary</label></td>
|
||||
<td><input type="checkbox" id="binary"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button class="pf-c-button pf-m-secondary pf-m-primary" id="echo-normal">Normal Channel</button></td>
|
||||
<td><button class="pf-c-button pf-m-secondary pf-m-primary" id="echo-sideband">Sideband Channel</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section class="pf-c-page__main-section pf-m-light">
|
||||
<h1>Read Test</h1>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><label class="control-label" for="message">Path</label></td>
|
||||
<td><input class="form-control" id="read-path" value="/dev/sda"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button class="pf-c-button pf-m-secondary pf-m-primary" id="read-normal">Normal Channel</button></td>
|
||||
<td><button class="pf-c-button pf-m-secondary pf-m-primary" id="read-sideband">Sideband Channel</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section class="pf-c-page__main-section pf-m-light">
|
||||
<h1>Download Test</h1>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><label class="control-label" for="message">Path</label></td>
|
||||
<td><input class="form-control" id="download-path" value="/dev/sda"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button class="pf-c-button pf-m-secondary pf-m-primary" id="download-external">External Download</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section class="pf-c-page__main-section pf-m-light">
|
||||
<h1>spawn test</h1>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><label class="control-label" for="spawn">command</label></td>
|
||||
<td><input class="form-control" id="spawn-command" value="seq 1000000"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label class="control-label" for="spawn-result">result</label></td>
|
||||
<td><label class="form-control" id="spawn-result"></label>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label class="control-label" for="spawn-output">output block</label></td>
|
||||
<td><pre id="spawn-output"></pre>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button class="pf-c-button pf-m-secondary pf-m-primary" id="spawn">spawn command</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -10,36 +10,40 @@
|
|||
<script src="test.js"></script>
|
||||
</head>
|
||||
<body class="pf-m-redhat-font" hidden>
|
||||
<div id="internal" class="container-fluid">
|
||||
<img src="hammer.gif" class="pull-right" id="hammer">
|
||||
<div id="nav"></div>
|
||||
<button class="pf-c-button pf-m-secondary" id="go-down">Go down</button>
|
||||
<br/>
|
||||
<br/>
|
||||
<div class="cockpit-internal-reauthorize">
|
||||
<button class="pf-c-button pf-m-secondary">Privileged Action</button>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="super-channel">
|
||||
<button class="pf-c-button pf-m-secondary">Superuser</button>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="lock-channel">
|
||||
<button class="pf-c-button pf-m-secondary">Lock /tmp/playground-test-lock</button>
|
||||
<span></span>
|
||||
</div>
|
||||
<button class="pf-c-button pf-m-secondary" id="modify-file">Increment /tmp/counter atomically</button>
|
||||
<div id="file-content"></div>
|
||||
<div id="file-error"></div>
|
||||
<br/>
|
||||
<div>
|
||||
<button class="pf-c-button pf-m-secondary" id="load-file">Load /tmp/counter</button>
|
||||
<button class="pf-c-button pf-m-secondary" id="save-file">Overwrite /tmp/counter</button>
|
||||
<button class="pf-c-button pf-m-secondary" id="delete-file">Delete /tmp/counter</button>
|
||||
</div>
|
||||
<textarea id="edit-file"></textarea>
|
||||
<br/>
|
||||
Visibility: <label id="hidden"></label>
|
||||
<div class="pf-c-page">
|
||||
<main class="pf-c-page__main" tabindex="-1">
|
||||
<section id="internal" class="pf-c-page__main-section pf-m-light">
|
||||
<img src="hammer.gif" class="pull-right" id="hammer">
|
||||
<div id="nav"></div>
|
||||
<button class="pf-c-button pf-m-secondary" id="go-down">Go down</button>
|
||||
<br/>
|
||||
<br/>
|
||||
<div class="cockpit-internal-reauthorize">
|
||||
<button class="pf-c-button pf-m-secondary">Privileged Action</button>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="super-channel">
|
||||
<button class="pf-c-button pf-m-secondary">Superuser</button>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="lock-channel">
|
||||
<button class="pf-c-button pf-m-secondary">Lock /tmp/playground-test-lock</button>
|
||||
<span></span>
|
||||
</div>
|
||||
<button class="pf-c-button pf-m-secondary" id="modify-file">Increment /tmp/counter atomically</button>
|
||||
<div id="file-content"></div>
|
||||
<div id="file-error"></div>
|
||||
<br/>
|
||||
<div>
|
||||
<button class="pf-c-button pf-m-secondary" id="load-file">Load /tmp/counter</button>
|
||||
<button class="pf-c-button pf-m-secondary" id="save-file">Overwrite /tmp/counter</button>
|
||||
<button class="pf-c-button pf-m-secondary" id="delete-file">Delete /tmp/counter</button>
|
||||
</div>
|
||||
<textarea id="edit-file"></textarea>
|
||||
<br/>
|
||||
Visibility: <label id="hidden"></label>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -8,164 +8,168 @@
|
|||
<script src="../base1/cockpit.js"></script>
|
||||
</head>
|
||||
<body class="pf-m-redhat-font" hidden>
|
||||
<div id="internal" class="container-fluid">
|
||||
<h2>HTML translations</h2>
|
||||
<div class="pf-c-page">
|
||||
<main class="pf-c-page__main" tabindex="-1">
|
||||
<section id="internal" class="pf-c-page__main-section pf-m-light">
|
||||
<h2>HTML translations</h2>
|
||||
|
||||
<p>For translating HTML use these forms:<p>
|
||||
<p>For translating HTML use these forms:<p>
|
||||
|
||||
<p>
|
||||
<code><span translate>Ready</span></code>
|
||||
= <span translate id="translate-html">Ready</span>
|
||||
</p>
|
||||
<p>
|
||||
<code><span translate>Ready</span></code>
|
||||
= <span translate id="translate-html">Ready</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<code><span translate translate-context="verb">Ready</span></code>
|
||||
= <span translate translate-context="verb" id="translate-html-context">Ready</span>
|
||||
</p>
|
||||
<p>
|
||||
<code><span translate translate-context="verb">Ready</span></code>
|
||||
= <span translate translate-context="verb" id="translate-html-context">Ready</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<code><span translate="yes">Not ready</span></code>
|
||||
= <span translate="yes" id="translate-html-yes">Not ready</span>
|
||||
</p>
|
||||
<p>
|
||||
<code><span translate="yes">Not ready</span></code>
|
||||
= <span translate="yes" id="translate-html-yes">Not ready</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<code><span translate="title" title="Unavailable">Cancel</span></code>
|
||||
= <span translate="title" title="Unavailable" id="translate-html-title">Cancel</span>
|
||||
</p>
|
||||
<p>
|
||||
<code><span translate="title" title="Unavailable">Cancel</span></code>
|
||||
= <span translate="title" title="Unavailable" id="translate-html-title">Cancel</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<code><span translate="yes title" title="Unavailable">Cancel</span></code>
|
||||
= <span translate="yes title" title="Unavailable" id="translate-html-yes-title">Cancel</span>
|
||||
</p>
|
||||
<p>
|
||||
<code><span translate="yes title" title="Unavailable">Cancel</span></code>
|
||||
= <span translate="yes title" title="Unavailable" id="translate-html-yes-title">Cancel</span>
|
||||
</p>
|
||||
|
||||
<p>Note that we do <b>not support</b>:<p>
|
||||
<ul>
|
||||
<li>Interpolation of variables.</li>
|
||||
<li>Pluralization</li>
|
||||
<li>The <code><translate></code> element</li>
|
||||
</ul>
|
||||
<p>Note that we do <b>not support</b>:<p>
|
||||
<ul>
|
||||
<li>Interpolation of variables.</li>
|
||||
<li>Pluralization</li>
|
||||
<li>The <code><translate></code> element</li>
|
||||
</ul>
|
||||
|
||||
<hr>
|
||||
<hr>
|
||||
|
||||
<h2>Old Glade style</h2>
|
||||
<h2>Old Glade style</h2>
|
||||
|
||||
<p>The old Glade style is not recommended:<p>
|
||||
<p>The old Glade style is not recommended:<p>
|
||||
|
||||
<p>
|
||||
<code><span translate="yes">Empty</span></code>
|
||||
= <span translate="yes" id="translatable-glade">Empty</span>
|
||||
</p>
|
||||
<p>
|
||||
<code><span translate="yes">Empty</span></code>
|
||||
= <span translate="yes" id="translatable-glade">Empty</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<code><span translate="yes" context="verb">Empty</span></code>
|
||||
= <span translate="yes" context="verb" id="translatable-glade-context">Empty</span>
|
||||
</p>
|
||||
<p>
|
||||
<code><span translate="yes" context="verb">Empty</span></code>
|
||||
= <span translate="yes" context="verb" id="translatable-glade-context">Empty</span>
|
||||
</p>
|
||||
|
||||
<p>Note that we do <b>not support</b>:<p>
|
||||
<ul>
|
||||
<li>Interpolation of variables.</li>
|
||||
<li>Translatable attributes.</li>
|
||||
<li>Pluralization</li>
|
||||
<li>The <code><translate></code> element</li>
|
||||
</ul>
|
||||
<p>Note that we do <b>not support</b>:<p>
|
||||
<ul>
|
||||
<li>Interpolation of variables.</li>
|
||||
<li>Translatable attributes.</li>
|
||||
<li>Pluralization</li>
|
||||
<li>The <code><translate></code> element</li>
|
||||
</ul>
|
||||
|
||||
<hr>
|
||||
<hr>
|
||||
|
||||
<h2>Mustache translations</h2>
|
||||
<h2>Mustache translations</h2>
|
||||
|
||||
<p>For translating Mustache use these forms:<p>
|
||||
<p>For translating Mustache use these forms:<p>
|
||||
|
||||
<div id="mustache-output">
|
||||
</div>
|
||||
<div id="mustache-output">
|
||||
</div>
|
||||
|
||||
<script id="mustache-input" type="x-template/mustache">
|
||||
<p>
|
||||
<code><span translate="yes">User</span></code>
|
||||
= <span translate="yes" id="translatable-mustache">User</span>
|
||||
</p>
|
||||
<script id="mustache-input" type="x-template/mustache">
|
||||
<p>
|
||||
<code><span translate="yes">User</span></code>
|
||||
= <span translate="yes" id="translatable-mustache">User</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<code><span translate>Memory</span></code>
|
||||
= <span translate id="translate-mustache">Memory</span>
|
||||
</p>
|
||||
<p>
|
||||
<code><span translate>Memory</span></code>
|
||||
= <span translate id="translate-mustache">Memory</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<code><span translate="yes">Accounts</span></code>
|
||||
= <span translate="yes" id="translate-mustache-yes">Accounts</span>
|
||||
</p>
|
||||
<p>
|
||||
<code><span translate="yes">Accounts</span></code>
|
||||
= <span translate="yes" id="translate-mustache-yes">Accounts</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<code><span translate="title" title="Error">User</span></code>
|
||||
= <span translate="title" title="Error" id="translate-mustache-title">User</span>
|
||||
</p>
|
||||
<p>
|
||||
<code><span translate="title" title="Error">User</span></code>
|
||||
= <span translate="title" title="Error" id="translate-mustache-title">User</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<code><span translate="yes title" title="Error">User</span></code>
|
||||
= <span translate="yes title" title="Error" id="translate-mustache-yes-title">User</span>
|
||||
</p>
|
||||
</script>
|
||||
<p>
|
||||
<code><span translate="yes title" title="Error">User</span></code>
|
||||
= <span translate="yes title" title="Error" id="translate-mustache-yes-title">User</span>
|
||||
</p>
|
||||
</script>
|
||||
|
||||
<p>Note that we do <b>not support</b>:<p>
|
||||
<ul>
|
||||
<li>Interpolation of variables.</li>
|
||||
<li>Pluralization</li>
|
||||
<li>The <code><translate></code> element</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<p>Note that we do <b>not support</b>:<p>
|
||||
<ul>
|
||||
<li>Interpolation of variables.</li>
|
||||
<li>Pluralization</li>
|
||||
<li>The <code><translate></code> element</li>
|
||||
</ul>
|
||||
<hr>
|
||||
|
||||
<h2>Code Translations</h2>
|
||||
<h2>Code Translations</h2>
|
||||
|
||||
<p>For translating in javascript code, use these forms:</p>
|
||||
<p>For translating in javascript code, use these forms:</p>
|
||||
|
||||
<p>
|
||||
<code>_("Empty")</code>
|
||||
= <span id="underscore-empty"></span>
|
||||
</p>
|
||||
<p>
|
||||
<code>_("Empty")</code>
|
||||
= <span id="underscore-empty"></span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<code>_("verb", "Empty")</code>
|
||||
= <span id="underscore-context-empty"></span>
|
||||
</p>
|
||||
<p>
|
||||
<code>_("verb", "Empty")</code>
|
||||
= <span id="underscore-context-empty"></span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<code>C_("verb", "Empty")</code>
|
||||
= <span id="cunderscore-context-empty"></span>
|
||||
</p>
|
||||
<p>
|
||||
<code>C_("verb", "Empty")</code>
|
||||
= <span id="cunderscore-context-empty"></span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<code>cockpit.gettext("Control")</code>
|
||||
= <span id="gettext-control"></span>
|
||||
</p>
|
||||
<p>
|
||||
<code>cockpit.gettext("Control")</code>
|
||||
= <span id="gettext-control"></span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<code>cockpit.gettext("key", "Control")</code>
|
||||
= <span id="gettext-context-control"></span>
|
||||
</p>
|
||||
<p>
|
||||
<code>cockpit.gettext("key", "Control")</code>
|
||||
= <span id="gettext-context-control"></span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<code>cockpit.ngettext("$0 disk is missing", "$0 disks are missing", 1)</code>
|
||||
= <span id="ngettext-disks-1"></span>
|
||||
</p>
|
||||
<p>
|
||||
<code>cockpit.ngettext("$0 disk is missing", "$0 disks are missing", 1)</code>
|
||||
= <span id="ngettext-disks-1"></span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<code>cockpit.ngettext("$0 disk is missing", "$0 disks are missing", 2)</code>
|
||||
= <span id="ngettext-disks-2"></span>
|
||||
</p>
|
||||
<p>
|
||||
<code>cockpit.ngettext("$0 disk is missing", "$0 disks are missing", 2)</code>
|
||||
= <span id="ngettext-disks-2"></span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<code>cockpit.ngettext("disk-non-rotational", "$0 disk is missing", "$0 disks are missing", 1)</code>
|
||||
= <span id="ngettext-context-disks-1"></span>
|
||||
</p>
|
||||
<p>
|
||||
<code>cockpit.ngettext("disk-non-rotational", "$0 disk is missing", "$0 disks are missing", 1)</code>
|
||||
= <span id="ngettext-context-disks-1"></span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<code>cockpit.ngettext("disk-non-rotational", "$0 disk is missing", "$0 disks are missing", 2)</code>
|
||||
= <span id="ngettext-context-disks-2"></span>
|
||||
</p>
|
||||
<p>
|
||||
<code>cockpit.ngettext("disk-non-rotational", "$0 disk is missing", "$0 disks are missing", 2)</code>
|
||||
= <span id="ngettext-context-disks-2"></span>
|
||||
</p>
|
||||
|
||||
<p>Note that we do <b>not support</b>:<p>
|
||||
<ul>
|
||||
<li>Extraction of single quoted strings.</li>
|
||||
</ul>
|
||||
<p>Note that we do <b>not support</b>:<p>
|
||||
<ul>
|
||||
<li>Extraction of single quoted strings.</li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
<script src="translate.js"></script>
|
||||
<!-- Bring in initial translations -->
|
||||
|
|
|
|||
|
|
@ -20,7 +20,10 @@
|
|||
import cockpit from "cockpit";
|
||||
|
||||
import React from "react";
|
||||
import { Alert, AlertActionCloseButton, Button } from "@patternfly/react-core";
|
||||
import {
|
||||
Alert, AlertActionCloseButton, Button,
|
||||
Page, PageSection, PageSectionVariants
|
||||
} from "@patternfly/react-core";
|
||||
import { ExclamationCircleIcon, TrashIcon } from "@patternfly/react-icons";
|
||||
|
||||
import * as cockpitListing from "cockpit-components-listing.jsx";
|
||||
|
|
@ -469,17 +472,19 @@ export class SETroubleshootPage extends React.Component {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="container-fluid">
|
||||
<SELinuxStatus
|
||||
selinuxStatus={this.props.selinuxStatus}
|
||||
selinuxStatusError={this.props.selinuxStatusError}
|
||||
changeSelinuxMode={this.props.changeSelinuxMode}
|
||||
dismissError={this.props.dismissStatusError}
|
||||
/>
|
||||
{errorMessage}
|
||||
{modifications}
|
||||
{troubleshooting}
|
||||
</div>
|
||||
<Page>
|
||||
<PageSection variant={PageSectionVariants.light}>
|
||||
<SELinuxStatus
|
||||
selinuxStatus={this.props.selinuxStatus}
|
||||
selinuxStatusError={this.props.selinuxStatusError}
|
||||
changeSelinuxMode={this.props.changeSelinuxMode}
|
||||
dismissError={this.props.dismissStatusError}
|
||||
/>
|
||||
{errorMessage}
|
||||
{modifications}
|
||||
{troubleshooting}
|
||||
</PageSection>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,10 @@
|
|||
|
||||
import cockpit from "cockpit";
|
||||
import React from "react";
|
||||
import { Alert, Button } from "@patternfly/react-core";
|
||||
import {
|
||||
Alert, Button,
|
||||
Page, PageSection
|
||||
} from "@patternfly/react-core";
|
||||
|
||||
import { get_multipathd_service } from "./utils.js";
|
||||
import { dialog_open } from "./dialog.jsx";
|
||||
|
|
@ -63,16 +66,18 @@ export class MultipathAlert extends React.Component {
|
|||
|
||||
if (multipath_broken && !multipathd_running) {
|
||||
return (
|
||||
<div className="container-fluid page-ct">
|
||||
<Alert isInline variant='danger' title={
|
||||
<>
|
||||
<Button onClick={activate} variant="secondary" className="pull-right">{_("Start multipath")}</Button>
|
||||
<span className="alert-message">
|
||||
{_("There are devices with multiple paths on the system, but the multipath service is not running.")}
|
||||
</span>
|
||||
</>
|
||||
} />
|
||||
</div>
|
||||
<Page>
|
||||
<PageSection>
|
||||
<Alert isInline variant='danger' title={
|
||||
<>
|
||||
<Button onClick={activate} variant="secondary" className="pull-right">{_("Start multipath")}</Button>
|
||||
<span className="alert-message">
|
||||
{_("There are devices with multiple paths on the system, but the multipath service is not running.")}
|
||||
</span>
|
||||
</>
|
||||
} />
|
||||
</PageSection>
|
||||
</Page>
|
||||
);
|
||||
} else
|
||||
return null;
|
||||
|
|
|
|||
|
|
@ -29,99 +29,105 @@ along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
|
|||
</head>
|
||||
|
||||
<body class="pf-m-redhat-font">
|
||||
<div id="journal">
|
||||
<div class="content-header-extra">
|
||||
<div class="filters">
|
||||
<div class="filter">
|
||||
<button id="log-filters" class="btn btn-default dropdown-toggle ct-select" type="button" data-toggle="dropdown">
|
||||
<span translate>Time</span>
|
||||
<div class="caret"></div>
|
||||
</button>
|
||||
<ul class="dropdown-menu" id="logs-predefined-filters">
|
||||
<li><a tabindex="0" data-key="boot" data-value="0" translate>Current boot</a></li>
|
||||
<li><a tabindex="0" data-key="boot" data-value="-1" translate>Previous boot</a></li>
|
||||
<li><a tabindex="0" data-key="since" data-value="-24hours" translate>Last 24 hours</a></li>
|
||||
<li><a tabindex="0" data-key="since" data-value="-7days" translate>Last 7 days</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pf-c-page" id="journal">
|
||||
<main class="pf-c-page__main" tabindex="-1">
|
||||
<section class="pf-c-page__main-section content-header-extra">
|
||||
<div class="filters">
|
||||
<div class="filter">
|
||||
<button id="log-filters" class="btn btn-default dropdown-toggle ct-select" type="button" data-toggle="dropdown">
|
||||
<span translate>Time</span>
|
||||
<div class="caret"></div>
|
||||
</button>
|
||||
<ul class="dropdown-menu" id="logs-predefined-filters">
|
||||
<li><a tabindex="0" data-key="boot" data-value="0" translate>Current boot</a></li>
|
||||
<li><a tabindex="0" data-key="boot" data-value="-1" translate>Previous boot</a></li>
|
||||
<li><a tabindex="0" data-key="since" data-value="-24hours" translate>Last 24 hours</a></li>
|
||||
<li><a tabindex="0" data-key="since" data-value="-7days" translate>Last 7 days</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="filter">
|
||||
<label for="journal-prio-menu" translate>Priority</label>
|
||||
<select id="journal-prio-menu" class="ct-select">
|
||||
<option value="emerg" translate>Only emergency</option>
|
||||
<option value="alert" translate>Alert and above</option>
|
||||
<option value="crit" translate>Critical and above</option>
|
||||
<option value="err" translate>Error and above</option>
|
||||
<option value="warning" translate>Warning and above</option>
|
||||
<option value="notice" translate>Notice and above</option>
|
||||
<option value="info" translate>Info and above</option>
|
||||
<option value="debug" translate>Debug and above</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter">
|
||||
<label for="journal-prio-menu" translate>Priority</label>
|
||||
<select id="journal-prio-menu" class="ct-select">
|
||||
<option value="emerg" translate>Only emergency</option>
|
||||
<option value="alert" translate>Alert and above</option>
|
||||
<option value="crit" translate>Critical and above</option>
|
||||
<option value="err" translate>Error and above</option>
|
||||
<option value="warning" translate>Warning and above</option>
|
||||
<option value="notice" translate>Notice and above</option>
|
||||
<option value="info" translate>Info and above</option>
|
||||
<option value="debug" translate>Debug and above</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter">
|
||||
<label for="journal-service-menu" translate>Identifier</label>
|
||||
<select id="journal-service-menu" class="ct-select">
|
||||
<!-- This is filled by from logs.js !-->
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter">
|
||||
<label for="journal-service-menu" translate>Identifier</label>
|
||||
<select id="journal-service-menu" class="ct-select">
|
||||
<!-- This is filled by from logs.js !-->
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter text-search">
|
||||
<label for="journal-grep" translate>Text</label>
|
||||
<span class="filter-group">
|
||||
<input id="journal-grep" class="form-control" type="text" translate="placeholder" placeholder="Type to filter">
|
||||
<div id="logs-help" class="dropdown">
|
||||
<a role="link" tabindex="0" id="logs-help-toggle" class="dropdown-toggle dropdown-form-control" data-toggle="dropdown">
|
||||
<span class="pficon pficon-help"></span>
|
||||
</a>
|
||||
<div id="logs-help-menu" class="dropdown-menu">
|
||||
<span translate>Search the logs with a combination of terms:</span>
|
||||
<ul>
|
||||
<li><span translate>qualifiers</span>, <span translate>e.g.</span> 'priority:', 'identifier:', 'service:'</li>
|
||||
<li><span translate>log fields</span>, <span translate>e.g.</span> '_EXE=/usr/bin/python'</li>
|
||||
<li translate>any free-form string as regular expression</li>
|
||||
</ul>
|
||||
<span class="help-links">
|
||||
<a href="https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/8/html/managing_systems_using_the_rhel_8_web_console/reviewing-logs_system-management-using-the-rhel-8-web-console#filtering-logs-in-the-web-console_reviewing-logs" target="blank" rel="noopener noreferrer"><span translate>Learn more</span><i class="fa fa-external-link fa-xs"></i></a>
|
||||
<a href="https://www.freedesktop.org/software/systemd/man/journalctl.html" target="blank" rel="noopener noreferrer"><span translate>journalctl manpage</span><i class="fa fa-external-link fa-xs"></i></a>
|
||||
</span>
|
||||
<span class="journal-cmd">
|
||||
<pre id="journal-query"></pre>
|
||||
<button class="copy-cmd" id="journal-cmd-copy"><i class="fa fa-clipboard fa-xs"></i></button>
|
||||
</span>
|
||||
<div class="filter text-search">
|
||||
<label for="journal-grep" translate>Text</label>
|
||||
<span class="filter-group">
|
||||
<input id="journal-grep" class="form-control" type="text" translate="placeholder" placeholder="Type to filter">
|
||||
<div id="logs-help" class="dropdown">
|
||||
<a role="link" tabindex="0" id="logs-help-toggle" class="dropdown-toggle dropdown-form-control" data-toggle="dropdown">
|
||||
<span class="pficon pficon-help"></span>
|
||||
</a>
|
||||
<div id="logs-help-menu" class="dropdown-menu">
|
||||
<span translate>Search the logs with a combination of terms:</span>
|
||||
<ul>
|
||||
<li><span translate>qualifiers</span>, <span translate>e.g.</span> 'priority:', 'identifier:', 'service:'</li>
|
||||
<li><span translate>log fields</span>, <span translate>e.g.</span> '_EXE=/usr/bin/python'</li>
|
||||
<li translate>any free-form string as regular expression</li>
|
||||
</ul>
|
||||
<span class="help-links">
|
||||
<a href="https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/8/html/managing_systems_using_the_rhel_8_web_console/reviewing-logs_system-management-using-the-rhel-8-web-console#filtering-logs-in-the-web-console_reviewing-logs" target="blank" rel="noopener noreferrer"><span translate>Learn more</span><i class="fa fa-external-link fa-xs"></i></a>
|
||||
<a href="https://www.freedesktop.org/software/systemd/man/journalctl.html" target="blank" rel="noopener noreferrer"><span translate>journalctl manpage</span><i class="fa fa-external-link fa-xs"></i></a>
|
||||
</span>
|
||||
<span class="journal-cmd">
|
||||
<pre id="journal-query"></pre>
|
||||
<button class="copy-cmd" id="journal-cmd-copy"><i class="fa fa-clipboard fa-xs"></i></button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-separator"></div>
|
||||
<div class="filter-separator"></div>
|
||||
|
||||
<div class="filter-actions">
|
||||
<div class="filter-actions">
|
||||
|
||||
<span class="filters-toggle" hidden>
|
||||
<button class="link-button" translate>Show filters</button>
|
||||
</span>
|
||||
<span class="filters-toggle" hidden>
|
||||
<button class="link-button" translate>Show filters</button>
|
||||
</span>
|
||||
|
||||
<button id="journal-follow" class="pf-c-button pf-m-secondary" type="button" translate>Pause</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="journal-box" class="container-fluid"></div>
|
||||
<button id="journal-follow" class="pf-c-button pf-m-secondary" type="button" translate>Pause</button>
|
||||
</div>
|
||||
</section>
|
||||
<section id="journal-box" class="pf-c-page__main-section pf-m-light"></section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div id="journal-entry" class="container-fluid" hidden>
|
||||
<ol class="breadcrumb">
|
||||
<li><a role="link" tabindex="0" id="journal-navigate-home" translate="yes">Logs</a></li>
|
||||
<li id="journal-entry-crumb" class="active" translate="yes">Entry</li>
|
||||
</ol>
|
||||
<h2 id="journal-entry-heading"></h2>
|
||||
<table class="info-table-ct panel panel-default" id="journal-entry-fields">
|
||||
</table>
|
||||
<div id="journal-entry" class="pf-c-page" hidden>
|
||||
<main role="main" class="pf-c-page__main" tabindex="-1">
|
||||
<section id="journal-box" class="pf-c-page__main-breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li><a role="link" tabindex="0" id="journal-navigate-home" translate="yes">Logs</a></li>
|
||||
<li id="journal-entry-crumb" class="active" translate="yes">Entry</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section class="pf-c-page__main-section pf-m-light">
|
||||
<h2 id="journal-entry-heading"></h2>
|
||||
<table class="info-table-ct panel panel-default" id="journal-entry-fields">
|
||||
</table>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="logs.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,6 @@
|
|||
/* Extra content header */
|
||||
|
||||
.content-header-extra {
|
||||
background: #f5f5f5;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 10px 20px;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ import cockpit from 'cockpit';
|
|||
import React from 'react';
|
||||
import { superuser } from "superuser";
|
||||
|
||||
import { Button, Badge } from '@patternfly/react-core';
|
||||
import { Button, Badge, Page, PageSection, PageSectionVariants } from '@patternfly/react-core';
|
||||
import { account_create_dialog } from "./account-create-dialog.js";
|
||||
|
||||
const _ = cockpit.gettext;
|
||||
|
|
@ -68,14 +68,16 @@ export function AccountsList({ accounts, current_user }) {
|
|||
});
|
||||
|
||||
return (
|
||||
<div id="accounts" className="container-fluid">
|
||||
{ superuser.allowed &&
|
||||
<Button id="accounts-create" onClick={() => account_create_dialog(accounts)}>
|
||||
{_("Create new account")}
|
||||
</Button>
|
||||
}
|
||||
<ul id="accounts-list">
|
||||
{ filtered_accounts.map(a => <AccountItem key={a.name} account={a} current={current_user == a.name} />) }
|
||||
</ul>
|
||||
</div>);
|
||||
<Page id="accounts">
|
||||
<PageSection variant={PageSectionVariants.light}>
|
||||
{ superuser.allowed &&
|
||||
<Button id="accounts-create" onClick={() => account_create_dialog(accounts)}>
|
||||
{_("Create new account")}
|
||||
</Button>
|
||||
}
|
||||
<ul id="accounts-list">
|
||||
{ filtered_accounts.map(a => <AccountItem key={a.name} account={a} current={current_user == a.name} />) }
|
||||
</ul>
|
||||
</PageSection>
|
||||
</Page>);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,90 +32,134 @@
|
|||
<body id="content" class="cards-pf">
|
||||
|
||||
<!-- BOILERPLATE: Makes this look like another app -->
|
||||
<div class="container-fluid container-cards-pf">
|
||||
<div class="row row-cards-pf">
|
||||
<div id="embed-links" class="col-xs-3 col-sm-3 col-md-2">
|
||||
<div class="row row-cards-pf">
|
||||
<input id="embed-address" class="form-control" value="http://127.0.0.1"/>
|
||||
</div>
|
||||
<div class="card-pf card-pf-accented card-pf-aggregate-status">
|
||||
<h2 class="card-pf-title">
|
||||
<a id="embed-full" href="/cockpit/@localhost/system/index.html">
|
||||
<span class="fa fa-server"></span>Full Server
|
||||
</a>
|
||||
</h2>
|
||||
<div class="card-pf-body">
|
||||
<p class="card-pf-aggregate-status-notifications">
|
||||
<span class="card-pf-aggregate-status-notification">
|
||||
<span class="pficon pficon-add-circle-o"></span></span>
|
||||
</p>
|
||||
<main class="pf-c-page__main" tabindex="-1">
|
||||
<section class="pf-c-page__main-section pf-m-light container-cards-pf">
|
||||
<div class="row row-cards-pf">
|
||||
<div id="embed-links" class="col-xs-3 col-sm-3 col-md-2">
|
||||
<div class="row row-cards-pf">
|
||||
<input id="embed-address" class="form-control" value="http://127.0.0.1"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-with-action">
|
||||
<h2 class="card-pf-title">
|
||||
<a id="embed-terminal" href="/cockpit/@localhost/system/terminal.html">
|
||||
<span class="fa fa-terminal"></span>Server Terminal</a>
|
||||
</h2>
|
||||
<div class="card-pf-body">
|
||||
<p class="card-pf-aggregate-status-notifications">
|
||||
<span class="card-pf-aggregate-status-notification"><span
|
||||
class="pficon pficon-error-circle-o"></span>4</span>
|
||||
<span class="card-pf-aggregate-status-notification"><span
|
||||
class="pficon pficon-warning-triangle-o"></span>1</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-pf card-pf-accented card-pf-aggregate-status">
|
||||
<h2 class="card-pf-title">
|
||||
<a id="embed-network" href="/cockpit/@localhost/network/index.html">
|
||||
<span class="fa fa-plug"></span>Server Networking</a>
|
||||
</h2>
|
||||
<div class="card-pf-body">
|
||||
<p class="card-pf-aggregate-status-notifications">
|
||||
<span class="card-pf-aggregate-status-notification"><span
|
||||
class="pficon pficon-error-circle-o"></span>1</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-pf card-pf-accented card-pf-aggregate-status">
|
||||
<h2 class="card-pf-title">
|
||||
<a id="embed-storage" href="/cockpit/@localhost/storage/index.html">
|
||||
<span class="fa fa-hdd-o"></span>Server Storage</a>
|
||||
</h2>
|
||||
<div class="card-pf-body">
|
||||
<p class="card-pf-aggregate-status-notifications">
|
||||
<span class="card-pf-aggregate-status-notification"><span
|
||||
class="pficon pficon-error-circle-o"></span>1</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-pf card-pf-accented card-pf-aggregate-status">
|
||||
<h2 class="card-pf-title">
|
||||
<a id="embed-auth" href="/cockpit+app/@localhost/shell/index.html">
|
||||
<span class="fa fa-lock"></span>Separate Auth
|
||||
</a>
|
||||
</h2>
|
||||
<div class="card-pf-body">
|
||||
<p class="card-pf-aggregate-status-notifications">
|
||||
<span class="card-pf-aggregate-status-notification"><span
|
||||
class="pficon pficon-error-circle-o"></span>1</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-9 col-sm-9 col-md-10">
|
||||
<div class="card-pf">
|
||||
<div class="card-pf-heading">
|
||||
<h2 id="embed-title" class="card-pf-title">
|
||||
Embedded Cockpit Here
|
||||
<div class="card-pf card-pf-accented card-pf-aggregate-status">
|
||||
<h2 class="card-pf-title">
|
||||
<a id="embed-full" href="/cockpit/@localhost/system/index.html">
|
||||
<span class="fa fa-server"></span>Full Server
|
||||
</a>
|
||||
</h2>
|
||||
<div class="card-pf-body">
|
||||
<p class="card-pf-aggregate-status-notifications">
|
||||
<span class="card-pf-aggregate-status-notification">
|
||||
<span class="pficon pficon-add-circle-o"></span></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="embed-here" class="card-pf-body">
|
||||
<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-with-action">
|
||||
<h2 class="card-pf-title">
|
||||
<a id="embed-terminal" href="/cockpit/@localhost/system/terminal.html">
|
||||
<span class="fa fa-terminal"></span>Server Terminal</a>
|
||||
</h2>
|
||||
<div class="card-pf-body">
|
||||
<p class="card-pf-aggregate-status-notifications">
|
||||
<span class="card-pf-aggregate-status-notification"><span
|
||||
class="pficon pficon-error-circle-o"></span>4</span>
|
||||
<span class="card-pf-aggregate-status-notification"><span
|
||||
class="pficon pficon-warning-triangle-o"></span>1</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-pf card-pf-accented card-pf-aggregate-status">
|
||||
<h2 class="card-pf-title">
|
||||
<a id="embed-network" href="/cockpit/@localhost/network/index.html">
|
||||
<span class="fa fa-plug"></span>Server Networking</a>
|
||||
</h2>
|
||||
<div class="card-pf-body">
|
||||
<p class="card-pf-aggregate-status-notifications">
|
||||
<span class="card-pf-aggregate-status-notification"><span
|
||||
class="pficon pficon-error-circle-o"></span>1</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-pf card-pf-accented card-pf-aggregate-status">
|
||||
<h2 class="card-pf-title">
|
||||
<a id="embed-storage" href="/cockpit/@localhost/storage/index.html">
|
||||
<span class="fa fa-hdd-o"></span>Server Storage</a>
|
||||
</h2>
|
||||
<div class="card-pf-body">
|
||||
<p class="card-pf-aggregate-status-notifications">
|
||||
<span class="card-pf-aggregate-status-notification"><span
|
||||
class="pficon pficon-error-circle-o"></span>1</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-pf card-pf-accented card-pf-aggregate-status">
|
||||
<h2 class="card-pf-title">
|
||||
<a id="embed-auth" href="/cockpit+app/@localhost/shell/index.html">
|
||||
<span class="fa fa-lock"></span>Separate Auth
|
||||
</a>
|
||||
</h2>
|
||||
<div class="card-pf-body">
|
||||
<p class="card-pf-aggregate-status-notifications">
|
||||
<span class="card-pf-aggregate-status-notification"><span
|
||||
class="pficon pficon-error-circle-o"></span>1</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-9 col-sm-9 col-md-10">
|
||||
<div class="card-pf">
|
||||
<div class="card-pf-heading">
|
||||
<h2 id="embed-title" class="card-pf-title">
|
||||
Embedded Cockpit Here
|
||||
</h2>
|
||||
</div>
|
||||
<div id="embed-here" class="card-pf-body">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<<<<<<< HEAD:test/verify/files/embed-cockpit/index.html
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
</div><!-- /container -->
|
||||
=======
|
||||
</div><!-- /row -->
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
var frames = { };
|
||||
|
||||
function click(ev) {
|
||||
var href = ev.target.getAttribute("href");
|
||||
ev.preventDefault();
|
||||
|
||||
var address = document.getElementById("embed-address").value;
|
||||
if (address.indexOf(":") === -1)
|
||||
address += ":9090";
|
||||
var url = address + href;
|
||||
|
||||
var frame = frames[url];
|
||||
if (!frame) {
|
||||
frame = frames[url] = document.createElement("iframe");
|
||||
frame.setAttribute("src", url)
|
||||
frame.setAttribute("name", ev.target.getAttribute("id"));
|
||||
document.getElementById("embed-here").appendChild(frame);
|
||||
frame.addEventListener("load", function(ev) {
|
||||
ev.target.setAttribute("loaded", "1");
|
||||
});
|
||||
}
|
||||
|
||||
var i, iframes = document.querySelectorAll("iframe");
|
||||
for (i = 0; i < iframes.length; i++)
|
||||
iframes[i].setAttribute("hidden", "hidden");
|
||||
frame.removeAttribute("hidden");
|
||||
document.getElementById("embed-title").innerText = ev.target.innerText;
|
||||
return false;
|
||||
}
|
||||
|
||||
var x, links = document.querySelectorAll("#embed-links a[href]");
|
||||
for (x = 0; x < links.length; x++)
|
||||
links[x].addEventListener("click", click);
|
||||
</script>
|
||||
>>>>>>> b64ab575d... Replace all usages of container-fluid class:test/verify/files/embed-cockpit.html
|
||||
<div id="embed-loaded">
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in New Issue