feat: ipfs-check can be embedded as iframe #102
Merged
Conversation
This file contains hidden or 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
1 task
- hide non-essential UI elements when loaded in iframe (header, description, help, footer) - add countdown timer on button during test execution - auto-clear results when CID field changes - show raw output only when results exist - improve iframe resize handling with error protection - reduce default timeout from 60s to 30s - prevent layout jitter with inline styles
- bundle Montserrat font locally (WOFF2, 19KB) instead of CDN - add SEO meta tags for better discoverability - improve visual design with IPFS branding - make FAQ sections collapsible for better UX - fix grammar: normalize to "PeerID", update to "Amino DHT" - enhance iframe detection to prevent header flash - improve form styling with consistent colors and spacing
- bundle Inter Regular WOFF2 font (23KB) for Latin charset - add .inter CSS class with full system font fallback stack - use Inter as default font on body element - maintain Montserrat for header branding
lidel
approved these changes
Sep 12, 2025
There was a problem hiding this comment.
Lgtm, I've spent some time aligning UX to match https://cid.ipfs.tech but also look native when embedded in ipfs-webui.
Below is probably as far we can get it without doing native thing in ipfs-webui.
I'll take a final look tomorrow and merge & make release.
Preview
standalone page
in ipfs-webui
lidel
added a commit
to ipfs/ipfs-webui
that referenced
this pull request
Sep 12, 2025
- integrate ipfs-check as iframe in diagnostics page - support passing CID parameter from URL - improve tab styling and fix linting issues NOTE: this requires ipfs-check#102 to be deployed to prod. Preview at ipfs/ipfs-check#102 (review)
Merged
lidel
added a commit
to ipfs/ipfs-webui
that referenced
this pull request
Sep 15, 2025
* feat: add ipfs-check tab to diagnostics screen * fix: useDebouncedCallback doesnt lose function call on delay change * feat: add retrieval check tab with ipfs-check iframe - integrate ipfs-check as iframe in diagnostics page - support passing CID parameter from URL - improve tab styling and fix linting issues NOTE: this requires ipfs-check#102 to be deployed to prod. Preview at ipfs/ipfs-check#102 (review) * security: add iframe sandboxing - add sandbox attribute with minimal required permissions - allow-scripts for check functionality - allow-forms for form submission - allow-same-origin for postMessage communication - update iframe title to be more descriptive - extract URL constants for reuse and origin validation * feat: add loading state and ARIA attributes - add loading indicator while iframe loads - hide loading state on first postMessage from iframe - use aria-busy and role=status for accessibility - position loading message to avoid layout shift - match existing UI style (charcoal-muted, f5, centered) - fix typo: intial -> initial * feat: set iframe initial height to 80vh - show browser error messages when iframe fails - height adjusts via postMessage when content loads * feat: make ipfs-check service URL configurable - add retrieval diagnostic service settings section - create IpfsCheckForm component for URL configuration - store ipfs-check URL in local storage with default fallback - update CheckScreen to use configurable URL from redux store - add translations for new settings UI users can now configure a custom ipfs-check instance URL via settings to use self-hosted or alternative diagnostic services Closes #2434 --------- Co-authored-by: Marcin Rataj <[email protected]>
SgtPooki
added a commit
to ipfs/ipfs-webui
that referenced
this pull request
Sep 16, 2025
* fix: create helpers for migrating from redux-bundler * fix: status page UI flash when identity updates * Apply suggestion from @SgtPooki * Apply suggestion from @SgtPooki * Apply suggestion from @SgtPooki * feat: add diagnostics screen * fix: create react-helmet wrapper for typescript * fix: fix typing issues for connected components * fix: logs screen works with subsystems * fix: more robust log streaming * fix: streaming logs issue * fix: log viewing and scrolling is more intuitive * chore: remove console logs * fix: subsystem log level sets properly * chore: cleanup * fix: logs screen UI spacing * feat: implement get-level to reflect actual log levels * feat: migrate logs bundle to react context * fix: log streaming works again * fix: log rate updates correctly * fix: translation and interpolation * fix: set log thresholds to reasonable values * fix: auto scroll to bottom of log entries on page load * fix: diagnostics title renders properly on initial page view * feat: display golog_log_level string representation of log values * fix: when viewing historical logs, scrolling down pulls in newer logs * fix: switch log viewer to use react-virtualized * chore: migrating to buffered-cursor * Revert "chore: migrating to buffered-cursor" This reverts commit e8675c6. * Revert "fix: switch log viewer to use react-virtualized" This reverts commit 7535aaf. * fix: remove infinite scrolling logic * refactor: logs provider cleanup * chore: ignore storybook-static * fix: use latest kubo log api for getting log levels * chore: a lot of code cleanup * tmp * fix: cleanup and unsupported version ui improvements * fix: typecheck and build succeed * chore: dep-check doesnt say @testing-library/user-event is unused * chore: remove connectedComponent helper * chore: remove debug code * chore: fix build and types after merge from main * feat: block log screen on unsupported agent version * chore: fix imports * refactor: pull out components * chore: add lucide icons needed for logs-screen * feat: log-viewer can be expanded * fix: better log streaming controls * fix: golog_log_level input matches existing inputs * feat: overhaul of autocomplete and errors * fix: move scroll to bottom button to inset control * feat: diagnostics logs view is beautiful * chore: golog_log_level link and error display * fix: global level should be saved before subsystems * fix: do not enable submit if input doesnt change log level * refactor: cleanup helper functions * test: add more autocomplete tests * test: golog-level-utils * fix: log config is modal * chore: fix modal * fix: icon tooltip * chore: fix build * fix: is-not-connected displays when node is stopped * fix: revert original tooltip changes * fix: some cleanup * chore: use the latest kubo * chore: remove unused import * fix: render unsupported kubo version screen * fix: tooltip should go away when expanding/shrinking log viewer * test: fix log viewer storybook story * fix: avoid frequent re-renders in log viewer problem: log entries were getting IDs assigned during render (bad) and all entries re-rendered when new logs arrived (slow). solution: - use numeric IDs from IndexedDB instead of generating them during render - wrap LogEntry with React.memo to skip re-renders of unchanged entries result: much better performance when streaming lots of logs. * refactor: consolidate log footer to single line layout moved storage statistics, streaming status, and controls to one line for better use of horizontal space. responsive design wraps to two lines on mobile (< 640px) to maintain readability. * refactor: reorganize log viewer controls layout - moved clear logs button to bottom right corner (always visible) - moved "go to latest" button to top controls (appears below play/pause when not at bottom) - cleaned up footer by removing trash icon - added padding-top to statsBar for better spacing - removed unnecessary margin from logs/sec display controls are now better organized: actions in top-right column, clear function in bottom-right, stats in footer. * fix: improve text contrast in diagnostics UI - replace charcoal-muted with charcoal for better readability - use sans-serif font for empty state message * feat: add backdrop blur when log viewer is expanded - adds semi-transparent backdrop with blur effect for focus - backdrop is clickable and keyboard accessible to collapse viewer - improves visual hierarchy when logs are maximized * refactor: use consistent font styling across diagnostics UI - use Tachyons .code class instead of inline font-family styles - use f7 font size consistently for log entries and status bar - prevents text jittering with monospace font for counters - simplifies code by removing duplicate font definitions * fix: improve diagnostics screen responsive layout - add responsive height calculations for mobile/desktop layouts - add text overflow with ellipsis for narrow navbar labels - ensure log viewer fills available vertical space properly - keep status bar always visible at bottom - use rem units for content dimensions * fix: logentry uses indexeddb id. component optimizes memo cmp fn * feat: add ipfs-check tab to diagnostics screen (#2424) * feat: add ipfs-check tab to diagnostics screen * fix: useDebouncedCallback doesnt lose function call on delay change * feat: add retrieval check tab with ipfs-check iframe - integrate ipfs-check as iframe in diagnostics page - support passing CID parameter from URL - improve tab styling and fix linting issues NOTE: this requires ipfs-check#102 to be deployed to prod. Preview at ipfs/ipfs-check#102 (review) * security: add iframe sandboxing - add sandbox attribute with minimal required permissions - allow-scripts for check functionality - allow-forms for form submission - allow-same-origin for postMessage communication - update iframe title to be more descriptive - extract URL constants for reuse and origin validation * feat: add loading state and ARIA attributes - add loading indicator while iframe loads - hide loading state on first postMessage from iframe - use aria-busy and role=status for accessibility - position loading message to avoid layout shift - match existing UI style (charcoal-muted, f5, centered) - fix typo: intial -> initial * feat: set iframe initial height to 80vh - show browser error messages when iframe fails - height adjusts via postMessage when content loads * feat: make ipfs-check service URL configurable - add retrieval diagnostic service settings section - create IpfsCheckForm component for URL configuration - store ipfs-check URL in local storage with default fallback - update CheckScreen to use configurable URL from redux store - add translations for new settings UI users can now configure a custom ipfs-check instance URL via settings to use self-hosted or alternative diagnostic services Closes #2434 --------- Co-authored-by: Marcin Rataj <[email protected]> * fix: use specific origin in postMessage instead of wildcard * refactor: rename check tab to retrieval-check for clarity * refactor: move diagnostics after settings in nav menu * refactor: update settings locale to clarify Kubo naming * feat: add check retrieval action to files context menu * feat: add check retrieval to files context menu - adds 'Check Retrieval' action to files context menu - triggers background provide when checking retrieval - renamed doFilesCopyCidProvide to generic doFilesCidProvide - simplified dispatchAsyncProvide to remove context logging - only log PUT_VALUE events during provide operations * fix: make test-results artifact names unique per shard upload-artifact@v4 requires unique artifact names when multiple jobs upload artifacts. adds shard index to artifact name. * fix: add type annotations to gateway.js fixes all 21 TypeScript errors by adding JSDoc type annotations. the errors were exposed when we started importing DEFAULT_IPFS_CHECK_URL from TypeScript files, bringing gateway.js into the TypeScript check scope. * test: fix React act() warning in GologLevelAutocomplete tests - properly wait for async state updates to complete - remove incorrect expectations for onErrorChange calls - add test-results/ to .gitignore * feat: improve play button discoverability in log viewer - show tooltip on initial load for 6 seconds - add pulsating animation to play button before first interaction - add breathing animation to pause icon when streaming - enhance tooltip styling with better padding and non-selectable content * feat: improve log viewer UX with contextual messages and reset behavior - show different message when streaming but no logs appear - add "Clear all logs" resets to initial state with tooltip - stop streaming when clearing logs - use muted color for empty state messages * fix: improve buffer config modal styling and layout - use single column layout for better consistency - add consistent label and input styling matching webui patterns - add htmlFor/id attributes for accessibility - use shared button labels from app translations - remove unused translation keys * feat: improve log screen UX and clarity - simplify and clarify all log-related labels and descriptions - rename confusing translation keys (description → placeholder) - add Default button to quickly set log level to error - rename Reset to Cancel for clarity (only cancels unsaved changes) - use consistent button labels from app translations - remove redundant main description, merge into log config section - make descriptions more user-friendly with practical examples - fix unused imports and linting errors * chore: remove unused translation keys from English locale --------- Co-authored-by: Marcin Rataj <[email protected]>
ipfs-gui-bot
pushed a commit
to ipfs/ipfs-webui
that referenced
this pull request
Sep 17, 2025
## [4.9.0](v4.8.0...v4.9.0) (2025-09-17) CID `bafybeietkqxghs3hm56e3w64s4papqlvvzqzjigs4eyuy24plkpz652fee` --- ### Features * add Agent Version column to peers table ([#2433](#2433)) ([614f30d](614f30d)), closes [ipfs/kubo#9465](ipfs/kubo#9465) [ipfs/js-kubo-rpc-client#342](ipfs/js-kubo-rpc-client#342) [ipfs/kubo#9465](ipfs/kubo#9465) * add close button to file viewer for improved navigation ([#2401](#2401)) ([84969a5](84969a5)) * add diagnostics screen ([#2392](#2392)) ([f3a8179](f3a8179)), closes [#2424](#2424) [ipfs-check#102](ipfs/ipfs-check#102) [/github.com/ipfs/ipfs-check/pull/102#pullrequestreview-3214396503](https://github.com/ipfs//github.com/ipfs/ipfs-check/pull/102/issues/pullrequestreview-3214396503) [#2434](#2434) * **files:** advanced sorting options ([#2421](#2421)) ([c9251eb](c9251eb)) * migrate Tooltip from Javascript to Typescript ([#2381](#2381)) ([dc9e9ac](dc9e9ac)) ### Bug Fixes * create redux-bundler migration helpers ([#2388](#2388)) ([d1fdb87](d1fdb87)) * display UX friendly error for missing files ([#2346](#2346)) ([d4e7fca](d4e7fca)) * **files:** rename in Grid View ([#2422](#2422)) ([e39bce6](e39bce6)) * **i18n:** prevent English replacements in translation sync workflow ([#2418](#2418)) ([323c59e](323c59e)) * macos input focus issue in draggable regions ([#2416](#2416)) ([5382688](5382688)) * migrate error boundary to typescript ([#2402](#2402)) ([b33775a](b33775a)) * **navbar:** highlighting on browser back ([#2425](#2425)) ([cec6dfd](cec6dfd)) * Prevent layout breaks with long filenames in file preview ([#2415](#2415)) ([f82efcd](f82efcd)) * reference to `global` in browser environment ([#2408](#2408)) ([03b2e92](03b2e92)) * shared max for bandwidth chart ([#2426](#2426)) ([cd17032](cd17032)) * typecheck more files ([#2409](#2409)) ([fb967ee](fb967ee)) ### Tests * fix bring-your-own kubo node functionality ([#2396](#2396)) ([0883cfa](0883cfa)) * make e2e tests more robust ([#2438](#2438)) ([3de544b](3de544b)) ### Trivial Changes * **readme:** update links ([dc6f8f4](dc6f8f4)) * remove selectApiUrl selector ([#2412](#2412)) ([d4710e8](d4710e8))
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 code adds some event handlers and message passing support for when ipfs-check is embedded in an iframe, like
in the ipfs-webui's /#/diagnostics/check page.