Validator-Checker/index.html at main · telosnetwork/Validator-Checker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Telos Validator Checker</title>
    <link rel="icon" href="data:,">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header class="app-header">
      <div>
        <p class="eyebrow">Telos Block Producer Checks</p>
        <h1>Validator Checker</h1>
      </div>
      <div class="header-actions">
        <div class="network-switch" role="tablist" aria-label="Network">
          <button class="network-button is-active" type="button" data-network="mainnet" role="tab" aria-selected="true">Mainnet</button>
          <button class="network-button" type="button" data-network="testnet" role="tab" aria-selected="false">Testnet</button>
        </div>
        <p class="status-line" id="statusLine">Loading data...</p>
      </div>
    </header>

    <main>
      <section class="metrics" id="metrics" aria-label="Validation summary"></section>

      <section class="workspace" aria-label="Validator dashboard">
        <div class="tabs" role="tablist" aria-label="Dashboard sections">
          <button class="tab is-active" id="tab-producers" type="button" role="tab" aria-selected="true" aria-controls="panel-producers" data-tab="producers">Producer Table</button>
          <button class="tab" id="tab-endpoints" type="button" role="tab" aria-selected="false" aria-controls="panel-endpoints" data-tab="endpoints">Endpoints</button>
          <button class="tab" id="tab-performance" type="button" role="tab" aria-selected="false" aria-controls="panel-performance" data-tab="performance">Performance</button>
          <a class="tab tab-link" href="/ifchecker/">IF Checker</a>
        </div>

        <section class="panel is-active" id="panel-producers" role="tabpanel" aria-labelledby="tab-producers">
          <div class="controls">
            <label class="search-label" for="producerSearch">Search</label>
            <input id="producerSearch" class="search-input" type="search" placeholder="Producer, country, error...">
            <div class="filter-group" role="group" aria-label="Producer filters">
              <button type="button" class="filter-button is-active" data-filter="all">All</button>
              <button type="button" class="filter-button" data-filter="passing">Passing</button>
              <button type="button" class="filter-button" data-filter="failing">Failing</button>
              <button type="button" class="filter-button" data-filter="active">Active</button>
              <button type="button" class="filter-button" data-filter="standby">Standby</button>
            </div>
          </div>

          <div class="table-summary" id="tableSummary"></div>

          <div class="table-wrap">
            <table>
              <thead>
                <tr id="producerHeaderRow"></tr>
              </thead>
              <tbody id="producerRows">
                <tr>
                  <td colspan="10" class="table-empty">Loading...</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>

        <section class="panel" id="panel-performance" role="tabpanel" aria-labelledby="tab-performance" hidden>
          <div class="toolbar">
            <div>
              <h2 id="chartHeading">CPU Time</h2>
              <p class="subtle" id="chartSubhead">Waiting for history...</p>
            </div>
            <div class="toolbar-actions" aria-label="Chart controls">
              <div class="segmented" role="group" aria-label="Chart mode">
                <button type="button" class="mode-button is-active" data-mode="cpu" aria-pressed="true">CPU Time</button>
                <button type="button" class="mode-button" data-mode="api" aria-pressed="false">API Latency</button>
                <button type="button" class="mode-button" data-mode="missed" aria-pressed="false">Missed Blocks</button>
              </div>
              <button type="button" class="plain-button" id="showTableButton">View Table</button>
            </div>
          </div>

          <div class="chart-shell">
            <div class="chart-area" id="chartArea">
              <svg id="historyChart" role="img" aria-labelledby="chartHeading chartSubhead"></svg>
              <div class="chart-tooltip" id="chartTooltip" hidden></div>
            </div>
            <div class="empty-state" id="chartEmpty" hidden></div>
            <div class="legend" id="chartLegend" aria-label="Producer series"></div>
            <div class="legend-actions">
              <button type="button" class="plain-button" id="selectAllSeries">Select All</button>
              <button type="button" class="plain-button" id="deselectAllSeries">Deselect All</button>
            </div>
          </div>
        </section>

        <section class="panel" id="panel-endpoints" role="tabpanel" aria-labelledby="tab-endpoints" hidden>
          <div class="toolbar">
            <div>
              <h2>Endpoint Lists</h2>
              <p class="subtle" id="endpointSummary">Waiting for endpoint data...</p>
            </div>
            <div class="toolbar-actions endpoint-controls" aria-label="Endpoint controls">
              <label class="toggle-control endpoint-toggle">
                <input type="checkbox" id="endpointPassingOnly" checked>
                <span>Passing only</span>
              </label>
            </div>
          </div>

          <div class="endpoint-shell">
            <div class="endpoint-kind-tabs" role="tablist" aria-label="Endpoint list type">
              <button type="button" class="endpoint-kind-button is-active" id="endpointKindPeers" data-endpoint-kind="peers" role="tab" aria-selected="true" aria-controls="endpointList">Peering (P2P)</button>
              <button type="button" class="endpoint-kind-button" id="endpointKindApi" data-endpoint-kind="api" role="tab" aria-selected="false" aria-controls="endpointList">API Endpoints</button>
            </div>

            <section class="endpoint-panel" aria-labelledby="endpointListHeading">
              <div class="endpoint-panel-header">
                <h3 id="endpointListHeading">Peering addresses</h3>
                <div class="endpoint-actions">
                  <label class="format-control" for="endpointCopyFormat">
                    <span>Format</span>
                    <select id="endpointCopyFormat">
                      <option value="plain">Plain list</option>
                      <option value="comma">Comma-separated</option>
                      <option value="json">JSON array</option>
                    </select>
                  </label>
                  <button type="button" class="plain-button" id="copyEndpointListButton">Copy</button>
                </div>
              </div>
              <div class="endpoint-list" id="endpointList"></div>
            </section>
          </div>
        </section>
      </section>
    </main>

    <footer class="app-footer">
      <span>Snapshots from the Telos validator workflow; CPU history also follows the original Infinity Bloc benchmark feed.</span>
      <a href="validation/latest.json">Latest JSON</a>
      <a href="requirements.md">Requirements</a>
    </footer>

    <script src="app.js"></script>
  </body>
</html>