| <!-- |
| Copyright 2017 The Fuchsia Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. |
| --> |
| |
| <!DOCTYPE html> |
| <html lang="en" class="mdc-typography"> |
| <head> |
| <title>Fuchsia Ledger Dashboard</title> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <!-- jQuery CDN --> |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> |
| <!-- AngularJS CDN --> |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> |
| <script src="http://d3js.org/d3.v4.min.js"></script> |
| <!-- Material Components CDN --> |
| <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> |
| <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"> |
| <!-- Dashboard CSS --> |
| <link rel="stylesheet" href="dashboard.css"/> |
| </head> |
| <body> |
| <header class="mdc-toolbar"> |
| <div class="mdc-toolbar__row"> |
| <section class="mdc-toolbar__section mdc-toolbar__section--align-start"> |
| <span class="mdc-toolbar__title"> <img src="logo.png" height="44" width="44"/></span> |
| <span class="mdc-toolbar__title">Fuchsia Ledger Dashboard</span> |
| </section> |
| <section class="mdc-toolbar__section mdc-toolbar__section--align-end"> |
| <p id="connectedLabel" class="mdc-typography" style="margin-right:24px"> |
| Connected |
| </p> |
| </section> |
| </div> |
| <div class="mdc-toolbar__row"> |
| <section> |
| <nav id="dashboard-tab-bar" class="mdc-tab-bar"> |
| <a class="mdc-tab mdc-tab--active" href="#overview-panel">OVERVIEW</a> |
| <a class="mdc-tab" href="#ledger-panel">LEDGER</a> |
| <span class="mdc-tab-bar__indicator"></span> |
| </nav> |
| </section> |
| </div> |
| </header> |
| |
| <main> |
| <section class="panels" ng-app="ledgerDashboard" ng-controller="debugCtrl"> |
| <div id="overview-panel" class="panel active" role="tabpanel"> |
| </div> <!-- overview-panel --> |
| |
| <div id="ledger-panel" class="panel grid mdc-layout-grid" role="tabpanel"> |
| <div class="mdc-layout-grid__inner"> |
| <div class="cell mdc-layout-grid__cell ledger-instances-card"> |
| <div class="mdc-card"> |
| <section class="mdc-card__primary"> |
| <h1 class="mdc-card__title mdc-card__title--large">Ledger Instances</h1> |
| </section> |
| <section class="mdc-card__supporting-text"> |
| <ul id="ledger-instances-list" class="mdc-list"> |
| <li class="mdc-list-item" ng-class="{ 'selected-class-name': $index == selectedInstIndex }" ng-repeat="x in instancesList" ng-click="getPagesList($index)"> |
| {{ bytesToString(x) }} |
| </li> |
| <li ng-hide="instancesList.length > 0"> |
| There's no instances for the current user. |
| </li> |
| </ul> |
| </section> |
| </div> <!-- mdc_card --> |
| </div> <!-- cell --> |
| <div class="cell mdc-layout-grid__cell ledger-pages-card" ng-show="showPages"> |
| <div class="mdc-card"> |
| <section class="mdc-card__primary"> |
| <h1 class="mdc-card__title mdc-card__title--large">Ledger Pages</h1> |
| </section> |
| <section class="mdc-card__supporting-text"> |
| <ul id="ledger-pages-list" class="mdc-list"> |
| <li class="mdc-list-item" ng-class="{ 'selected-class-name': $index == selectedPageIndex }" ng-repeat="x in pagesList" ng-click="getHeadCommitsList($index)"> |
| {{ bytesToString(x) }} |
| </li> |
| <li ng-hide="pagesList.length > 0"> |
| There's no pages for this instance. |
| </li> |
| </ul> |
| </section> |
| </div> <!-- mdc_card --> |
| </div> <!-- cell --> |
| <div class="cell mdc-layout-grid__cell head-commits-card" ng-show="showCommits"> |
| <div class="mdc-card"> |
| <section class="mdc-card__primary"> |
| <h1 class="mdc-card__title mdc-card__title--large">Commits Graph</h1> |
| </section> |
| <section class="mdc-card__supporting-text"> |
| <span ng-hide="headCommitsList.length > 0">There's no commits for this page.</span> |
| <div id="svg-container"> |
| <svg id="commits-graph"></svg> |
| </div> |
| </section> |
| </div> <!-- mdc_card --> |
| </div> <!-- cell --> |
| <div class="cell mdc-layout-grid__cell keys-values-card" ng-show="showEntries"> |
| <div class="mdc-card"> |
| <section class="mdc-card__primary"> |
| <h1 class="mdc-card__title mdc-card__title--large">Ledger Entries</h1> |
| </section> |
| <section class="mdc-card__supporting-text"> |
| <span ng-hide="commitsObjDict[selectedCommitId]['generation'] > 0"> <i>This is the Root Commit</i> <br> </span> |
| <i>Timestamp:</i> {{ commitsObjDict[selectedCommitId]['timestamp'] }} <br> |
| <i>Generation:</i> {{ commitsObjDict[selectedCommitId]['generation'] }} <br> |
| <ul id="keys-entries-list" class="mdc-list"> |
| <li ng-repeat="x in entriesList"> |
| <i>Key:</i> {{ bytesToString(x[0]) }} <br> |
| <i>Value:</i> {{ bytesToString(x[1]) }} <br> |
| <span ng-if="x[2]">The value has been truncated, can't display more than 500 bytes.<span> |
| <i>Priority:</i> {{ x[3] }} |
| </li> |
| <li ng-hide="entriesList.length > 0"> |
| There's no entries for this commit. |
| </li> |
| </ul> |
| </section> |
| </div> <!-- mdc_card --> |
| </div> <!-- cell --> |
| </div> <!-- grid_inner --> |
| </div> <!-- ledger-panel --> |
| |
| </section> |
| </main> |
| <!-- Material Components and Dashboard JS --> |
| <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script> |
| <script src="dashboard.js"></script> |
| </body> |
| </html> |