Merge "ui: Format track crash popup" into main

ui/src/assets/viewer_page.scss

@@ -95,3 +95,11 @@
  height: 10px;
  }
 }
+
+.pf-track-crash-popup {
+ font-family: $pf-font;
+ max-width: 300px;
+ display: flex;
+ flex-direction: column;
+ row-gap: 6px;
+}

ui/src/assets/widgets/track_widget.scss

@@ -13,6 +13,7 @@
 // limitations under the License.
 
 @use "sass:math";
+@import "theme";
 
 .pf-track {
  --text-color-dark: hsl(213, 22%, 30%);

ui/src/frontend/track_panel.ts

@@ -32,6 +32,7 @@ import {globals} from './globals';
 import {Panel} from './panel_container';
 import {TrackWidget} from '../widgets/track_widget';
 import {raf} from '../core/raf_scheduler';
+import {Intent} from '../widgets/common';
 
 const SHOW_TRACK_DETAILS_BUTTON = featureFlags.register({
  id: 'showTrackDetailsButton',
@@ -86,13 +87,16 @@ export class TrackPanel implements Panel {
  reorderable = false,
  } = this.attrs;
 
+ const error = trackRenderer?.getError();
+
  const buttons = [
  SHOW_TRACK_DETAILS_BUTTON.get() &&
  renderTrackDetailsButton(node, trackRenderer?.desc),
  trackRenderer?.track.getTrackShellButtons?.(),
  // Can't pin groups.. yet!
  !node.hasChildren && renderPinButton(node),
  renderAreaSelectionCheckbox(node),
+ error && renderCrashButton(error, trackRenderer?.desc.pluginId),
  ];
 
  let scrollIntoView = false;
@@ -106,7 +110,7 @@ export class TrackPanel implements Panel {
  title: node.title,
  path: node.fullPath.join('/'),
  heightPx: this.heightPx,
- error: trackRenderer?.getError(),
+ error: Boolean(trackRenderer?.getError()),
  chips: trackRenderer?.desc.chips,
  indentationLevel,
  topOffsetPx,
@@ -210,6 +214,34 @@ export class TrackPanel implements Panel {
  }
 }
 
+function renderCrashButton(error: Error, pluginId?: string) {
+ return m(
+ Popup,
+ {
+ trigger: m(Button, {
+ icon: Icons.Crashed,
+ compact: true,
+ }),
+ },
+ m(
+ '.pf-track-crash-popup',
+ m('span', 'This track has crashed.'),
+ pluginId && m('span', `Owning plugin: ${pluginId}`),
+ m(Button, {
+ label: 'View & Report Crash',
+ intent: Intent.Primary,
+ className: Popup.DISMISS_POPUP_GROUP_CLASS,
+ onclick: () => {
+ throw error;
+ },
+ }),
+ // TODO(stevegolton): In the future we should provide a quick way to
+ // disable the plugin, or provide a link to the plugin page, but this
+ // relies on the plugin page being fully functional.
+ ),
+ );
+}
+
 function getTimescaleForBounds(bounds: Bounds2D) {
  const timeWindow = globals.timeline.visibleWindow;
  return new TimeScale(timeWindow, {

ui/src/frontend/widgets_page.ts

@@ -1345,7 +1345,7 @@ export class WidgetsPage implements m.ClassComponent<PageAttrs> {
  label: 'Track',
  description: `A track`,
  renderWidget: (opts) => {
- const {error, buttons, chips, multipleTracks, ...rest} = opts;
+ const {buttons, chips, multipleTracks, ...rest} = opts;
  const dummyButtons = () => [
  m(Button, {icon: 'info', compact: true}),
  m(Button, {icon: 'settings', compact: true}),
@@ -1354,9 +1354,6 @@ export class WidgetsPage implements m.ClassComponent<PageAttrs> {
 
  const renderTrack = () =>
  m(TrackWidget, {
- error: Boolean(error)
- ? new Error('Something went wrong')
- : undefined,
  buttons: Boolean(buttons) ? dummyButtons() : undefined,
  chips: Boolean(chips) ? dummyChips() : undefined,
  ...rest,
@@ -1384,6 +1381,7 @@ export class WidgetsPage implements m.ClassComponent<PageAttrs> {
  highlight: false,
  error: false,
  multipleTracks: false,
+ reorderable: false,
  },
  }),
  );

ui/src/widgets/track_widget.ts

@@ -17,12 +17,10 @@ import {classNames} from '../base/classnames';
 import {currentTargetOffset} from '../base/dom_utils';
 import {Bounds2D, Point2D, Vector2D} from '../base/geom';
 import {Icons} from '../base/semantic_icons';
-import {Button, ButtonBar} from './button';
+import {ButtonBar} from './button';
 import {Chip, ChipBar} from './chip';
-import {Intent} from './common';
 import {Icon} from './icon';
 import {MiddleEllipsis} from './middle_ellipsis';
-import {Popup} from './popup';
 import {clamp} from '../base/math_utils';
 
 /**
@@ -42,40 +40,6 @@ import {clamp} from '../base/math_utils';
  * └──────────────────────────────────────────────────────────────────┘
  */
 
-export interface CrashButtonAttrs {
- error: Error;
-}
-
-export class CrashButton implements m.ClassComponent<CrashButtonAttrs> {
- view({attrs}: m.Vnode<CrashButtonAttrs>): m.Children {
- return m(
- Popup,
- {
- trigger: m(Button, {
- icon: Icons.Crashed,
- compact: true,
- }),
- },
- this.renderErrorMessage(attrs.error),
- );
- }
-
- private renderErrorMessage(error: Error): m.Children {
- return m(
- '',
- 'This track has crashed',
- m(Button, {
- label: 'Re-raise exception',
- intent: Intent.Primary,
- className: Popup.DISMISS_POPUP_GROUP_CLASS,
- onclick: () => {
- throw error;
- },
- }),
- );
- }
-}
-
 export interface TrackComponentAttrs {
  // The title of this track.
  readonly title: string;
@@ -98,8 +62,8 @@ export interface TrackComponentAttrs {
  // Optional list of chips to display after the track title.
  readonly chips?: ReadonlyArray<string>;
 
- // Optional error to display on this track.
- readonly error?: Error | undefined;
+ // Render this track in error colours.
+ readonly error?: boolean;
 
  // The integer indentation level of this track. If omitted, defaults to 0.
  readonly indentationLevel?: number;
@@ -320,7 +284,6 @@ export class TrackWidget implements m.ClassComponent<TrackComponentAttrs> {
  onclick: (e: MouseEvent) => e.stopPropagation(),
  },
  attrs.buttons,
- attrs.error && m(CrashButton, {error: attrs.error}),
  ),
  ),
  );