From d0d5de2271e97755541a4d21896c6f6c03170fd2 Mon Sep 17 00:00:00 2001 From: Gabriel Dugny Date: Mon, 25 Mar 2024 10:17:31 +0100 Subject: [PATCH] chore: setup djhtml in pre-commit, reformat all html --- .pre-commit-config.yaml | 7 ++ pyproject.toml | 3 +- rollup.config.mjs | 2 +- .../export_button/export_button.html | 4 +- .../components/form_field/form_field.html | 8 +- .../components/messages/messages.html | 98 +++++++-------- src/firefighter/components/modal/modal.html | 38 +++--- .../incidents/templates/incidents/filter.html | 16 +-- .../incidents/widgets/form_container.html | 114 +++++++++--------- .../widgets/grouped_checkbox_nested.html | 100 +++++++-------- .../layouts/partials/environment_pill.html | 12 +- .../partial_table_list_paginated.html | 2 +- .../layouts/partials/priority_pill.html | 2 +- .../layouts/partials/status_pill.html | 30 ++--- .../layouts/partials/user_tooltip.html | 2 +- .../templates/layouts/view_filters.html | 2 +- .../templates/pages/docs_metrics.html | 62 +++++----- .../templates/pages/incident_detail.html | 44 +++---- .../templates/pages/incident_list.html | 4 +- .../templates/pages/incident_statistics.html | 8 +- .../templates/pages/user_detail.html | 14 +-- 21 files changed, 290 insertions(+), 282 deletions(-) diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index a217ece7..a1a27bf0 100644 --- a/.pre-commit-config.yaml +++ b/.pre-commit-config.yaml @@ -28,3 +28,10 @@ repos: rev: v1.35.1 hooks: - id: yamllint + + - repo: https://github.com/rtts/djhtml + rev: '3.0.6' + hooks: + - id: djhtml + # djcss disabled for now + - id: djjs diff --git a/pyproject.toml b/pyproject.toml index 7d57e37e..9edb6d46 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -132,7 +132,8 @@ lint = {composite= ["lint-ruff", "lint-pylint", "lint-mypy"], help="Run all lint # Format fmt-black = {cmd="ruff format .", help="Run black-like ruff formatter"} fmt-ruff = {cmd="ruff check . --fix --select I001", help="Run isort-like import sorting with ruff"} -fmt = {composite= ["fmt-black", "fmt-ruff"], help="Run all formatters (black, isort-like ruff)"} +fmt-dj = {cmd="djhtml src", help="Run HTML formatting with djhtml"} +fmt = {composite= ["fmt-black", "fmt-ruff", "fmt-dj"], help="Run all formatters (black, isort-like ruff, djhtml)"} # Tests tests = {cmd="pytest", help="Run the tests"} tests-cov ={cmd= "pytest --junitxml=pytest-report.xml --cov --cov-report xml:pytest-coverage.xml --cov-fail-under=0 --cov-report html", help="Run the tests with coverage, and generate reports"} diff --git a/rollup.config.mjs b/rollup.config.mjs index 6b242c0c..b5e53a46 100644 --- a/rollup.config.mjs +++ b/rollup.config.mjs @@ -17,7 +17,7 @@ export default { plugins: [ inject({ htmx: 'htmx.org' - }), + }), nodeResolve({ browser: true, jsnext: true, diff --git a/src/firefighter/components/export_button/export_button.html b/src/firefighter/components/export_button/export_button.html index d2b54e89..10e274ac 100644 --- a/src/firefighter/components/export_button/export_button.html +++ b/src/firefighter/components/export_button/export_button.html @@ -24,8 +24,8 @@ {% for format in formats %}
  • + name="fields" value="{{format.fields}}" + form="main-filter" formaction="{{format.url}}" class="" role="menuitem" tabindex="-1">{{format.label}}
    • {% endfor %} diff --git a/src/firefighter/components/form_field/form_field.html b/src/firefighter/components/form_field/form_field.html index 841be4d9..6da657f7 100644 --- a/src/firefighter/components/form_field/form_field.html +++ b/src/firefighter/components/form_field/form_field.html @@ -10,9 +10,9 @@ {% render_field field class=field_input_class class+="input input-bordered w-full" %} {% if field.help_text %} - - {% endif %} + + {% endif %} diff --git a/src/firefighter/components/messages/messages.html b/src/firefighter/components/messages/messages.html index 332ae470..641f6b54 100644 --- a/src/firefighter/components/messages/messages.html +++ b/src/firefighter/components/messages/messages.html @@ -1,52 +1,52 @@ {% if messages %} - + + {% elif message.level == DEFAULT_MESSAGE_LEVELS.INFO %} + +
    +
    + + {{ message }} +
    +
    + + {% elif message.level == DEFAULT_MESSAGE_LEVELS.SUCCESS %} + +
    +
    + + {{ message }} +
    +
    + + {% elif message.level == DEFAULT_MESSAGE_LEVELS.WARNING %} + +
    +
    + + {{ message }} +
    +
    + + {% else %} + +
    +
    + + {{ message }} +
    +
    + + {% endif %} + {% endfor %} + {% endif %} diff --git a/src/firefighter/components/modal/modal.html b/src/firefighter/components/modal/modal.html index f0605e8b..55a1310a 100644 --- a/src/firefighter/components/modal/modal.html +++ b/src/firefighter/components/modal/modal.html @@ -4,7 +4,7 @@ x-data="{ open: false }" {% if autoplay == True %}x-init="$nextTick(() => { open = true })"{% endif %} >
    + @click="open = true"> {% slot "modal_enabler" %}
    + @click.stop="" + @keydown.escape="open = false" + x-show="open" + x-trap="open" + x-trap.noscroll="open" + x-trap.inert="open" + x-transition:enter="transition ease-out duration-300" + x-transition:enter-start="transform scale-50 opacity-0" + x-transition:enter-end="transform scale-100 opacity-100" + x-transition:leave="transition ease-out duration-200" + x-transition:leave-start="transform scale-100 opacity-100" + x-transition:leave-end="transform scale-50 opacity-0" + class="flex flex-col rounded-lg shadow-lg overflow-hidden bg-white dark:bg-neutral-900 dark:text-neutral-100 m-w-4/5 xl:m-w-3/5 min-h-4/5 z-[100]" style="max-height: 95vh;">

    {% slot "modal_header" %} {% if title %}{{ title }}{% endif %}{% endslot %}

    diff --git a/src/firefighter/incidents/templates/incidents/filter.html b/src/firefighter/incidents/templates/incidents/filter.html index eb41d21a..9f3aadd8 100644 --- a/src/firefighter/incidents/templates/incidents/filter.html +++ b/src/firefighter/incidents/templates/incidents/filter.html @@ -1,14 +1,14 @@ {% load widget_tweaks %}
    + hx-trigger="input from:[type=checkbox],input delay:300ms" + hx-boost="true" + hx-ext="debug" + hx-get="{{ request.path }}" + hx-target="#filtered-container" + hx-swap="outerHTML" + hx-push-url="true" + hx-indicator=".progress">
    {% for filter_field in filter_order %} diff --git a/src/firefighter/incidents/templates/incidents/widgets/form_container.html b/src/firefighter/incidents/templates/incidents/widgets/form_container.html index 0b375122..10c13af4 100644 --- a/src/firefighter/incidents/templates/incidents/widgets/form_container.html +++ b/src/firefighter/incidents/templates/incidents/widgets/form_container.html @@ -1,63 +1,63 @@ {% load widget_tweaks %}
    { + el.checked = this.selectAll; + (this.selectAll) ? this.selected_{{ filter_form.html_name }}.push(el.value) : this.selected_{{ filter_form.html_name }} = []; + }) + + this.updateSelectAllState() + }, + updateSelectAllStateGroup() { + this.updateSelectAllState() + }, + updateSelectAllState() { + + checkboxes_group = document.querySelectorAll('input[group-select]'); + checkboxes = document.querySelectorAll('input[name={{ filter_form.html_name }}]'); + this.selected_{{ filter_form.html_name }}= []; + [...checkboxes].map((el) => { + if (el.checked) { + + this.selected_{{ filter_form.html_name }}.push(el.value); + } + }) + + + if (this.selected_{{ filter_form.html_name }}.length == 0) { + this.selectAll = false; + $refs.checkAll.indeterminate = false; + [...checkboxes_group].map((el) => { + el.checked = false + }) + } else if (this.selected_{{ filter_form.html_name }}.length < checkboxes.length) { + + this.selectAll = false; + $refs.checkAll.indeterminate = true; + + } else { + this.selectAll = true; + $refs.checkAll.indeterminate = false; + + [...checkboxes_group].map((el) => { + el.checked = true + }) + } + + this.selectAll = (this.selected_{{ filter_form.html_name }}.length == checkboxes.length) ? true : false; + + checkboxes_group = document.querySelectorAll('input[group-select]'); + } + }" + x-init="updateSelectAllStateGroup();" >

    diff --git a/src/firefighter/incidents/templates/incidents/widgets/grouped_checkbox_nested.html b/src/firefighter/incidents/templates/incidents/widgets/grouped_checkbox_nested.html index af1fa509..b1215e86 100644 --- a/src/firefighter/incidents/templates/incidents/widgets/grouped_checkbox_nested.html +++ b/src/firefighter/incidents/templates/incidents/widgets/grouped_checkbox_nested.html @@ -4,56 +4,56 @@ {% if group is not null %}
    {% comment %} {% endcomment %} diff --git a/src/firefighter/incidents/templates/layouts/partials/environment_pill.html b/src/firefighter/incidents/templates/layouts/partials/environment_pill.html index 28b8fc3a..125f5a5c 100644 --- a/src/firefighter/incidents/templates/layouts/partials/environment_pill.html +++ b/src/firefighter/incidents/templates/layouts/partials/environment_pill.html @@ -1,11 +1,11 @@ {% if environment.value is not none %} + {% if environment.value == "PRD" %} + bg-yellow-100 text-yellow-800 + {% else %} + bg-neutral-300 text-neutral-600 + {% endif %} + "> {{ environment.value }} {% endif %} diff --git a/src/firefighter/incidents/templates/layouts/partials/partial_table_list_paginated.html b/src/firefighter/incidents/templates/layouts/partials/partial_table_list_paginated.html index efc0c089..67056f96 100644 --- a/src/firefighter/incidents/templates/layouts/partials/partial_table_list_paginated.html +++ b/src/firefighter/incidents/templates/layouts/partials/partial_table_list_paginated.html @@ -84,7 +84,7 @@

    No results

    {% for page_nb in page_range|default_if_none:page_obj.paginator.get_elided_page_range %} + class="dark:bg-neutral-900 dark:hover:bg-neutral-700 bg-white border-neutral-300 text-neutral-500 hover:bg-neutral-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium {%if page_obj.number == page_nb%}z-10 bg-indigo-50 dark:border-indigo-500 dark:text-indigo-300 border-indigo-500 text-primary {% else %}dark:border-neutral-700 dark:text-neutral-200 {% endif %}"> {{ page_nb }} {% endfor %} diff --git a/src/firefighter/incidents/templates/layouts/partials/priority_pill.html b/src/firefighter/incidents/templates/layouts/partials/priority_pill.html index ff978e38..0b537221 100644 --- a/src/firefighter/incidents/templates/layouts/partials/priority_pill.html +++ b/src/firefighter/incidents/templates/layouts/partials/priority_pill.html @@ -1,4 +1,4 @@ + "> {{ priority.name }} diff --git a/src/firefighter/incidents/templates/layouts/partials/status_pill.html b/src/firefighter/incidents/templates/layouts/partials/status_pill.html index f15bd5b6..2c0e2f80 100644 --- a/src/firefighter/incidents/templates/layouts/partials/status_pill.html +++ b/src/firefighter/incidents/templates/layouts/partials/status_pill.html @@ -1,18 +1,18 @@ + {% if size != "big" %} + px-2 text-xs leading-5 + {% else %} + px-4 text-2xl py-2 + {% endif %} + {% if status.value == IncidentStatus.CLOSED %} + bg-neutral-300 text-neutral-600 + {% elif status.value == IncidentStatus.FIXED %} + bg-success text-success-content + {% elif status.value == IncidentStatus.POST_MORTEM %} + bg-indigo-100 text-indigo-800 + {% else %} + bg-error text-error-content + {% endif %} + "> {{ status.label }} diff --git a/src/firefighter/incidents/templates/layouts/partials/user_tooltip.html b/src/firefighter/incidents/templates/layouts/partials/user_tooltip.html index 53ff0e02..2f3a1c3c 100644 --- a/src/firefighter/incidents/templates/layouts/partials/user_tooltip.html +++ b/src/firefighter/incidents/templates/layouts/partials/user_tooltip.html @@ -1,7 +1,7 @@
    {% if user.avatar %} + class="rounded-lg object-cover h-20 w-20"/> {% endif %}

    {{ user.full_name }}

    diff --git a/src/firefighter/incidents/templates/layouts/view_filters.html b/src/firefighter/incidents/templates/layouts/view_filters.html index eb439c5a..826dbcb9 100644 --- a/src/firefighter/incidents/templates/layouts/view_filters.html +++ b/src/firefighter/incidents/templates/layouts/view_filters.html @@ -5,7 +5,7 @@ {% block page_main_action_hidden %} {% comment %} Hidden button to act as default button to filter. Selected because first in DOM {% endcomment %} + formaction="{{ request.path }}" class="hidden" aria-hidden="true" tabindex="-1"> {% endblock%}
    diff --git a/src/firefighter/incidents/templates/pages/docs_metrics.html b/src/firefighter/incidents/templates/pages/docs_metrics.html index 292694b8..f7d123b6 100644 --- a/src/firefighter/incidents/templates/pages/docs_metrics.html +++ b/src/firefighter/incidents/templates/pages/docs_metrics.html @@ -25,44 +25,44 @@

    {% component "card" id="metrics-details" card_title="Incident Metrics Details" %} {% fill "card_content" %} -
    -

    - Metrics are durations, used to track the time of the incident response. -

    -

    - These durations are computed automatically from incident's Key Events. -
    `Time To` metrics relate to a single incident, but are used for `Mean Time To` metrics, about a group of incidents. -

    - {% for metric in metrics%} -

    {{metric.name|capfirst}} ({{ metric.code }})

    -

    {{ metric.description }}

    -

    Metric formula: - {{metric.code}} = {{metric.milestone_lhs.event_type|capfirst}} - {{metric.milestone_rhs.event_type|capfirst}} +

    +

    + Metrics are durations, used to track the time of the incident response.

    +

    + These durations are computed automatically from incident's Key Events. +
    `Time To` metrics relate to a single incident, but are used for `Mean Time To` metrics, about a group of incidents. +

    + {% for metric in metrics%} +

    {{metric.name|capfirst}} ({{ metric.code }})

    +

    {{ metric.description }}

    +

    Metric formula: + {{metric.code}} = {{metric.milestone_lhs.event_type|capfirst}} - {{metric.milestone_rhs.event_type|capfirst}} +

    - {% endfor %} + {% endfor %}
    {% endfill %} {% endcomponent %} {% component "card" id="metrics-details" card_title="Key Events Details" %} {% fill "card_content" %} -
    -

    - Key Events are important events, point in time in your incident, that are equivalent to the status of the outage. -

    -

    - They are used to derive Incident Metrics, that are useful to understand the impact of the incident.
    - Key Events can be modified by any user, either in Slack or in the Incident Page. -

    - {% for key_event in key_events%} - {% if key_event.asked_for %} -

    {{key_event.name|capfirst}}

    - {{key_event.description|default:key_event.summary|markdown|safe}} - {% if not key_event.user_editable%} -

    💡 This Key Event is added automatically to incidents by FireFighter, from the status you put in your `/incident update`.

    - {% endif%} - {% endif %} - {% endfor %} +
    +

    + Key Events are important events, point in time in your incident, that are equivalent to the status of the outage. +

    +

    + They are used to derive Incident Metrics, that are useful to understand the impact of the incident.
    + Key Events can be modified by any user, either in Slack or in the Incident Page. +

    + {% for key_event in key_events%} + {% if key_event.asked_for %} +

    {{key_event.name|capfirst}}

    + {{key_event.description|default:key_event.summary|markdown|safe}} + {% if not key_event.user_editable%} +

    💡 This Key Event is added automatically to incidents by FireFighter, from the status you put in your `/incident update`.

    + {% endif%} + {% endif %} + {% endfor %}
    {% endfill %} {% endcomponent %} diff --git a/src/firefighter/incidents/templates/pages/incident_detail.html b/src/firefighter/incidents/templates/pages/incident_detail.html index cd410ef0..bf89767a 100644 --- a/src/firefighter/incidents/templates/pages/incident_detail.html +++ b/src/firefighter/incidents/templates/pages/incident_detail.html @@ -114,27 +114,27 @@

    + viewBox="68 68 135 135" > + C105.9,183.5,105.9,151.2,105.9,151.2z"/> + C86.5,105.9,118.8,105.9,118.8,105.9z"/> + c7.1,0,12.9,5.8,12.9,12.9V118.8z"/> + c0,7.1-5.8,12.9-12.9,12.9H151.2z"/>
    @@ -158,15 +158,15 @@

    -
    - -
    -
    -

    Jira Incident Ticket

    -

    {{incident.jira_ticket.key |truncatechars:70}}

    -
    - +
  • +
    + +
    +
    +

    Jira Incident Ticket

    +

    {{incident.jira_ticket.key |truncatechars:70}}

    +
    +
    • {% endif %} {% for pagerduty_incident in incident.pagerduty_incident_set.all %}
  • @@ -198,14 +198,14 @@

    -
  • -
    - {{impact.impact_type.emoji}} -

    {{impact.impact_type}}

    -
    -

    {{impact.impact_level.value_label}}: {{impact.impact_level.name}}

    -
    • +
      +
    • +
      + {{impact.impact_type.emoji}} +

      {{impact.impact_type}}

      +
      +

      {{impact.impact_level.value_label}}: {{impact.impact_level.name}}

      +
    {% endfor %} {% endfill %} diff --git a/src/firefighter/incidents/templates/pages/incident_list.html b/src/firefighter/incidents/templates/pages/incident_list.html index 41872030..bb23e010 100644 --- a/src/firefighter/incidents/templates/pages/incident_list.html +++ b/src/firefighter/incidents/templates/pages/incident_list.html @@ -14,8 +14,8 @@ {{ block.super }} {% component "export_button" base_url="api:incidents-list" %}{% endcomponent %} diff --git a/src/firefighter/incidents/templates/pages/user_detail.html b/src/firefighter/incidents/templates/pages/user_detail.html index 21293645..77ac2631 100644 --- a/src/firefighter/incidents/templates/pages/user_detail.html +++ b/src/firefighter/incidents/templates/pages/user_detail.html @@ -19,13 +19,13 @@

    {{ target_user.full_name }}

    {% if perms.incidents.change_users %} - - - - - - Edit - + + + + + + Edit + {% endif %}