Bugfix: Hunt label UI css improvements. (#3815)

Also added add_labels and del_labels to the hunt_update() VQL function to allow hunt labels to be manipulated from VQL. Modified Event Table UI to allow for resizable and draggable columns.
Velocidex · Oct 13, 2024 · 6dd8cda · 6dd8cda
1 parent 96107f5
commit 6dd8cda
Show file tree

Hide file tree

Showing 12 changed files with 367 additions and 91 deletions.
diff --git a/docs/references/vql.yaml b/docs/references/vql.yaml
@@ -3677,15 +3677,12 @@
     id. As a convenience, the function will also accept a flow id for
     flows which were launched by the hunt. These flow IDs have a
     specific format indicating they were launched from a hunt.
-
   type: Function
   args:
   - name: hunt_id
     type: string
-    description: |
-      Hunt Id to look up or a flow id created by that hunt
-      (e.g. F.CRUU3KIE5D73G.H).
-
+    description: Hunt Id to look up or a flow id created by that hunt (e.g. F.CRUU3KIE5D73G.H
+      ).
   metadata:
     permissions: READ_RESULTS
   platforms:
@@ -3747,6 +3744,14 @@
   - name: expires
     type: time.Time
     description: Update hunt expiry
+  - name: add_labels
+    type: string
+    description: Labels to be added to hunt
+    repeated: true
+  - name: del_labels
+    type: string
+    description: Labels to be removed from hunt
+    repeated: true
   metadata:
     permissions: START_HUNT
   platforms:
@@ -10735,3 +10740,4 @@
   platforms:
   - linux_amd64_cgo
   - windows_amd64_cgo
+
diff --git a/gui/velociraptor/src/components/core/paged-table.jsx b/gui/velociraptor/src/components/core/paged-table.jsx
@@ -320,10 +320,6 @@ export class TablePaginationControl extends React.Component {
 
     render() {
         let total_size = parseInt(this.props.total_size || 0);
-        if (total_size <=0) {
-            return <></>;
-        }
-
         let total_pages = parseInt(total_size / this.props.page_size) + 1;
         let last_page = total_pages - 1;
 
@@ -649,50 +645,18 @@ class VeloPagedTable extends Component {
     // Render the transformed view at the top right of the
     // table. Shows the user what transforms are currnetly active.
     getTransformed = ()=>{
-        let result = [];
         let transform = Object.assign({}, this.state.transform || {});
         if(_.isEmpty(transform) && !_.isEmpty(this.props.transform)) {
             Object.assign(transform, this.props.transform);
         }
 
-        if (transform.filter_column) {
-            result.push(
-                <ToolTip tooltip={T("Clear")} key="1" >
-                  <Button onClick={()=>{
-                      let new_transform = Object.assign({}, this.state.transform);
-                      new_transform.filter_column = undefined;
-                      this.setState({transform: new_transform});
-                  }}
-                          className="table-transformed"
-                          variant="outline-dark">
-                    { transform.filter_column } ( {transform.filter_regex} )
-                    <span className="transform-button">
-                      <FontAwesomeIcon icon="filter"/>
-                    </span>
-                  </Button>
-                </ToolTip>
-            );
-        }
-
-        if (transform.sort_column) {
-            result.push(
-                <ToolTip tooltip={T("Transformed")} key="2" >
-                  <Button disabled={true}
-                          variant="outline-dark">
-                    {transform.sort_column}
-                    <span className="transform-button">
-                      {
-                          transform.sort_direction === "Ascending" ?
-                              <FontAwesomeIcon icon="sort-alpha-up"/> :
-                              <FontAwesomeIcon icon="sort-alpha-down"/>
-                      }
-                    </span>
-                  </Button>
-                </ToolTip>
-            );
+        if(_.isEmpty(transform)) {
+            return <></>;
         }
-
-        return result;
+        return <TransformViewer
+                 transform={transform}
+                 setTransform={t=>this.setState({transform: t})}
+               />;
     }
 
     fetchRows = () => {
@@ -941,11 +905,9 @@ class VeloPagedTable extends Component {
                 { this.renderPaginator() }
 
               </ButtonGroup>
-              { transformed.length > 0 &&
                 <ButtonGroup className="float-right">
                   { transformed }
                 </ButtonGroup>
-              }
               { this.props.toolbar || <></> }
             </Navbar>
         );
@@ -1205,6 +1167,10 @@ class VeloPagedTable extends Component {
         let new_columns = [];
         let from_seen = false;
 
+        if (from_col === to_col) {
+            return;
+        }
+
         _.each(this.state.columns, x=>{
             if(x === to_col) {
                 if (from_seen) {
@@ -1293,3 +1259,59 @@ class VeloPagedTable extends Component {
 }
 
 export default VeloPagedTable;
+
+
+export class TransformViewer extends Component {
+    static propTypes = {
+        transform: PropTypes.object,
+        setTransform: PropTypes.func,
+    }
+
+    render() {
+        let transform = this.props.transform || {};
+        let result = [];
+
+        if (transform.filter_column) {
+            result.push(
+                <ToolTip tooltip={T("Clear")} key="1" >
+                  <Button onClick={()=>{
+                      let new_transform = Object.assign({}, this.props.transform);
+                      new_transform.filter_column = undefined;
+                      this.props.setTransform(new_transform);
+                  }}
+                          className="table-transformed"
+                          variant="outline-dark">
+                    { transform.filter_column } ( {transform.filter_regex} )
+                    <span className="transform-button">
+                      <FontAwesomeIcon icon="filter"/>
+                    </span>
+                  </Button>
+                </ToolTip>
+            );
+        }
+
+        if (transform.sort_column) {
+            result.push(
+                <ToolTip tooltip={T("Transformed")} key="2" >
+                  <Button onClick={()=>{
+                      let new_transform = Object.assign({}, this.props.transform);
+                      new_transform.sort_column = undefined;
+                      this.props.setTransform(new_transform);
+                  }}
+                          variant="outline-dark">
+                    {transform.sort_column}
+                    <span className="transform-button">
+                      {
+                          transform.sort_direction === "Ascending" ?
+                              <FontAwesomeIcon icon="sort-alpha-up"/> :
+                              <FontAwesomeIcon icon="sort-alpha-down"/>
+                      }
+                    </span>
+                  </Button>
+                </ToolTip>
+            );
+        }
+
+        return <>{result}</>;
+    }
+}