app/ledger/ledger_dashboard/webroot/index.html - topaz - Git at Google

 <!--
   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>
	<!--
	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>