Fix promql-query Vue component #516
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This component had some issues that prevented it to render properly. First, the unnecessary usage of 'this_ = this'. In a Vue component, 'this' always refers to the component itself. Second, the unreliable way to change the display CSS property by accessing 'this_.$el.style.display'. In Vue, we can do conditional rendering using the v-show directive. We have defined a new 'ready' variable that becomes 'true' when the component is ready to be rendered, and use v-show to toggle the visibility of the component based on the value of that variable. Third, the position of the '<slot></slot>' in the template. This slot is meant to allow the user to describe the result of the query. For instance, if the result of the query is the number of samples, a good content of that slot would be the string 'Samples:', in order to display (for instance) 'Samples: 238' on the screen. However, since the slot was located at the right-hand side of the query result, this would have been displayed instead: '238 Samples:'. Finally, we have simplified the logic of the 'fetch' call to remove duplicity and reduce the number of lines.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This component had some issues that prevented it to render properly.
First, the unnecessary usage of 'this_ = this'. In a Vue component, 'this' always refers to the component itself.
Second, the unreliable way to change the display CSS property by accessing 'this_.$el.style.display'. In Vue, we can do conditional rendering using the v-show directive. We have defined a new 'ready' variable that becomes 'true' when the component is ready to be rendered, and use v-show to toggle the visibility of the component based on the value of that variable.
Third, the position of the '' in the template. This slot is meant to allow the user to describe the result of the query. For instance, if the result of the query is the number of samples, a good content of that slot would be the string 'Samples:', in order to display (for instance) 'Samples: 238' on the screen. However, since the slot was located at the right-hand side of the query result, this would have been displayed instead: '238 Samples:'.
Finally, we have simplified the logic of the 'fetch' call to remove duplicity and reduce the number of lines.
Before:
After: