D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
bewest
Full window
Github gist
cockpit oacids/openaps module
Playing with cockpit-project.org.
<head> <title>O A C I D S</title> <meta charset="utf-8"> <link href="../base1/cockpit.css" type="text/css" rel="stylesheet"> <link href="./oacids.css" type="text/css" rel="stylesheet"> <script src="../base1/jquery.js"></script> <script src="../base1/cockpit.js"></script> </head> <body> <div class="container-fluid"> <h2>Status</h2> </div> <div class="container-fluid"> <table id="ActivityEvents" class="listing"> <thead> <tr> <td colspan="2"> <h3>Current activity</h3> </td> </tr> </thead> <tbody id="EventTimeline"> </tbody> <tbody id="TimelineEnd" class="EventEnd "> <tr> <td> <div class="timeline timeline-end"> <i class="fa fa-caret-up timeline-point timeline-md"></i> <div class="listing-panel listing-maybe"> <div class="listing-head"> <div class="listing-actions"> <button class="btn btn-default">Do</button> </div> </div> </div> </div> </td> </tr> </tbody> <tbody class="oacidsEvent EventScheduled skeleton nominal" data-trigger-expected=""> <tr> <td> <div class="timeline timeline-end"> <span class="point-future wrapper"> <i class="fa fa-circle timeline-point timeline-md"></i> </span> <span class="point-failure timeline-point pficon pficon-warning-triangle-o"></span> <span class="point-success wrapper"> <i class="fa fa-check-circle-o timeline-point timeline-lg active"></i> </span> <div class="point-pending timeline-point timeline-md"> <div class="spinner"></div> </div> <div class="listing-panel listing-maybe"> <div class="listing-head"> <div class="listing-actions"> <button class="cancel btn btn-primary">Cancel</button> </div> <h3 class="v name">fedora-atomic: 24.2</h3> <div class="listing-status"> <span class="v Status">Available</span> </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-error alert" ng-if="error"> <span class="pficon pficon-warning-triangle-o"></span> There was an error </div> <div class="listing-body"> <div class="row"> <div class="col-sm-6"> <dl> <dt>Expected</dt> <dd class="v expected">fedora-atomic</dd> <dt>id</dt> <dd class="v id">24.2</dd> <dt>Rrule</dt> <dd class="v rrule" title="2015-09-26 15:33">3 days ago</dd> </dl> </div> <div class="col-sm-6"> <dl> <dt>Reference</dt> <dd class="v obj">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="EventMaybe skeleton"> <tr> <td> <div class="timeline"> <i class="fa fa-circle timeline-point"></i> <div class="listing-panel"> <div class="listing-head"> <div class="listing-actions"> <button class="btn btn-primary">Update and reboot</button> </div> <h3>fedora-atomic: 24.2</h3> <div class="listing-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-error alert" ng-if="error"> <span class="pficon pficon-warning-triangle-o"></span> There was an error </div> <div class="listing-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 EventCurrent skeleton"> <tr> <td> <div class="timeline"> <i class="fa fa-check-circle-o timeline-point timeline-lg active"></i> <div class="listing-panel"> <div class="listing-head"> <div class="listing-actions"> </div> <div class="listing-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-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 class="EventPending skeleton"> <tr> <td> <div class="timeline"> <div class="timeline-point timeline-md"> <div class="spinner"></div> </div> <div class="listing-panel"> <div class="listing-head"> <div class="listing-actions"> </div> <div class="listing-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-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> <div class="container-fluid"> <table class="cockpit-form-table"> <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="btn btn-default btn-primary" id="ping">Ping</button></td> <td><button class="btn btn-default btn-danger" disabled id="stop">Stop</button></td> </tr> </table> <p> <pre id="output" style="display: none;"> </pre> </p> <p id="failure" class="warning" style="display: none"></p> </div> <script src="./oacids.js"></script> <script> var proc = null; $(document).ready(function ( ) { console.log("fofoo bar"); }); $("#ping").on("click", function() { var output = $("#output"); output.text(""); output.show(); if (proc) proc.close("terminated"); $("#failure").empty(); var cmd = [ "ping", $("#address").val() ]; proc = cockpit.spawn(cmd, { "err": "out" }). stream(function(data) { output.append(document.createTextNode(data)); }). fail(function(ex) { $("#failure").show(). text(ex.toString()); }); $("#stop").prop("disabled", false); }); $("#stop").on("click", function() { $(this).prop("disabled", true); if (proc) proc.close("terminated"); proc = null; }); </script> </body> </html>