feat: swap to absolute paths for css #1224
Conversation
|
Caution Review failedThe pull request is closed. WalkthroughThis pull request updates the CSS import paths in various Vue components and pages from a relative path to an absolute path using the tilde alias ( Changes
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (22)
web/components/DowngradeOs.ce.vue (1)
77-77: Absolute Import Path Update: Validate Alias SetupThe change from a relative path to an absolute path using
~/assets/main.csshelps standardize CSS imports across components. Please confirm that the bundler's alias configuration (in your Nuxt/Vite setup) properly resolves the tilde (~) so that this change does not lead to path resolution issues during build time.web/components/Registration.ce.vue (1)
327-327: CSS Import Path Update:
Changing the CSS import from a relative path to an absolute one ('~/assets/main.css') is a good move for consistency and potentially faster resolution during builds. Please confirm that the build configuration (e.g., Nuxt/Vite aliases) supports the~alias across all environments.web/components/UpdateOs/Update.vue (1)
268-271: Switch to Absolute CSS Import PathChanging from a relative CSS import to using the
~alias improves maintainability and aligns with the overall effort to standardize resource paths. Please confirm that your bundler (e.g., Nuxt, Vite) is configured to resolve the~alias properly, so that the path~/assets/main.csscorrectly maps to your assets folder.web/components/WelcomeModal.ce.vue (1)
116-116: Absolute CSS Import Path UpdatedSwitching the CSS import from a relative path to an absolute path helps standardize style references across components, improving consistency and maintainability. Please verify that your build configuration (e.g., Vite or Nuxt alias settings) correctly interprets the
~alias.api/src/unraid-api/graph/resolvers/logs/logs.resolver.spec.ts (1)
26-29: Additional tests needed beyond basic definition checkThe test file only includes a basic test to verify that the resolver is defined.
Consider adding specific tests for each resolver method to ensure comprehensive test coverage. For example:
it('should return log files', async () => { const mockLogFiles = [{ name: 'test.log', path: '/var/log/test.log', size: 1024 }]; jest.spyOn(service, 'getLogFiles').mockResolvedValue(mockLogFiles); const result = await resolver.logFiles(); expect(result).toEqual(mockLogFiles); }); it('should return log content', async () => { const mockContent = 'test log content'; jest.spyOn(service, 'getLogContent').mockResolvedValue(mockContent); const result = await resolver.logContent('test.log', 100); expect(result).toEqual(mockContent); });web/components/Logs/LogViewer.ce.vue (4)
37-42: Consider adding error handling and loading states for the GraphQL queryWhile the component does display error messages in the UI, it might benefit from more robust error handling.
Consider adding error handling with retry logic for the GraphQL query:
-const { result: logFilesResult, loading: loadingLogFiles, error: logFilesError } = useQuery(GET_LOG_FILES); +const { result: logFilesResult, loading: loadingLogFiles, error: logFilesError, refetch } = useQuery(GET_LOG_FILES, { + notifyOnNetworkStatusChange: true, +}); + +// Add retry function +const retryFetch = () => { + return refetch(); +};Then add a retry button in the error state UI section:
<div v-else-if="logFilesError" class="flex items-center justify-center h-full p-4 text-center text-destructive"> - Error loading log files: {{ logFilesError.message }} + <div class="flex flex-col items-center"> + <p>Error loading log files: {{ logFilesError.message }}</p> + <button @click="retryFetch" class="mt-2 px-4 py-2 bg-primary text-primary-foreground rounded">Retry</button> + </div> </div>
45-53: File size formatter has limited rangeThe
formatFileSizefunction only supports up to GB, which may not be sufficient for very large log files.Consider extending the file size formatter to support TB:
-const sizes = ['Bytes', 'KB', 'MB', 'GB']; +const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
55-80: Good language detection implementation, but consider making it more maintainableThe
autoDetectLanguagefunction has a lot of hardcoded file extensions and patterns. This could become harder to maintain as new log types are added.Consider refactoring to use a more maintainable mapping object:
const fileExtensionToLanguage = { '.sh': 'bash', '.bash': 'bash', '.conf': 'ini', '.ini': 'ini', '.cfg': 'ini', '.xml': 'xml', '.html': 'xml', '.json': 'json', '.yml': 'yaml', '.yaml': 'yaml', '.js': 'javascript', '.php': 'php' }; const filePatternToLanguage = [ { pattern: 'syslog', language: 'bash' }, { pattern: 'nginx', language: 'nginx' }, { pattern: 'apache', language: 'apache' }, { pattern: 'httpd', language: 'apache' } ]; const autoDetectLanguage = (filePath: string): string => { const fileName = filePath.split('/').pop() || ''; // Check extensions const extension = fileName.substring(fileName.lastIndexOf('.')); if (extension in fileExtensionToLanguage) { return fileExtensionToLanguage[extension]; } // Check patterns for (const { pattern, language } of filePatternToLanguage) { if (fileName.includes(pattern)) { return language; } } return 'plaintext'; };
113-119: Add validation for lineCount inputWhile there are min/max attributes on the input, there's no validation to ensure the value stays within these bounds when changed programmatically.
Consider adding a watcher to enforce the min/max constraints:
// Add this after the existing watch watch(lineCount, (newValue) => { if (newValue < 10) lineCount.value = 10; if (newValue > 1000) lineCount.value = 1000; });web/components/Logs/SingleLogViewer.vue (4)
99-110: Consider optimizing MutationObserver usage.Observing child list changes can be expensive for large or frequently changing content. If possible, consider using application-level events or selective watchers to mitigate performance overhead.
188-254: Optimize highlightLog for large data.Highlighting each line is CPU-intensive for large logs. You might consider chunk-based rendering or throttling the process if log sizes become too large, to prevent UI blocking.
294-340: Use a more robust error handling strategy instead of alert().Relying on alert dialogs may disrupt the user experience. Consider a notification or toast component for better control and styling, or integrate with a global error reporting service.
398-411: Improve infinite scrolling user feedback.Showing multiple indicators for initial loading and ongoing scroll-based fetching can create confusion. Consider consolidating the loader or clarifying the difference between an initial load and loading more chunks.
web/composables/gql/graphql.ts (3)
1107-1107: Add clarity to thelogFilesquery.
Returning an array ofLogFileis appropriate. Document if this list is filtered or if it includes all files in the log directory.
1799-1803: Promote type-safety with strongly typed variables.
LogFilesQueryVariablesis defined but empty. If future expansions occur, consider specifying the variables to avoid silent usage complexities.
1804-1808: Leverage default values in the query schema.
TheLogFileContentQueryVariablescould incorporate default values forlinesin the schema, ensuring consistent usage across clients.api/src/unraid-api/graph/resolvers/logs/logs.service.ts (6)
38-40: Validate the path retrieval fallback.
Ifgetters.paths()['unraid-log-base']is undefined or empty, the service might read from an invalid path. Consider defaulting to a known safe directory.
42-69: Perform service-based error handling.
listLogFilesreturns[]if an error occurs. This is acceptable, though consider distinguishing between an empty directory vs. an actual error scenario to inform callers.
137-219: Centralize file-truncation logic.
startWatchingLogFileuses a distinct approach to handle truncation. Optional: factor out the truncation reset logic into a helper method to ensure consistent handling if you watch multiple files.
245-270: Ensure large file performance testing.
countFileLinescan be costly for massive logs. Investigate partial reads or indexing if dealing with very large files.
272-306: Be mindful of line-based concurrency.
readLastLinesdoes line-by-line iteration. If logs are extremely large, consider chunk-based approaches or established libraries to read from the bottom of a file more efficiently.
308-354: Efficient range-based partial reading.
readLinesFromPositionis well-structured but can also become slow for large jumps. Similar chunk-based reading strategies may help if many lines must be skipped.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro (Legacy)
⛔ Files ignored due to path filters (3)
api/src/graphql/generated/api/operations.tsis excluded by!**/generated/**api/src/graphql/generated/api/types.tsis excluded by!**/generated/**pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (42)
api/package.json(4 hunks)api/src/__test__/store/modules/paths.test.ts(1 hunks)api/src/core/pubsub.ts(1 hunks)api/src/graphql/schema/types/logs/logs.graphql(1 hunks)api/src/store/modules/paths.ts(1 hunks)api/src/unraid-api/auth/user.decorator.ts(1 hunks)api/src/unraid-api/graph/resolvers/logs/logs.module.ts(1 hunks)api/src/unraid-api/graph/resolvers/logs/logs.resolver.spec.ts(1 hunks)api/src/unraid-api/graph/resolvers/logs/logs.resolver.ts(1 hunks)api/src/unraid-api/graph/resolvers/logs/logs.service.ts(1 hunks)api/src/unraid-api/graph/resolvers/resolvers.module.ts(2 hunks)api/src/unraid-api/main.ts(1 hunks)plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/LogViewer.page(1 hunks)web/components/Auth.ce.vue(1 hunks)web/components/CallbackHandler.ce.vue(1 hunks)web/components/ColorSwitcher.ce.vue(1 hunks)web/components/DevSettings.vue(1 hunks)web/components/DowngradeOs.ce.vue(1 hunks)web/components/DownloadApiLogs.ce.vue(1 hunks)web/components/DummyServerSwitcher.vue(1 hunks)web/components/Logs/LogViewer.ce.vue(1 hunks)web/components/Logs/SingleLogViewer.vue(1 hunks)web/components/Logs/log.query.ts(1 hunks)web/components/Logs/log.subscription.ts(1 hunks)web/components/Modals.ce.vue(1 hunks)web/components/Registration.ce.vue(1 hunks)web/components/SsoButton.ce.vue(1 hunks)web/components/UpdateOs.ce.vue(1 hunks)web/components/UpdateOs/Downgrade.vue(1 hunks)web/components/UpdateOs/Update.vue(1 hunks)web/components/UpdateOs/UpdateIneligible.vue(1 hunks)web/components/UserProfile.ce.vue(1 hunks)web/components/UserProfile/CallbackFeedback.vue(1 hunks)web/components/UserProfile/DropdownLaunchpad.vue(1 hunks)web/components/UserProfile/Promo.vue(1 hunks)web/components/WanIpCheck.ce.vue(1 hunks)web/components/WelcomeModal.ce.vue(1 hunks)web/composables/gql/gql.ts(3 hunks)web/composables/gql/graphql.ts(9 hunks)web/nuxt.config.ts(3 hunks)web/package.json(2 hunks)web/pages/index.vue(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: Build Web App
- GitHub Check: Test API
- GitHub Check: Build API
- GitHub Check: Cloudflare Pages
🔇 Additional comments (61)
web/components/DummyServerSwitcher.vue (1)
35-35: Good Update to Absolute CSS Import PathThe update to
@import '~/assets/main.css';standardizes the import path, which helps ensure consistent resolution across environments and may contribute to faster build times. Verify that the build configuration (e.g., Nuxt/Vite) correctly resolves the~alias.web/components/Modals.ce.vue (1)
34-34: Absolute CSS Import ImprovementThe update from a relative path to an absolute path for the CSS import enhances consistency across the project and should help avoid potential path resolution issues in complex build environments. Please verify that the tilde (
~) syntax is properly configured in your bundler (e.g., Nuxt/Vite) to resolve assets correctly.web/components/DevSettings.vue (1)
28-28: Absolute CSS Import Path Update Looks Good.
Changing the CSS import from a relative path to an absolute path (@import '~/assets/main.css';) standardizes style resolution across components. Please ensure that your build configuration (e.g., Vite/Nuxt settings) supports the tilde alias for resolving paths.web/components/UserProfile/DropdownLaunchpad.vue (1)
60-63: Absolute CSS Import Path UpdatedThe CSS import on line 62 now uses an absolute path via the tilde (
@import '~/assets/main.css';), which aligns with the project's standardization efforts. This change promotes consistency across components and can aid in resolving assets more reliably during the build process. Ensure that your build configuration (e.g., Nuxt/Vite) is properly set up to interpret the tilde notation.web/components/SsoButton.ce.vue (1)
155-155: Adopt Absolute CSS Import for ConsistencyChanging the CSS import path to an absolute reference with
~enhances clarity and maintainability by ensuring that the build system consistently resolves asset locations. Please verify your build configuration (e.g., Nuxt/Vite) correctly handles the~alias so that styles are applied as expected across different environments.web/components/UserProfile/Promo.vue (1)
157-159: Switching to Absolute CSS Import PathsThe change from a relative to an absolute import (
@import '~/assets/main.css';) is clear and consistent with the broader project effort to standardize asset paths. Just ensure that the build configuration (e.g., Nuxt/Vite alias settings) properly resolves the~alias.web/components/UpdateOs.ce.vue (1)
75-75: Absolute CSS Import Path UpdateThe update to use an absolute CSS import path (
@import '~/assets/main.css';) instead of a relative one improves consistency and aligns with the project’s overall update for clearer asset resolution. Ensure that the build configuration (e.g., Nuxt/Vite) properly supports the tilde alias.web/components/UpdateOs/UpdateIneligible.vue (1)
127-127: Alias CSS Import Update.
The CSS import now uses the alias syntax (@import '~/assets/main.css';), aligning with the project's recent changes to standardize asset resolution. Please ensure that your bundler configuration (e.g., Vite or Nuxt) resolves the alias~correctly to avoid any import issues during the build.web/components/CallbackHandler.ce.vue (1)
15-19: Standardize CSS Import Path:
The CSS import in the<style>section has been updated from a relative path to an absolute path (~/assets/main.css), which improves consistency in style resolution across components.web/components/WanIpCheck.ce.vue (1)
80-84: Consistent CSS Import Update:
Changing the CSS import to an absolute path (~/assets/main.css) standardizes resource resolution, aligning with recent updates in other components.web/components/UpdateOs/Downgrade.vue (1)
134-138: Absolute CSS Import for Uniform Styling:
The update of the CSS import path to~/assets/main.cssstreamlines style management and reinforces the project-wide convention.web/components/ColorSwitcher.ce.vue (1)
78-82: Adopt Absolute CSS Import:
The modification to use an absolute path for the CSS import enhances maintainability and ensures consistent styling across the application.web/package.json (2)
15-17: Enhanced Build Script for Faster Builds:
The build script now includesNODE_OPTIONS='--max-old-space-size=4096'andVITE_ALLOW_CONSOLE_LOGS=false, which should help the build process by increasing available memory and reducing excessive logging. This aligns well with the PR objective of faster web builds.
95-95: New Dependency Added – Highlight.js:
The addition of"highlight.js": "^11.11.1"provides syntax highlighting functionality. Please verify that this version meets the project’s compatibility and security standards.api/src/store/modules/paths.ts (1)
63-63: LGTM: New log path added correctlyThis addition follows the existing pattern and adds a path entry for Unraid log files.
api/src/__test__/store/modules/paths.test.ts (1)
28-28: LGTM: Test updated to match implementationThe test snapshot has been correctly updated to include the new "unraid-log-base" path.
api/src/core/pubsub.ts (1)
21-21: LGTM: New pub/sub channel added for log filesThis new pub/sub channel is appropriately named and will facilitate real-time log file updates.
web/components/Logs/log.subscription.ts (1)
1-11: LGTM: New GraphQL subscription for log filesThis subscription is well-structured with the necessary fields (path, content, totalLines) for tracking log file changes.
web/components/UserProfile/CallbackFeedback.vue (1)
427-431: CSS Import Path Update
The CSS import has been updated to use the alias~/assets/main.cssinstead of a relative path. This change improves consistency and maintainability across the project.web/components/Auth.ce.vue (1)
32-36: Standardize CSS Import Using Alias
The style block now imports the global CSS via~/assets/main.cssrather than a relative path. This update aligns with project-wide conventions and ensures easier resolution in the build pipeline.web/components/DownloadApiLogs.ce.vue (1)
73-77: Consistent Absolute CSS Import
The CSS import in the style section has been modified to~/assets/main.cssto match the new alias-based standard. This minor change increases clarity without affecting functionality.web/components/UserProfile.ce.vue (1)
169-173: Adopt Absolute CSS Import for Uniformity
The change in the style block updates the import of the main CSS from a relative path to~/assets/main.css. This ensures consistency with other components and simplifies asset resolution.api/src/unraid-api/main.ts (1)
3-3: FastifyAdapter Import Update
The FastifyAdapter import has been modified to use@nestjs/platform-fastify/index.js, in line with the upgrade to version ^11.0.11 of the package. This change should align with the new module structure. Please verify that the new import path works correctly in all deployment environments.api/src/unraid-api/graph/resolvers/logs/logs.module.ts (1)
1-10: Implementation follows NestJS module pattern correctlyThe module declaration properly defines the providers and exports for the logs functionality. The code follows standard NestJS module organization.
api/src/unraid-api/auth/user.decorator.ts (1)
7-7: Type safety improvementReplacing
anywithUserAccountas the return type parameter improves type safety and provides better documentation of the expected return value.plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/LogViewer.page (2)
1-4: Appropriate menu configurationThe menu configuration properly places the Log Viewer in the ManagementAccess section with appropriate title and icon.
17-19: Component implementation looks goodUsing the i18n host wrapper ensures proper internationalization support for the log viewer component.
web/components/Logs/log.query.ts (2)
3-12: Well-structured log files queryThe query correctly retrieves essential metadata fields for log files.
14-23: Well-designed log content query with pagination supportThe query properly implements parameters for pagination control (lines and startLine) which will be important for efficient loading of large log files.
api/src/unraid-api/graph/resolvers/resolvers.module.ts (2)
13-14: Clean addition of new logs feature importsThe LogsResolver and LogsService imports are properly added to the existing imports section, maintaining alphabetical ordering.
46-47: Provider registration looks goodThe LogsResolver and LogsService are properly registered as providers in the module.
web/pages/index.vue (3)
11-11: Clean import for new LogViewerCe componentThe import statement for the new component is properly added.
187-191: Log Viewer component integration looks goodThe LogViewerCe component is properly integrated into the page structure, following the existing pattern of component sections with headers.
201-201:✅ Verification successful
CSS import path changed from relative to absolute
The import path was changed from a relative path (
../assets/main.css) to an absolute path (~/assets/main.css).Verify this change is consistent with other CSS imports in the project:
🏁 Script executed:
#!/bin/bash # Check for relative vs. absolute CSS import patterns in the project echo "Looking for CSS import patterns in Vue files..." grep -r "@import '.*assets/main.css" --include="*.vue" web/Length of output: 1588
CSS Import Path is Consistent Across the Project
The change from a relative path (
../assets/main.css) to an absolute path (~/assets/main.css) inweb/pages/index.vueis consistent with the import statements found throughout the project (see output from files likeweb/components/Auth.ce.vue,web/components/CallbackHandler.ce.vue, etc.). There are no discrepancies, and the absolute path usage appears to be a uniform convention.web/components/Logs/LogViewer.ce.vue (3)
1-16: Well-structured component setup with proper importsThe component correctly imports necessary dependencies and uses the Composition API with TypeScript.
17-22: Component state management is appropriately definedThe reactive state variables are properly defined with appropriate types.
175-179: CSS import pattern matches the change in index.vueThe CSS import paths use the absolute path pattern (
~/assets/main.css), consistent with the change in index.vue.web/components/Logs/SingleLogViewer.vue (1)
125-132: Watch out for the potential performance overhead with continuous string concatenation.Repeated string concatenation in a loop can be expensive and may degrade performance if logs get very large. Consider appending new content as separate chunks or using a more memory-efficient approach.
api/src/unraid-api/graph/resolvers/logs/logs.resolver.ts (1)
37-65: Resource cleanup ensures no memory leaks.Overriding the async iterator’s return method and stopping file watching is a solid approach. This helps prevent orphaned watchers and subscription leaks.
web/nuxt.config.ts (3)
62-107: Thoroughly test your new build configuration.Increasing the chunk size limit, using terser-based minification, and disabling console logs can significantly impact debugging and bundle composition. Validate these changes to ensure you don’t introduce unexpected regressions or hinder maintainability.
127-161: Double-check manual chunking for custom elements.Applying a similar chunking approach to custom elements is great. Be sure to confirm that all shared dependencies are chunked correctly to avoid duplication across element bundles.
227-234: Validate experimental build caching features.Features like
treeshakeClientOnlyandasyncEntrycan introduce subtle quirks. Confirm that your application’s behavior and performance remain stable across multiple builds and environments.web/composables/gql/graphql.ts (6)
600-611: Define a clear naming convention for log-related types.
The newLogFiletype is straightforward and well-scoped. Ensure future log-related types maintain consistent naming (e.g., prefixing withLogor similar) to avoid confusion with other file-management types in the schema.
613-624: Consider clarifying optional vs. required fields.
startLinewithinLogFileContentis marked optional, whilecontentandpathare required. This is logical, but ensure all client queries gracefully handle cases wherestartLineis null.
1099-1105: Confirm user permission checks for log file accesses.
ThelogFilefield can expose sensitive server data. Verify that role/permission checks are in place server-side before returning the content.Would you like a shell script to search for any existing permission checks around the
logFileresolver?
1159-1162: Validate query arguments for out-of-bound requests.
Ensure negative or excessively largelinesandstartLineare adequately validated on the server side to prevent spurious reads or performance issues.
1813-1819: Enforce active subscription checks.
LogFileSubscriptionSubscriptionis powerful for real-time logs. Ensure unsubscribing or client disconnect events are effectively handled.
1946-1948: Validate the correctness of generate documents.
The newly generated documents (LogFilesDocument,LogFileContentDocument,LogFileSubscriptionDocument) appear accurate. Confirm that older references to logs won't clash with these new operations.api/package.json (1)
54-54: Check for breaking changes in upgraded major dependencies.
Updated packages (@fastify/cookie, NestJS core libraries,fastify,nest-authz,@nestjs/testing, and newly added@jsonforms/core) may introduce API or behavioral differences. Confirm that existing routes, middleware, and testing flows continue functioning properly.Also applies to: 61-65, 67-67, 93-93, 113-113, 149-149
api/src/unraid-api/graph/resolvers/logs/logs.service.ts (5)
1-11: Adopt consistent import groupings.
Imports from the Node standard library, third-party modules, and local modules are handled well. There are no immediate issues, but consistent grouping can aid readability.
12-24: Confirm naming coherence for interfaces.
LogFileandLogFileContentare cohesive. Ensure these mirror the GraphQL schema accurately and avoid type mismatches.
26-35: Class-level structure looks good.
Service-level dependencies are minimal, which keeps it flexible. Good job setting up a privateloggerfor debugging.
113-135: Increment subscription count carefully.
getLogFileSubscriptionChannelincrements an existing subscription. Ensure that concurrent accesses are synchronized if multiple subscriptions come in parallel.
221-243: Favor typed unsubscribing patterns.
stopWatchingLogFileis straightforward. Just confirm upstream resolvers remove the subscription calls at the correct time to avoid watchers persisting.api/src/graphql/schema/types/logs/logs.graphql (4)
1-14: Well-designed query definitions for log file operationsThe Query type is well-structured with clear documentation for each operation. The
logFilesquery provides a way to list available log files, while thelogFilequery allows retrieving specific log content with pagination support through the optionallinesandstartLineparameters.
16-22: Good implementation of subscription for real-time log monitoringThe Subscription type correctly defines a way to subscribe to changes in a specific log file, which is essential for real-time log monitoring functionality. This is a good pattern for keeping the UI updated with the latest log data.
24-47: Well-structured LogFile type with comprehensive metadataThe LogFile type includes all necessary metadata fields (name, path, size, modifiedAt) with appropriate types and thorough documentation. This provides a complete view of log file properties for the frontend.
49-72: Properly defined LogFileContent type with pagination supportThe LogFileContent type correctly captures all necessary information about log file content, including the total number of lines and optional starting line for pagination. The inclusion of these fields will help with implementing a robust log viewer UI.
web/composables/gql/gql.ts (3)
17-19: Properly added log-related GraphQL operations to Documents typeThe three new operations for log files are correctly added to the Documents type, following the existing pattern in the file. These operations match the GraphQL schema definitions and provide all necessary fields.
41-43: Correctly implemented log-related operations in documents constantThe log-related GraphQL operations are properly added to the documents constant, referencing the correct types from the generated GraphQL types.
79-90: Well-implemented graphql function overloads for log operationsThe three new overloads of the graphql function provide proper type safety for the log-related operations. These follow the same pattern as other operations in the file and will ensure correct typing when used in the application.
elibosley
force-pushed
the
feat/fast-web-build
branch
from
482f9c7 to
f1834b3
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
web/nuxt.config.ts (1)
213-219: Beneficial experimental features enabledThe enabled experimental features will improve build performance and caching. Just be aware that these are experimental Nuxt features which may change in future releases. Consider documenting these choices for future maintainers.
Consider adding a brief comment explaining why these specific experimental features were selected to help future maintainers understand the reasoning behind these choices.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro (Legacy)
⛔ Files ignored due to path filters (3)
api/src/graphql/generated/api/operations.tsis excluded by!**/generated/**api/src/graphql/generated/api/types.tsis excluded by!**/generated/**pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (6)
api/src/unraid-api/graph/resolvers/resolvers.module.ts(2 hunks)web/composables/gql/gql.ts(3 hunks)web/composables/gql/graphql.ts(10 hunks)web/nuxt.config.ts(3 hunks)web/package.json(2 hunks)web/pages/index.vue(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- web/package.json
- web/pages/index.vue
- api/src/unraid-api/graph/resolvers/resolvers.module.ts
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Build Web App
- GitHub Check: Cloudflare Pages
🔇 Additional comments (16)
web/nuxt.config.ts (4)
52-87: Excellent build optimization configurationThis is a well-structured Vite build configuration that implements several performance optimizations:
- The increased chunk size warning limit reduces noise in build output
- Parallel builds with Terser will significantly improve build times
- The conditional console log removal is a good practice for production builds
- The manual chunking strategy is simple but effective for improved loading times
Your approach to variable name reservation with the
terserReservationsfunction is particularly thoughtful to avoid conflicts.
89-97: Good dependency optimization strategyExplicitly including core dependencies and disabling dependency discovery in production will improve build performance. The selected dependencies (Vue, Pinia, VueUse) are excellent candidates for optimization as they're unlikely to change frequently during development.
113-146: Well-aligned custom elements build configurationThe custom elements build configuration properly mirrors the main build settings, ensuring consistent optimization. Disabling HMR for production builds is a good performance decision.
203-206: New LogViewer component looks goodThe new UnraidLogViewer component is properly integrated with the existing custom elements pattern, making the new log viewing functionality available as a web component.
web/composables/gql/gql.ts (5)
19-21: Looks good: new queries for retrieving log files.
These newly added operations appear consistent with your existing patterns for GraphQL document mapping. No immediate concerns.
45-47: Consistent addition to the document map.
The mirrored entries in thedocumentsobject ensure queries and subscriptions are properly exposed.
91-94: Good explicit overload forLogFilesquery.
Exporting a specific overload for theLogFilesquery helps ensure type-safety.
95-98: Proper overload forLogFileContentquery.
The docstring clarifies how the function can be used. Code is clean.
99-102: New subscription overload looks fine.
Including the typed subscription for log file updates aligns well with your usage pattern in this file.web/composables/gql/graphql.ts (7)
103-106: Useful docstring forport.
The clarifying comments on howportbehaves with differentforwardTypesettings will help others avoid misconfigurations.
339-347: Clear docstrings for these Remote Access fields.
Descriptive comments onaccessType,extraOrigins,forwardType, andportimprove maintainability.
651-662: Well-structuredLogFiletype.
Defining each property for name, path, and metadata is concise and logical.
664-675: Clear separation of concerns withLogFileContent.
Distinct typing for file metadata vs. file content is a good approach, especially for large logs.
1160-1168: Well-documentedlogFileandlogFilesqueries.
This ensures thorough clarity on usage (e.g., line count, default reading behavior). The docstring is excellent.
1199-1203: Explicit argument doc forQuerylogFileArgs.
Makes the usage of optional vs. required arguments more evident to other developers.
1452-1453: Subscription argument doc is consistent.
Standardizing the docstring pattern helps keep these schema definitions cohesive.
elibosley
force-pushed
the
feat/fast-web-build
branch
from
f1834b3 to
0f38482
Compare
elibosley
changed the title
|
This plugin has been deployed to Cloudflare R2 and is available for testing. |
🤖 I have created a release *beep* *boop* --- ## [4.2.0](v4.1.3...v4.2.0) (2025-03-18) ### Features * add resolver for logging ([#1222](#1222)) ([2d90408](2d90408)) * connect settings web component ([#1211](#1211)) ([653de00](653de00)) * improve local dev with install path ([#1221](#1221)) ([32c5b0a](32c5b0a)) * split plugin builds ([4d10966](4d10966)) * swap to absolute paths for css ([#1224](#1224)) ([6f9fa10](6f9fa10)) * update theme application logic and color picker ([#1181](#1181)) ([c352f49](c352f49)) * use patch version if needed on update check ([#1227](#1227)) ([6ed46b3](6ed46b3)) ### Bug Fixes * add INELIGIBLE state to ConfigErrorState enum ([#1220](#1220)) ([1f00212](1f00212)) * **api:** dynamix notifications dir during development ([#1216](#1216)) ([0a382ca](0a382ca)) * **api:** type imports from generated graphql types ([#1215](#1215)) ([fd02297](fd02297)) * **deps:** update dependency @nestjs/schedule to v5 ([#1197](#1197)) ([b1ff6e5](b1ff6e5)) * **deps:** update dependency @vueuse/core to v12 ([#1199](#1199)) ([d8b8339](d8b8339)) * fix changelog thing again ([2426345](2426345)) * fix invalid path to node with sh execution ([#1213](#1213)) ([d12448d](d12448d)) * load tag correctly ([acd692b](acd692b)) * log errors ([629feda](629feda)) * one-command dev & web env files ([#1214](#1214)) ([8218fab](8218fab)) * re-release fixed ([bb526b5](bb526b5)) * recreate watcher on path change ([#1203](#1203)) ([5a9154e](5a9154e)) * update brand loading variants for consistent sizing ([#1223](#1223)) ([d7a4b98](d7a4b98)) --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
1 participant
Summary by CodeRabbit
These changes streamline how styles are resolved and improve internal organization without altering the overall functionality seen by end-users.