feat: added the host list view and filters

[rahulkeswani101]

Summary

Created a new page InfraMonitoring. Added host list tab and completed the initial view of showing filters and global time range.

Related Issues / PR's

https://github.com/SigNoz/engineering-pod/issues/1878

Screenshots

Screen.Recording.2024-10-22.at.1.05.55.PM.mov

Affected Areas and Manually Tested Areas

• Added the page and new item in the sidebar.
• verified the working of filters and orderby.

---

Important

Add infrastructure monitoring host list view with filters, including new API endpoints, hooks, components, and routes.

• Infrastructure Monitoring:
  • Adds InfrastructureMonitoring component and route.
  • New page InfraMonitoringHosts with HostsList and HostsListControls components.
  • Styles added in InfraMonitoring.styles.scss and InfrastructureMonitoring.styles.scss.
• API:
  • New API functions getHostLists and getInfraAttributesValues for fetching host data and attribute values.
  • Updates getAttributeKeys to support infrastructure monitoring.
• Hooks:
  • New hooks useGetHostList and useGetAggregateKeys for fetching host lists and aggregate keys.
  • Updates useFetchKeysAndValues to handle infrastructure monitoring.
• Constants:
  • Adds INFRAMONITORING_HOSTS_LIST_OPTIONS to localStorage.ts.
  • Adds GET_HOST_LIST to reactQueryKeys.ts.
  • Adds INFRASTRUCTURE_MONITORING_HOSTS to routes.ts and permission/index.ts.
• UI Components:
  • Updates GroupByFilter and QueryBuilderSearch to support infrastructure monitoring.
  • Adds menu item for Infrastructure Monitoring in menuItems.tsx.

^{This description was created by for dc3c19a. It will automatically update as commits are pushed.}

[github-actions]

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

[github-actions]

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

[ellipsis-dev]

👍 Looks good to me! Reviewed everything up to f8eeec6 in 40 seconds

More details

• Looked at 1063 lines of code in 29 files
• Skipped 0 files when reviewing.
• Skipped posting 6 drafted comments based on config settings.

1. frontend/src/pages/InfraMonitoringHosts/HostsList.tsx:10

• Draft comment:
  Missing semicolon at the end of the import statement for HostsListControls.
• Reason this comment was not posted:
  Confidence changes required: 10%
  The import statement for HostsListControls is missing a semicolon at the end. This is a minor style issue but should be corrected for consistency.

2. frontend/src/pages/InfraMonitoringHosts/HostsList.tsx:30

• Draft comment:
  Remove the console.log(options); statement to maintain clean code.
• Reason this comment was not posted:
  Confidence changes required: 10%
  The console.log statement is likely used for debugging purposes and should be removed before merging the code to maintain clean code practices.

3. frontend/src/pages/InfraMonitoringHosts/HostsListControls.tsx:27

• Draft comment:
  Remove the console.log('currentQuery', updatedCurrentQuery); statement to maintain clean code.
• Reason this comment was not posted:
  Confidence changes required: 10%
  The console.log statement is likely used for debugging and should be removed before merging to maintain clean code practices.

4. frontend/src/pages/InfraMonitoringHosts/utils.tsx:36

• Draft comment:
  The dataIndex values in getHostsListColumns should match the keys in the data source. Use hostName, cpu, memory, and disk instead of hostname, cpu_usage, memory_usage, and disk_usage.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable:
  The comment assumes that the dataIndex values do not match the data source keys, but there is no evidence in the provided code to support this claim. Without seeing the data source or additional context, it's speculative to assume the suggested changes are necessary. The comment does not provide strong evidence that a code change is required.
  The data source is not visible in the provided code, so it's possible that the current dataIndex values are correct. The comment might be based on an assumption rather than evidence.
  Without evidence from the data source, it's safer to assume the current dataIndex values are correct. The comment lacks strong evidence to support its claim.
  Delete the comment as it lacks strong evidence and is speculative about the need for changes to dataIndex values.

5. frontend/src/pages/InfraMonitoringHosts/HostsList.tsx:60

• Draft comment:
  Avoid using inline styles. Use external stylesheets or styled components instead.
• Reason this comment was not posted:
  Comment was on unchanged code.

6. frontend/src/pages/InfrastructureMonitoring/InfrastructureMonitoring.styles.scss:15

• Draft comment:
  Avoid using hardcoded color values. Use design tokens or predefined color constants instead.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable:
  The code uses CSS variables (e.g., var(--bg-slate-400)), which are typically used for design tokens or predefined constants. This suggests that the comment may not be applicable, as the code is already following best practices by not hardcoding color values directly.
  I might be misunderstanding the nature of the variables used. If these variables are not part of a design system, the comment could be valid. However, CSS variables are generally used for this purpose.
  Given the use of CSS variables, it's reasonable to assume they are part of a design system unless there's evidence to the contrary. The comment seems unnecessary.
  The comment should be deleted because the code already uses CSS variables, which are likely design tokens or predefined constants.

Workflow ID: wflow_m6k1zhwRpx3LczB7

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[github-actions]

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

[ellipsis-dev]

👍 Looks good to me! Incremental review on ae014d1 in 34 seconds

More details

• Looked at 351 lines of code in 11 files
• Skipped 0 files when reviewing.
• Skipped posting 7 drafted comments based on config settings.

1. frontend/src/api/infraMonitoring/getHostLists.ts:58

• Draft comment:
  Ensure that the backend API endpoint '/hosts/list' is correctly configured to handle this request. The change from '/hosts' to '/hosts/list' might break the API call if not updated in the backend.
• Reason this comment was not posted:
  Comment did not seem useful.

2. frontend/src/constants/localStorage.ts:24

• Draft comment:
  The removal of INFRAMONITORING_HOSTS_LIST_OPTIONS might affect functionality relying on this key. Ensure it's not used elsewhere in the codebase.
• Reason this comment was not posted:
  Comment did not seem useful.

3. frontend/src/container/HostMetricsLoading/HostMetricsLoading.tsx:14

• Draft comment:
  Consider using a constant or configuration for the loading GIF path to avoid issues if the file path changes.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The HostMetricsLoading component is well-structured, but the hardcoded path for the loading GIF might cause issues if the file path changes. Consider using a constant or configuration for the path.

4. frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx:101

• Draft comment:
  The addition of isInfraMonitoring parameter to useAutoComplete is consistent. Ensure this parameter is used correctly within the hook.
• Reason this comment was not posted:
  Confidence changes required: 30%
  The useAutoComplete hook now accepts an isInfraMonitoring parameter, which is correctly passed in the QueryBuilderSearch component. This change is consistent across the files where useAutoComplete is used.

5. frontend/src/pages/InfraMonitoringHosts/HostsListControls.tsx:28

• Draft comment:
  Remove console.log statements before deploying to production to avoid unnecessary logging.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The HostsList component uses useMemo for memoizing the query and columns, which is a good practice for performance optimization. However, the console.log statement should be removed before production deployment.

6. frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx:94

• Draft comment:
  Avoid using inline styles in React components. Use external stylesheets, CSS classes, or styled components instead. This is also applicable in other parts of the code where inline styles are used.
• Reason this comment was not posted:
  Comment was on unchanged code.

7. frontend/src/pages/InfrastructureMonitoring/InfrastructureMonitoring.styles.scss:8

• Draft comment:
  Use design tokens or predefined color constants instead of hardcoding color values to maintain consistency in design and theming. This is also applicable in other parts of the code where color values are hardcoded.
• Reason this comment was not posted:
  Comment was on unchanged code.

Workflow ID: wflow_VnNQTjsCZN7S0B0j

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[github-actions]

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

[ellipsis-dev]

❌ Changes requested. Incremental review on 08512b9 in 26 seconds

More details

• Looked at 249 lines of code in 3 files
• Skipped 0 files when reviewing.
• Skipped posting 3 drafted comments based on config settings.

1. frontend/src/pages/InfraMonitoringHosts/HostsList.tsx:56

• Draft comment:
  Consider using a more specific type for pagination instead of any to improve type safety.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The use of any for the pagination parameter in handleTableChange is not ideal. It's better to use a more specific type to improve type safety and code readability.

2. frontend/src/pages/InfraMonitoringHosts/utils.tsx:76

• Draft comment:
  Ensure hostName is always a valid string. If host.hostName can be empty, consider handling this case explicitly.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The hostName field in the HostRowData interface is marked as a string, but in the formatDataForTable function, it is being assigned an empty string if host.hostName is falsy. This could lead to inconsistencies if hostName is expected to always have a value.

3. frontend/src/pages/InfraMonitoringHosts/utils.tsx:24

• Draft comment:
  Ensure that the time conversion to milliseconds is consistent with the rest of the application. If the original times are already in milliseconds, this multiplication is unnecessary.
• Reason this comment was not posted:
  Confidence changes required: 33%
  The getHostListsQuery function multiplies the start and end times by 1e3, which converts them to milliseconds. This is correct if the original times are in seconds, but it's important to ensure this is consistent with the rest of the application.

Workflow ID: wflow_xrcUcGSRC66u5LLv

---

Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[srikanthccv]

• global time range missing
• adding filter do not send request to fetch updated data
• color coding missing?
• can we fit the time series chart? If not, we can think about alternative options such as showing min and max usage in the same horizontal bar.

[github-actions]

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

[ellipsis-dev]

❌ Changes requested. Incremental review on 3d57dde in 29 seconds

More details

• Looked at 91 lines of code in 2 files
• Skipped 0 files when reviewing.
• Skipped posting 1 drafted comments based on config settings.

1. frontend/src/pages/InfraMonitoringHosts/HostsListControls.tsx:39

• Draft comment:
  Avoid using inline styles. Use external stylesheets, CSS classes, or styled components instead.
• Reason this comment was not posted:
  Comment was on unchanged code.

Workflow ID: wflow_kvrpqLgZC8OJlOia

---

Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[github-actions]

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

[ellipsis-dev]

❌ Changes requested. Incremental review on 689440b in 41 seconds

More details

• Looked at 177 lines of code in 4 files
• Skipped 0 files when reviewing.
• Skipped posting 1 drafted comments based on config settings.

1. frontend/src/pages/InfraMonitoringHosts/utils.tsx:116

• Draft comment:
  Avoid using inline styles. Consider using external stylesheets or styled components for better maintainability. This is also applicable to line 104.
• Reason this comment was not posted:
  Marked as duplicate.

Workflow ID: wflow_vA3uynBkzrtGWieA

---

Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[github-actions]

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

[ellipsis-dev]

👍 Looks good to me! Incremental review on 403fe9d in 47 seconds

More details

• Looked at 186 lines of code in 3 files
• Skipped 0 files when reviewing.
• Skipped posting 3 drafted comments based on config settings.

1. frontend/src/pages/InfraMonitoringHosts/utils.tsx:63

• Draft comment:
  The dataIndex for 'IOWait' should be ioWait to match the HostRowData interface. This will ensure consistency and prevent potential bugs.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable:
  The comment points out a potential inconsistency between the dataIndex and the HostRowData interface. However, the formatDataForTable function maps host.wait to ioWait, which means the dataIndex should indeed be wait to match the data source. The comment is incorrect because the change aligns the dataIndex with the data source, not the interface.
  I might be missing the importance of aligning the dataIndex with the HostRowData interface instead of the data source. However, the function formatDataForTable clearly maps host.wait to ioWait, indicating the dataIndex should match the data source.
  The mapping in formatDataForTable is a strong indication that the dataIndex should be wait, as it reflects the data source structure. The comment is incorrect in suggesting a change to ioWait.
  The comment is incorrect because the dataIndex should match the data source, which is wait, not the HostRowData interface. The comment should be deleted.

2. frontend/src/pages/InfraMonitoringHosts/utils.tsx:89

• Draft comment:
  Avoid using inline styles in React components. Consider using external stylesheets, CSS classes, or styled components instead. This is also applicable at line 104.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable:
  The comment is relevant because it addresses a change made in the diff, specifically the use of inline styles in the formatDataForTable function. The suggestion to use external stylesheets or styled components is a common best practice in React development to improve maintainability and consistency. Therefore, the comment is actionable and clear, aligning with the rules for review comments.
  The comment might be considered too general, as it doesn't provide specific guidance on how to refactor the inline styles. However, the suggestion is a well-known best practice, and the comment is relevant to the changes made in the diff.
  While the comment could be more specific, it still provides a valid and actionable suggestion that aligns with best practices. The relevance to the changes made in the diff justifies keeping the comment.
  Keep the comment as it provides a relevant and actionable suggestion regarding the use of inline styles in the updated code.

3. frontend/src/pages/InfraMonitoringHosts/utils.tsx:104

• Draft comment:
  Avoid using inline styles in React components. Consider using external stylesheets, CSS classes, or styled components instead. This is also applicable at line 89.
• Reason this comment was not posted:
  Marked as duplicate.

Workflow ID: wflow_4ui1KK6MDreGH8h1

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[github-actions]

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

[ellipsis-dev]

👍 Looks good to me! Incremental review on 6648e84 in 36 seconds

More details

• Looked at 92 lines of code in 4 files
• Skipped 0 files when reviewing.
• Skipped posting 4 drafted comments based on config settings.

1. frontend/src/pages/InfraMonitoringHosts/HostsList.tsx:101

• Draft comment:
  The dependency array for useCallback should include setFilters to ensure the callback updates when setFilters changes.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable:
  The comment is directly related to the change made in the diff, which is the removal of setFilters from the dependency array. The comment suggests that this change might be incorrect because it could lead to issues if setFilters changes. This is a valid concern because useCallback should include dependencies that are used within the callback to ensure it updates correctly.
  The comment might be unnecessary if setFilters is guaranteed not to change, or if the function is intended to be static. However, without more context, it's safer to assume the comment is valid.
  Given that setFilters is a state setter function from useState, it is unlikely to change, but the comment is still valid as a precautionary measure.
  Keep the comment as it addresses a potential issue with the dependency array of useCallback.

2. frontend/src/pages/InfraMonitoringHosts/HostsListControls.tsx:44

• Draft comment:
  The dependency array for useCallback should include handleChangeQueryData and handleFiltersChange to ensure the callback updates when these dependencies change.
• Reason this comment was not posted:
  Comment looked like it was already resolved.

3. frontend/src/pages/InfraMonitoringHosts/utils.tsx:89

• Draft comment:
  Avoid using inline styles. Use CSS classes or styled components instead. This applies to other similar instances in this file.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable:
  The comment is relevant because it addresses a change made in the diff, where inline styles were replaced with CSS classes. This aligns with best practices for styling in React components. The comment is not redundant or speculative, and it provides a clear suggestion that has been implemented in the code changes.
  The comment might be considered unnecessary since the change has already been made, and the code now follows the suggested practice. However, it reinforces the importance of the change and aligns with best practices.
  While the change has been made, the comment serves as a useful reminder of best practices and validates the change. It is relevant to the diff and provides context for why the change was necessary.
  The comment is relevant and should be kept as it addresses a change made in the diff and reinforces best practices for styling in React components.

4. frontend/src/pages/InfraMonitoringHosts/utils.tsx:104

• Draft comment:
  Avoid using inline styles. Use CSS classes or styled components instead. This applies to other similar instances in this file.
• Reason this comment was not posted:
  Marked as duplicate.

Workflow ID: wflow_XJ4whbNq2PhlLk7X

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[rahulkeswani101]

@YounixM For the logs and traces tab, I handled the changes, such as removing commented and unused code, in this PR(#6359). Also, I have verified the light mode view and have made the necessary changes in the same PR.

[vikrantgupta25]

please check the comments

[github-actions]

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

[ellipsis-dev]

❌ Changes requested. Incremental review on 318f0ae in 50 seconds

More details

• Looked at 181 lines of code in 6 files
• Skipped 0 files when reviewing.
• Skipped posting 3 drafted comments based on config settings.

1. frontend/src/components/HostMetricsDetail/Processes.tsx:5

• Draft comment:
  The import statement for ./Containers.styles.scss seems incorrect. It should likely be ./Processes.styles.scss to match the component name.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable:
  The comment is not about a change made in the diff, as the import statement was not altered. The comment is speculative and not based on a change in the code. The file name does not dictate the style file name, and there is no evidence that the import is incorrect.
  I might be missing the context of the project structure, which could imply a naming convention. However, without evidence of a change or error, the comment seems speculative.
  Even if there is a naming convention, the comment does not relate to a change in the diff, and there is no evidence of an error in the import statement.
  The comment should be deleted because it is not about a change made in the diff and is speculative without evidence of an error.

2. frontend/src/components/HostMetricsDetail/Containers.tsx:5

• Draft comment:
  The import statement for ./Containers.styles.scss seems incorrect. It should likely be ./Containers.styles.scss to match the component name.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable:
  The comment seems to be incorrect because the import statement './Containers.styles.scss' is consistent with the file naming convention and there is no evidence in the diff that suggests it is incorrect. The comment does not provide any actionable advice or evidence of an issue.
  I might be missing some context about the project's file structure or naming conventions that could make the comment valid. However, based on the information provided, the comment does not seem to be justified.
  Given the information available, the import statement appears correct, and the comment does not provide sufficient evidence to suggest otherwise. Without additional context, the comment should be considered incorrect.
  The comment should be deleted as it does not provide strong evidence of an issue with the import statement.

3. frontend/src/components/HostMetricsDetail/HostMetricTraces/constants.ts:7

• Draft comment:
  Ensure that nanoToMilli is correctly imported from utils/timeUtils. If this function does not exist, it will cause a runtime error.
• Reason this comment was not posted:
  Comment did not seem useful.

Workflow ID: wflow_w2lnq77BJ2ka0JoL

---

Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[github-actions]

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

[ellipsis-dev]

👍 Looks good to me! Incremental review on e94de69 in 43 seconds

More details

• Looked at 176 lines of code in 6 files
• Skipped 0 files when reviewing.
• Skipped posting 4 drafted comments based on config settings.

1. frontend/src/api/infra/getHostAttributeKeys.ts:18

• Draft comment:
  Ensure that ApiBaseInstance is the correct instance to use here. In getAggregateKeys, ApiV3Instance is used, which might indicate a need for consistency or a specific reason for the difference.
• Reason this comment was not posted:
  Comment did not seem useful.

2. frontend/src/api/queryBuilder/getAttributeKeys.ts:20

• Draft comment:
  Ensure that the removal of isInfraMonitoring parameter does not affect the functionality. This parameter was used to determine the endpoint and API instance, which might be necessary for infrastructure monitoring.
• Reason this comment was not posted:
  Comment did not seem useful.

3. frontend/src/hooks/queryBuilder/useGetAggregateKeys.ts:39

• Draft comment:
  Ensure that the logic for using isInfraMonitoring to decide between getHostAttributeKeys and getAggregateKeys is correctly implemented and that isInfraMonitoring is passed correctly from all calling components.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The useGetAggregateKeys hook uses the isInfraMonitoring parameter to decide which API function to call. This logic is crucial for ensuring that the correct data is fetched based on the context. It's important to verify that this logic is correctly implemented and that the isInfraMonitoring parameter is passed correctly from all calling components.

4. frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.tsx:85

• Draft comment:
  Avoid using inline styles in React components. Use external stylesheets, CSS classes, or styled components instead. This is also applicable on line 181.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable:
  The comment seems to be incorrect because 'selectStyle' is not an inline style but an imported style object. The comment does not relate to any changes made in the diff, as the diff only shows the removal of 'isInfraMonitoring' from the component's props and related code.
  I might be missing the context of how 'selectStyle' is defined, but based on the import statement, it is not an inline style. The comment does not address any changes made in the diff.
  Even if 'selectStyle' were defined as an inline style in another file, the comment would still not be relevant to the changes made in this diff.
  The comment should be deleted because it does not pertain to any changes made in the diff and incorrectly identifies 'selectStyle' as an inline style.

Workflow ID: wflow_LsnZbCosv2CncddD

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[github-actions]

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

[ellipsis-dev]

❌ Changes requested. Incremental review on dc3c19a in 37 seconds

More details

• Looked at 67 lines of code in 2 files
• Skipped 0 files when reviewing.
• Skipped posting 1 drafted comments based on config settings.

1. frontend/src/container/InfraMonitoringHosts/index.tsx:34

• Draft comment:
  The setLastUsedQuery(0); in the return function of useEffect is redundant since it's already being set on unmount. Consider removing it for clarity.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The useEffect in InfraMonitoringHosts is setting the last used query to 0 on unmount, which is redundant since it's already being set to 0 in the return function. This can be removed for clarity.

Workflow ID: wflow_IyU6qAKZB1cm4igO

---

Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[ellipsis-dev]

Avoid using the component/index.tsx file structure approach, as it makes it difficult to debug and find components using global search tools like VS Code.