Skip to content

Commit ecd9438

Browse files
author
Felix Hennig
committed
changes
1 parent fddc0fc commit ecd9438

File tree

3 files changed

+139
-33
lines changed

3 files changed

+139
-33
lines changed

‎template/_navbar.html‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,21 +13,21 @@
1313
<i class="fa fa-angle-down ml-5" aria-hidden="true"></i> <!-- ml-5= margin-left: 0.5rem (5px) -->
1414
</a>
1515
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="nav-link-dropdown-toggle">
16-
<a class="dropdown-item" href="/stackabletech/airflow-operator">Airflow Operator</a>
17-
<a class="dropdown-item" href="/stackabletech/druid-operator">Druid Operator</a>
18-
<a class="dropdown-item" href="/stackabletech/hbase-operator">HBase Operator</a>
19-
<a class="dropdown-item" href="/stackabletech/hdfs-operator">HDFS Operator</a>
20-
<a class="dropdown-item" href="/stackabletech/hive-operator">Hive Operator</a>
21-
<a class="dropdown-item" href="/stackabletech/kafka-operator">Kafka Operator</a>
22-
<a class="dropdown-item" href="/stackabletech/nifi-operator">NiFi Operator</a>
23-
<a class="dropdown-item" href="/stackabletech/spark-k8s-operator">Spark Operator</a>
24-
<a class="dropdown-item" href="/stackabletech/superset-operator">Superset Operator</a>
25-
<a class="dropdown-item" href="/stackabletech/trino-operator">Trino Operator</a>
26-
<a class="dropdown-item" href="/stackabletech/zookeeper-operator">ZooKeeper Operator</a>
27-
<a class="dropdown-item" href="/stackabletech/opa-operator">OPA Operator</a>
28-
<a class="dropdown-item" href="/stackabletech/commons-operator">Commons Operator</a>
29-
<a class="dropdown-item" href="/stackabletech/listener-operator">Listener Operator</a>
30-
<a class="dropdown-item" href="/stackabletech/secret-operator">Secret Operator</a>
16+
<a class="dropdown-item" href="/airflow-operator">Airflow Operator</a>
17+
<a class="dropdown-item" href="/druid-operator">Druid Operator</a>
18+
<a class="dropdown-item" href="/hbase-operator">HBase Operator</a>
19+
<a class="dropdown-item" href="/hdfs-operator">HDFS Operator</a>
20+
<a class="dropdown-item" href="/hive-operator">Hive Operator</a>
21+
<a class="dropdown-item" href="/kafka-operator">Kafka Operator</a>
22+
<a class="dropdown-item" href="/nifi-operator">NiFi Operator</a>
23+
<a class="dropdown-item" href="/spark-k8s-operator">Spark Operator</a>
24+
<a class="dropdown-item" href="/superset-operator">Superset Operator</a>
25+
<a class="dropdown-item" href="/trino-operator">Trino Operator</a>
26+
<a class="dropdown-item" href="/zookeeper-operator">ZooKeeper Operator</a>
27+
<a class="dropdown-item" href="/opa-operator">OPA Operator</a>
28+
<a class="dropdown-item" href="/commons-operator">Commons Operator</a>
29+
<a class="dropdown-item" href="/listener-operator">Listener Operator</a>
30+
<a class="dropdown-item" href="/secret-operator">Secret Operator</a>
3131
</div>
3232
</li>
3333
</ul>

‎template/home.html‎

Lines changed: 117 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,123 @@
11
<div class="container mt-md-20">
22
<div class="content">
3-
<ul>
4-
<li><a href="/stackabletech/airflow-operator">Airflow Operator</a></li>
5-
<li><a href="/stackabletech/druid-operator">Druid Operator</a></li>
6-
<li><a href="/stackabletech/hbase-operator">HBase Operator</a></li>
7-
<li><a href="/stackabletech/hdfs-operator">HDFS Operator</a></li>
8-
<li><a href="/stackabletech/hive-operator">Hive Operator</a></li>
9-
<li><a href="/stackabletech/kafka-operator">Kafka Operator</a></li>
10-
<li><a href="/stackabletech/nifi-operator">NiFi Operator</a></li>
11-
<li><a href="/stackabletech/spark-k8s-operator">Spark Operator</a></li>
12-
<li><a href="/stackabletech/superset-operator">Superset Operator</a></li>
13-
<li><a href="/stackabletech/trino-operator">Trino Operator</a></li>
14-
<li><a href="/stackabletech/zookeeper-operator">ZooKeeper Operator</a></li>
15-
<li><a href="/stackabletech/opa-operator">OPA Operator</a></li>
16-
<li><a href="/stackabletech/commons-operator">Commons Operator</a></li>
17-
<li><a href="/stackabletech/listener-operator">Listener Operator</a></li>
18-
<li><a href="/stackabletech/secret-operator">Secret Operator</a></li>
19-
</ul>
3+
<h1 class="content-title">Stackable Data Platform CRD Reference Documentation</h1>
4+
<select class="form-control w-md-400 w-sm-full mb-md-10 mb-5" onchange="handleSelect(this)">
5+
{{ $actual := .Tag }}{{ range $version := .PlatformVersions }}
6+
{{ if eq $version $actual }}
7+
<option value="/{{ $version }}" selected="selected">{{ $version }}</option>
8+
{{ else }}
9+
<option value="/{{ $version }}" >{{ $version }}</option>
10+
{{ end }}
11+
{{ end }}
12+
</select>
13+
<div id="crds"></div>
2014
</div>
2115
</div>
2216

2317
{{ template "_scripts" . }}
18+
<script type="text/javascript">
19+
function handleSelect(elm)
20+
{
21+
window.location = elm.value;
22+
}
23+
</script>
24+
<script src="https://unpkg.com/react-table@7/dist/react-table.production.min.js"></script>
25+
<script type="module">
26+
import { formatRelative } from 'https://cdn.jsdelivr.net/npm/date-fns/+esm';
27+
28+
const { render } = ReactDOM;
29+
const { html } = htmReact;
30+
const { useTable, useSortBy, useGlobalFilter } = ReactTable;
31+
32+
const { Tag, PlatformVersions, Rows, } = JSON.parse(`{{ .JsonData }}`);
33+
const data = Rows;
34+
35+
function renderLink(row, linkText) {
36+
const href = `/${Tag}/${row.Group}/${row.Kind}/${row.Version}`;
37+
38+
return html`<a href=${href}>${linkText}</a>`;
39+
}
40+
41+
const columns = [
42+
{
43+
Header: 'Kind',
44+
accessor: 'Kind',
45+
Cell: ({ row: { original }, value }) => renderLink(original, value)
46+
},
47+
{
48+
Header: 'Group',
49+
accessor: 'Group'
50+
},
51+
{
52+
Header: 'Version',
53+
accessor: 'Version'
54+
},
55+
{
56+
Header: 'Operator',
57+
accessor: 'RepoShort'
58+
}
59+
];
60+
61+
function CRDHeader(column) {
62+
let bla = (column.isSorted
63+
? column.isSortedDesc
64+
? html`<i class="fas fa-sort-down"></i>`
65+
: html`<i class="fas fa-sort-up"></i>`
66+
: html`<i class="fas fa-sort"></i>`)
67+
return html`<th ...${column.getHeaderProps(column.getSortByToggleProps())}>
68+
${column.render('Header')}
69+
<span class="sort-header ${column.isSorted ? 'sort-header-active' : ''}">
70+
${bla}
71+
</span>
72+
</th>`
73+
}
74+
75+
function CRDTable() {
76+
const table = useTable({ columns, data }, useSortBy, useGlobalFilter);
77+
const {
78+
getTableProps,
79+
getTableBodyProps,
80+
headerGroups,
81+
rows,
82+
prepareRow,
83+
setGlobalFilter,
84+
state: { globalFilter }
85+
} = table;
86+
87+
return html`
88+
<div class="table-responsive">
89+
<table class="table table-striped table-outer-bordered" ...${getTableProps()}>
90+
<thead>
91+
${headerGroups.map(group => html`
92+
<tr ...${group.getHeaderGroupProps()}>
93+
${group.headers.map(CRDHeader)}
94+
</tr>
95+
`)}
96+
</thead>
97+
<tbody ...${getTableBodyProps()}>
98+
${rows.map(row => {
99+
prepareRow(row)
100+
return html`
101+
<tr ...${row.getRowProps()}>
102+
${row.cells.map(cell => html`
103+
<td ...${cell.getCellProps()}>${cell.render('Cell')}</td>
104+
`)}
105+
</tr>
106+
`
107+
})}
108+
</tbody>
109+
</table>
110+
</div>`;
111+
}
112+
113+
render(html`<${CRDTable} />`, document.getElementById("crds"));
114+
</script>
115+
<style>
116+
#crds .sort-header {
117+
margin-left: 1rem;
118+
}
119+
120+
#crds .sort-header:not(.sort-header-active) {
121+
opacity: 0.5;
122+
}
123+
</style>

‎template/org.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,17 @@ <h1 class="content-title"><a href="/{{ .Repo }}/{{ .Tag }}">{{ .Repo }}@{{ .Tag
3232
const { Repo, CRDs, Tag, At, } = JSON.parse(`{{ .JsonData }}`);
3333
const data = Object.keys(CRDs).map(key => CRDs[key]);
3434

35+
function renderLink(row, linkText) {
36+
const href = `/${Tag}/${row.Group}/${row.Kind}/${row.Version}`;
37+
38+
return html`<a href=${href}>${linkText}</a>`;
39+
}
40+
3541
const columns = [
3642
{
3743
Header: 'Kind',
3844
accessor: 'Kind',
39-
Cell: ({ row: { original }, value }) => html`<a href=${`/${Repo}/${Tag}/${original.Group}/${original.Kind}/${original.Version}`}>${value}</a>`
45+
Cell: ({ row: { original }, value }) => renderLink(original, value)
4046
},
4147
{
4248
Header: 'Group',

0 commit comments

Comments
 (0)