Kafka message sidebar panel #109

jamesturner246 · 2024-09-25T11:26:08Z

Description

Adds a panel on the right to display Kafka messages.

Messages are scrollable when they won't fit.

I wasn't able to reliably set max-size to something that fits the window, so I just set it to 85% viewport height. I think the issue is the main container, which includes the main table, does not yet have its height fixed, so I cannot inherit it's max height minus top bars, padding, etcetera. Is this something you want tackled now, or later?

Else all good to go.

Fixes #92

Type of change

Documentation (non-breaking change that adds or improves the documentation)
New feature (non-breaking change which adds functionality)
Optimization (non-breaking, back-end change that speeds up the code)
Bug fix (non-breaking change which fixes an issue)
Breaking change (whatever its nature)

Key checklist

All tests pass (eg. python -m pytest)
The documentation builds and looks OK (eg. python -m sphinx -b html docs docs/build)
Pre-commit hooks run successfully (eg. pre-commit run --all-files)

Further checks

Code is commented, particularly in hard-to-understand areas
Tests added or an issue has been opened to tackle that in the future. (Indicate issue here: # (issue))

dalonsoa

Looks good to me.

I'd suggest we add Prettier code formatter to VScode and the following lines to the settings - for those using it.

  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

And also to think on a pre-commit hook for HTML. Now that we have more "complex" HTML, we need to worry about its format as well.

dalonsoa · 2024-09-26T09:40:12Z

main/templates/main/base.html

@@ -8,6 +8,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% bootstrap_css %}
    {% bootstrap_javascript %}
+    {% block extra_css %}{% endblock %}


Why do we need this empty extra css block here?

This is where I injected the custom CSS into the head in the index template. The contents of extra_css in index.html are substituted into extra_css in the <main> section of base.html.

Not sure if there's a more proper way to do it.

jamesturner246 · 2024-09-26T11:22:55Z

Oopp. I think .vscode/settings.json is gone now. I'll add it to .pre-commit-config.yaml instead.

dalonsoa · 2024-09-26T12:16:37Z

main/templates/main/base.html

-{% load static %}
-{% load django_bootstrap5 %}
-<!DOCTYPE html>
+{% load static %} {% load django_bootstrap5 %}


I'd suggest to revert running prettrier and add a few tags to tell it to ignore some parts. This headers just look much better if each is int its line. So, leave this as:

Suggested change

{% load static %} {% load django_bootstrap5 %}



{% load static %}

{% load django_bootstrap5 %}

And the same with the other HTML files. These {%... lines are just not understood by prettier as HTML because they are django stuff. Check this commit in Paricia where I've done the change and avoided the reformatting of the django tags.

ImperialCollegeLondon/paricia@8357eec

cc-a · 2024-09-26T12:26:12Z

Perhaps https://github.com/davidodenwald/prettier-plugin-jinja-template

alexdewar · 2024-09-26T12:27:10Z

The prettier pre-commit hook is kinda dead, which is why we had to change to other hooks 😞.

I'm wondering whether I should revive it though... Don't think it would take much work and I do like the results better than the other hooks. Maybe could be a Hacktoberfest project?

cc-a · 2024-09-26T12:32:58Z

Or https://www.djlint.com/docs/languages/jinja/

This reverts commit 170eaef.

jamesturner246 · 2024-09-26T12:49:04Z

prettier-plugin-jinja-template looks like it may have the same problem in reverse, where style tags must be ignored.

I'll try out djLint. If not I'll just use ignores as in @dalonsoa's comment.

For now it's reverted.

codecov-commenter · 2024-09-26T12:49:06Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (45c5789) to head (897d347).
Report is 11 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##              main      #109   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files            5         5           
  Lines           44        44           
=========================================
  Hits            44        44

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

alexdewar

LGTM 👍

jamesturner246 · 2024-09-26T14:57:45Z

Playing around with djLint and the layout is not bad. Had to add some extra stuff to keep it happy, such as meta fields.

A couple of nags I hid for now:

It doesn't like inline CSS, like that in logs.html
A false-positive for an orphaned tag (upstream bug)

One final note to factor in is the repo doesn't look especially busy.

cc-a

Good stuff. I like having linting for the templates is a real step forward. I had a play and that orphaned tag one is caused by that stray comma in the form tag.

Curious what others think but because the nature of html leads to lots of indentation I'd prefer to just use 2 spaces instead of 4.

Otherwise this looks like a good first stab at the layout.

jamesturner246 · 2024-09-26T15:31:11Z

Stray comma gone. I went ahead and turn indentation down to 2 also.

cc-a

Nice. I'm afraid the pedant in me can't help but suggest that it would be slightly nicer to put the indent config in pyproject.toml. In case anyone wants to run it outside of pre-commit.

jamesturner246 · 2024-09-26T16:11:49Z

All good. Will wait a bit and merge later in case someone else wants a looksee.

dalonsoa

Looks good to me - and have stolen the djlint stuff for Paricia :)

Basic Kafka message panel.

f6ef6d3

jamesturner246 changed the title ~~Basic Kafka message panel.~~ Kafka message sidebar panel Sep 25, 2024

Make message pane scrollable.

619ec8b

jamesturner246 requested review from dalonsoa and cc-a September 25, 2024 15:38

jamesturner246 marked this pull request as ready for review September 25, 2024 15:38

Merge branch 'main' into msg_panel

4239f4b

jamesturner246 requested review from alexdewar and AdrianDAlessandro September 25, 2024 15:49

dalonsoa approved these changes Sep 26, 2024

View reviewed changes

Add prettier HTML to pre-commit.

170eaef

dalonsoa reviewed Sep 26, 2024

View reviewed changes

Revert "Add prettier HTML to pre-commit."

8fb97aa

This reverts commit 170eaef.

alexdewar approved these changes Sep 26, 2024

View reviewed changes

Use djLint on HTML.

0b14c33

jamesturner246 requested a review from dalonsoa September 26, 2024 14:59

cc-a requested changes Sep 26, 2024

View reviewed changes

jamesturner246 added 2 commits September 26, 2024 16:22

Stray comma.

cdfe93d

HTML indentation: 2.

ea5ab12

jamesturner246 requested a review from cc-a September 26, 2024 15:31

cc-a approved these changes Sep 26, 2024

View reviewed changes

djlint in pyproject.toml.

ad04113

dalonsoa approved these changes Sep 27, 2024

View reviewed changes

Merge branch 'main' into msg_panel

897d347

jamesturner246 merged commit e3249e4 into main Sep 27, 2024
4 checks passed

jamesturner246 deleted the msg_panel branch September 27, 2024 08:53

cc-a mentioned this pull request Sep 27, 2024

Fix process action form #118

Merged

10 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Kafka message sidebar panel #109

Kafka message sidebar panel #109

jamesturner246 commented Sep 25, 2024 •

edited

Loading

dalonsoa left a comment

dalonsoa Sep 26, 2024

jamesturner246 Sep 26, 2024 •

edited

Loading

jamesturner246 commented Sep 26, 2024

dalonsoa Sep 26, 2024

cc-a commented Sep 26, 2024 via email •

edited

Loading

alexdewar commented Sep 26, 2024

cc-a commented Sep 26, 2024

jamesturner246 commented Sep 26, 2024

codecov-commenter commented Sep 26, 2024 •

edited

Loading

alexdewar left a comment

jamesturner246 commented Sep 26, 2024

cc-a left a comment

jamesturner246 commented Sep 26, 2024

cc-a left a comment

jamesturner246 commented Sep 26, 2024

dalonsoa left a comment

Kafka message sidebar panel #109

Kafka message sidebar panel #109

Conversation

jamesturner246 commented Sep 25, 2024 • edited Loading

Description

Type of change

Key checklist

Further checks

dalonsoa left a comment

Choose a reason for hiding this comment

dalonsoa Sep 26, 2024

Choose a reason for hiding this comment

jamesturner246 Sep 26, 2024 • edited Loading

Choose a reason for hiding this comment

jamesturner246 commented Sep 26, 2024

dalonsoa Sep 26, 2024

Choose a reason for hiding this comment

cc-a commented Sep 26, 2024 via email • edited Loading

alexdewar commented Sep 26, 2024

cc-a commented Sep 26, 2024

jamesturner246 commented Sep 26, 2024

codecov-commenter commented Sep 26, 2024 • edited Loading

Codecov Report

alexdewar left a comment

Choose a reason for hiding this comment

jamesturner246 commented Sep 26, 2024

cc-a left a comment

Choose a reason for hiding this comment

jamesturner246 commented Sep 26, 2024

cc-a left a comment

Choose a reason for hiding this comment

jamesturner246 commented Sep 26, 2024

dalonsoa left a comment

Choose a reason for hiding this comment

jamesturner246 commented Sep 25, 2024 •

edited

Loading

jamesturner246 Sep 26, 2024 •

edited

Loading

cc-a commented Sep 26, 2024 via email •

edited

Loading

codecov-commenter commented Sep 26, 2024 •

edited

Loading