Browse Source

collapsible sections for resource detail view

tags/19.9.2
Henning Jacobs 1 week ago
parent
commit
109a6e8c28

+ 1
- 1
Makefile View File

@@ -34,7 +34,7 @@ test.e2e: docker
--log-cli-level info \
--log-cli-format '%(asctime)s %(levelname)s %(message)s' \
--cluster-name kube-web-view-e2e \
tests/e2e $(PYTEST_OPTIONS)
tests/e2e

docker:
docker build --build-arg "VERSION=$(VERSION)" -t "$(IMAGE):$(TAG)" .

+ 1
- 1
README.md View File

@@ -61,7 +61,7 @@ make test
The end-to-end (e2e) tests will bootstrap a new Kind cluster via [pytest-kind](https://pypi.org/project/pytest-kind/), you can keep the cluster and run Kubernetes Web View for development against it:

```
PYTEST_OPTIONS=--keep-cluster make test
PYTEST_ADDOPTS=--keep-cluster make test
make run.kind
```


+ 9
- 0
kube_web/templates/assets/kube-web.css View File

@@ -75,6 +75,15 @@ table.table.has-bottom-controls { margin-bottom: 0.5rem; }
div.section { margin: 0 0 1rem 0; padding: 0; }
div.section h4.title { margin-bottom: 1rem; }

div.section.collapsible h4.title { cursor: pointer; border-bottom: 1px solid #fff; }
div.section.collapsible h4.title:hover { color: #363636; border-bottom: 1px solid #dbdbdb; }

div.section.collapsible h4.title:hover::after { content: " ▴"; }
div.section.is-collapsed h4.title { color: #7a7a7a; border-bottom: 1px solid #dbdbdb; }
div.section.is-collapsed h4.title:hover::after { content: " ▾"; }
div.section.is-collapsed .content,
div.section.is-collapsed table { display: none; }

a.toggle-tools.is-active span {
transform: rotate(180deg);
}

+ 9
- 0
kube_web/templates/assets/kube-web.js View File

@@ -56,4 +56,13 @@ document.addEventListener('DOMContentLoaded', () => {
});
});

const $collapsibleHeaders = Array.prototype.slice.call(document.querySelectorAll('main .collapsible h4.title'), 0);

$collapsibleHeaders.forEach( el => {
el.addEventListener('click', function () {
const $section = el.parentElement;
$section.classList.toggle('is-collapsed');
});
});

});

+ 3
- 3
kube_web/templates/resource-view.html View File

@@ -90,7 +90,7 @@
{% for key, val in resource.obj.items()|sort: %}
{% if key not in ('metadata', 'apiVersion', 'kind'): %}

<div class="section">
<div class="section collapsible">
<h4 class="title is-5">{{ key|capitalize }}</h4>
<div class="content">
{{ val|yaml|highlight|safe }}
@@ -110,7 +110,7 @@


{% if table: %}
<div class="section">
<div class="section collapsible">
<h4 class="title is-5">Pods</h4>
<table class="table is-striped">
<tr>
@@ -159,7 +159,7 @@
</div>
{% endif %}

<div class="section">
<div class="section collapsible">
{% include "partials/events.html" %}
</div>


Loading…
Cancel
Save