Remove traces from opened traces view with delete button

Fixes #336 - Added remove button next to trace group name - Add tooltip to remove button Signed-off-by: hriday-panchasara <hriday.panchasara@ericsson.com>
eclipse-cdt-cloud · Nov 17, 2021 · 464674c · 464674c
1 parent 144bc4f
commit 464674c
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 0 deletions.
diff --git a/packages/react-components/src/trace-explorer/trace-explorer-opened-traces-widget.tsx b/packages/react-components/src/trace-explorer/trace-explorer-opened-traces-widget.tsx
@@ -8,6 +8,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCopy } from '@fortawesome/free-solid-svg-icons';
 import { OpenedTracesUpdatedSignalPayload } from 'traceviewer-base/lib/signals/opened-traces-updated-signal-payload';
 import { ITspClientProvider } from 'traceviewer-base/lib/tsp-client-provider';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
 
 export interface ReactOpenTracesWidgetProps {
     id: string,
@@ -165,6 +166,13 @@ export class ReactOpenTracesWidget extends React.Component<ReactOpenTracesWidget
                     <h4 className='trace-element-name'>{traceName}</h4>
                     {this.renderTracesForExperiment(props.index)}
                 </div>
+                <div className='remove-trace-button-container' title='Remove traces from Trace Viewer'>
+                    <button data-tip data-for="removeTip" className='remove-trace-button'
+                        onClick={event => {this.handleOnExperimentDeleted(event,traceUUID);}}
+                    >
+                        <FontAwesomeIcon icon={faTimes} />
+                    </button>
+                </div>
                 {/* <div className='trace-element-options'>
                     <button className='share-context-button' onClick={this.handleShareButtonClick.bind(this, props.index)}>
                         <FontAwesomeIcon icon={faShareSquare} />
@@ -174,6 +182,13 @@ export class ReactOpenTracesWidget extends React.Component<ReactOpenTracesWidget
         </div>;
     }
 
+    protected doHandleOnExperimentDeleted(e: React.MouseEvent<HTMLButtonElement>, traceUUID: string): void {
+        this._experimentManager.closeExperiment(traceUUID);
+        signalManager().fireCloseTraceViewerTabSignal(traceUUID);
+        e.preventDefault();
+        e.stopPropagation();
+    }
+
     protected renderTracesForExperiment(index: number): React.ReactNode {
         const tracePaths = this.state.openedExperiments[index].traces;
         return (
@@ -258,6 +273,7 @@ export class ReactOpenTracesWidget extends React.Component<ReactOpenTracesWidget
     protected handleOnExperimentSelected = (e: React.MouseEvent<HTMLDivElement>): void => this.doHandleOnExperimentSelected(e);
     protected handleContextMenuEvent = (e: React.MouseEvent<HTMLDivElement>, traceUUID: string): void => this.doHandleContextMenuEvent(e, traceUUID);
     protected handleClickEvent = (e: React.MouseEvent<HTMLDivElement>, traceUUID: string): void => this.dohandleClickEvent(e, traceUUID);
+    protected handleOnExperimentDeleted = (e: React.MouseEvent<HTMLButtonElement>, traceUUID: string): void => this.doHandleOnExperimentDeleted(e, traceUUID);
 
     protected doHandleOnExperimentSelected(e: React.MouseEvent<HTMLDivElement>): void {
         const index = Number(e.currentTarget.getAttribute('data-id'));

diff --git a/packages/react-components/style/trace-explorer.css b/packages/react-components/style/trace-explorer.css
@@ -63,6 +63,44 @@
     grid-template-rows: auto;
 } */
 
+.remove-trace-button-container {
+    margin-right: 2px;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+}
+
+.remove-trace-button-container.theia-mod-selected {
+    background-color: var(--theia-selection-background);
+}
+
+.remove-trace-button-container :hover {
+    background-color: var(--theia-scrollbarSlider-background);
+    cursor: pointer; 
+}
+
+.remove-trace-button {
+    background: none;
+    border: none;
+    visibility: hidden;
+    margin-top: 2px;
+    color: var(--theia-ui-font-color0)
+}
+
+.remove-trace-button :hover {
+    background: none;
+}
+
+.trace-element-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.trace-element-container:hover .remove-trace-button {
+    visibility: visible;
+}
+
 /* Remove focus outline on grid when selected */
 .ReactVirtualized__Grid {
     outline: none;