Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Convert configuration page to SFC #1436

Merged
merged 3 commits into from
Jul 16, 2024
Merged

Conversation

pirlgon
Copy link
Contributor

@pirlgon pirlgon commented Jul 5, 2024

We include js and css in Configuration.vue
and remove the old files.
Jquery is now imported from the npm package.

@pirlgon pirlgon force-pushed the configuration_to_vue3 branch 3 times, most recently from 0b70b02 to 7cf7475 Compare July 9, 2024 12:49
ui/temboardui/plugins/pgconf/templates/configuration.html Outdated Show resolved Hide resolved
ui/temboardui/plugins/pgconf/templates/configuration.html Outdated Show resolved Hide resolved
ui/temboardui/static/src/views/Configuration.vue Outdated Show resolved Hide resolved
ui/temboardui/static/src/views/Configuration.vue Outdated Show resolved Hide resolved
ui/temboardui/static/src/views/Configuration.vue Outdated Show resolved Hide resolved
ui/temboardui/static/src/views/Configuration.vue Outdated Show resolved Hide resolved
ui/temboardui/static/src/views/Configuration.vue Outdated Show resolved Hide resolved
ui/temboardui/static/src/views/Configuration.vue Outdated Show resolved Hide resolved
ui/temboardui/static/src/views/Configuration.vue Outdated Show resolved Hide resolved
ui/temboardui/static/src/views/Configuration.vue Outdated Show resolved Hide resolved
@bersace
Copy link
Member

bersace commented Jul 10, 2024

Lorsque je met une valeurs hors limites, dans l'agent:

Traceback (most recent call last):
  File "/usr/local/src/temboard/agent/temboardagent/plugins/pgconf/functions.py", line 261, in post_settings
    raise HTTPError(
bottle.HTTPError: (406, 'autovacuum_analyze_scale_factor: Invalid setting.')

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "/usr/lib/python3/dist-packages/bottle.py", line 869, in _handle
    return route.call(**args)
  File "/usr/lib/python3/dist-packages/bottle.py", line 1749, in wrapper
    rv = callback(*a, **ka)
  File "/usr/local/src/temboard/agent/temboardagent/web/app.py", line 130, in wrapper
    res = callback(*a, **kw)
  File "/usr/local/src/temboard/agent/temboardagent/web/app.py", line 158, in wrapper
    return callback(*a, **kw)
  File "/usr/local/src/temboard/agent/temboardagent/web/app.py", line 111, in wrapper
    return callback(*a, **kw)
  File "/usr/local/src/temboard/agent/temboardagent/plugins/pgconf/__init__.py", line 38, in post_configuration
    return pgconf_functions.post_settings(
  File "/usr/local/src/temboard/agent/temboardagent/plugins/pgconf/functions.py", line 312, in post_settings
    raise HTTPError(e.code, e.message["error"])
AttributeError: 'HTTPError' object has no attribute 'code'
09:43:27 temboardagent[71] INFO:  app: POST /pgconf/configuration 500 Internal Server Error
172.18.0.1 - - [10/Jul/2024 09:43:27] "POST /pgconf/configuration HTTP/1.1" 500 2357

Ça finit comme ça dans l'UI:

image

Pas fou.

ui/temboardui/plugins/pgconf/templates/configuration.html Outdated Show resolved Hide resolved
ui/temboardui/static/src/views/Configuration.vue Outdated Show resolved Hide resolved
ui/temboardui/static/src/views/Configuration.vue Outdated Show resolved Hide resolved
ui/vite.config.js Outdated Show resolved Hide resolved
tests/test_30_pgconf.py Outdated Show resolved Hide resolved
tests/test_30_pgconf.py Outdated Show resolved Hide resolved
ui/temboardui/plugins/pgconf/__init__.py Outdated Show resolved Hide resolved
ui/temboardui/web/tornado.py Outdated Show resolved Hide resolved
@pirlgon pirlgon force-pushed the configuration_to_vue3 branch 4 times, most recently from 6dfba5e to 0f275f7 Compare July 15, 2024 09:41
We include js and css in Configuration.vue
and remove the old files.
Jquery is now imported from the npm package.
@pirlgon pirlgon marked this pull request as ready for review July 15, 2024 12:29
tests/fixtures/ui.py Outdated Show resolved Hide resolved
@bersace bersace self-requested a review July 16, 2024 08:27
tests/fixtures/ui.py Outdated Show resolved Hide resolved
@bersace bersace merged commit 10f077e into dalibo:master Jul 16, 2024
16 checks passed
@pirlgon pirlgon deleted the configuration_to_vue3 branch July 16, 2024 09:43
Comment on lines 12 to 15
current_cat="{{ current_cat }}"
error_message="{{ error_message }}"
error_code="{{ error_code }}"
query_filter="{{ query_filter if query_filter else '' }}"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Conventionaly, it's better to use kebab-case for props (in the template) to align with HTML attributes.

https://vuejs.org/guide/components/props.html#prop-name-casing


import Error from "../components/Error.vue";

const props = defineProps(["current_cat", "error_message", "error_code", "query_filter", "address", "port"]);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By convention, it's better to use camelCase for props names.

https://vuejs.org/guide/components/props.html#prop-name-casing

});
<script type="module" src="{{ vitejs.url_for('pgconf.js') }}"></script>
<script type="text/javascript">
var data = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

data is a very generic name prone to conflicts. What about configurationData?

<div class="col-3 mr-auto">
<form
method="get"
:action="'/server/' + address + '/' + port + '/pgconf/configuration'"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:action="`/server/${address}/${port}/pgconf/configuration`"

This notation could be use in a few other places.

content +=
`<tr><td>Minimum:</td><td><b>${row["min_val"]}</b></td></tr>` +
`<tr><td>Maximum:</td><td><b>${row["max_val"]}</b></td></tr>`;
let url = "";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For me, it would be easier to read with:

let url = `/proxy/${props.address}/${props.port}/pgconf/configuration`
...
if (queryFilter.value == "") {
  url += `/category/${quotePlus(currentCat.value)}`;
}

content += `<tr><td>Unit:</td><td><b>${row["unit"]}</b></td></tr>`;
function getCategories() {
$.ajax({
url: "/proxy/" + props.address + "/" + props.port + "/pgconf/configuration/categories",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The template string notation would probably fit here and in a few other locations.

},
error: function (xhr) {
modalLoading.value = false;
error.value.fromXHR(xhr);
},
});
}

function parsedEnumVals(enumString) {
let trimmed = enumString.replace(/^\{|\}$/g, "");
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants