### Start development server

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/README.md

Commands to install dependencies and launch the development server. Use the disable_plugins flag to exclude frontend plugins.

```bash
yarn install
```

```bash
yarn start
```

```bash
disable_plugins=true npm start
```

```bash
disable_plugins=true yarn start
```

--------------------------------

### Install graylog-web-plugin

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/packages/graylog-web-plugin/README.md

Install the graylog-web-plugin package using npm. This is the first step to start developing a web plugin.

```bash
npm install --save graylog-web-plugin
```

--------------------------------

### Start Development Server

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/AGENTS.md

Starts the development server for local development. Hot-reloading and other development features are enabled.

```bash
yarn start
```

--------------------------------

### Complete Interactive Project Generation Example

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog-plugin-archetype/README.md

This is a detailed example of the interactive process when generating a Graylog plugin project. It shows the prompts for groupId, artifactId, and other configurations.

```bash
$ mvn archetype:generate -DarchetypeGroupId=org.graylog -DarchetypeArtifactId=graylog-plugin-archetype
[...] 
[INFO] Generating project in Interactive mode
[INFO] Archetype [org.graylog:graylog-plugin-archetype:1.0.1] found in catalog remote
Define value for property 'groupId': : org.graylog.plugins
Define value for property 'artifactId': : graylog-plugin-twitter
[INFO] Using property: version = 1.0.0-SNAPSHOT
Define value for property 'package':  org.graylog.plugins: : org.graylog.plugins.twitter
Define value for property 'pluginClassName':  : : Twitter
Confirm properties configuration:
groupId: org.graylog.plugins
artifactId: graylog-plugin-twitter
version: 1.0.0-SNAPSHOT
package: org.graylog.plugins.twitter
pluginClassName: Twitter
 Y: : y
[INFO] ----------------------------------------------------------------------------
[INFO] Using following parameters for creating project from Archetype: graylog-plugin-archetype:1.0.1
[INFO] ----------------------------------------------------------------------------
[INFO] Parameter: groupId, Value: org.graylog.plugins
[INFO] Parameter: artifactId, Value: graylog-plugin-twitter
[INFO] Parameter: version, Value: 1.0.0-SNAPSHOT
[INFO] Parameter: package, Value: org.graylog.plugins.twitter
[INFO] Parameter: packageInPathFormat, Value: org/graylog/plugins/twitter
[INFO] Parameter: package, Value: org.graylog.plugins.twitter
[INFO] Parameter: version, Value: 1.0.0-SNAPSHOT
[INFO] Parameter: groupId, Value: org.graylog.plugins
[INFO] Parameter: pluginClassName, Value: Twitter
[INFO] Parameter: artifactId, Value: graylog-plugin-twitter
[INFO] project created from Archetype in dir: /home/bernd/foo/graylog-plugin-twitter
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------

```

--------------------------------

### Install Dependencies with Yarn

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/AGENTS.md

Use this command to install all project dependencies using Yarn.

```bash
yarn install
```

--------------------------------

### Basic Panel Example

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/src/components/bootstrap/Panel.md

A basic example of a Panel component with an onClick handler. Ensure the Panel component and its associated methods are correctly imported.

```javascript
const PanelClickExample = () => {
  function handleClick() {
    alert('You have clicked on me');
  }

  return (
    <Panel onClick={handleClick}>
      <Panel.Body>Basic panel example</Panel.Body>
    </Panel>
  );
};

<PanelClickExample />;
```

--------------------------------

### Initialize npm project

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/packages/graylog-web-plugin/README.md

Initialize a new npm project. This command is typically run before installing project dependencies.

```bash
$ npm init
[...]
$ npm --save-dev graylog-web-plugin
```

--------------------------------

### Start Development Server Without Plugins

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/AGENTS.md

Starts the development server with all plugins disabled. Useful for debugging plugin-related issues.

```bash
disable_plugins=true yarn start
```

--------------------------------

### Start OpenSearch Cluster

Source: https://github.com/graylog2/graylog2-server/blob/master/data-node/migration/Manual-Migration.md

Use this command to bring up the OpenSearch cluster nodes. Ensure the security configuration is updated before this step.

```bash
docker compose up -d opensearch1 opensearch2 opensearch3
```

--------------------------------

### List Conversion Examples

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-server/src/test/resources/org/graylog/plugins/pipelineprocessor/functions/conversions.txt

Shows conversion to lists. Non-list inputs or missing fields result in an empty list.

```GRL
list_1: to_list(["foo"])
```

```GRL
list_2: to_list("abc")
```

```GRL
list_3: to_list($message.not_there)
```

--------------------------------

### Register Plugin

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/AGENTS.md

Example of how to register a new plugin using the `PluginStore.register` method. The `key` parameter is crucial for identifying the plugin.

```typescript
PluginStore.register(new PluginManifest({}, { key: [data] }));
```

--------------------------------

### Format Code

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/AGENTS.md

Automatically formats all code files in the project according to the defined style guide.

```bash
yarn format
```

--------------------------------

### Deprecated Basic Panel Example

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/src/components/bootstrap/Panel.md

A deprecated example of a Panel component with an onClick handler. This syntax is no longer recommended.

```javascript
const DeprecatedPanelClickExample = () => {
  function handleClick() {
    alert('You have clicked on me');
  }

  return <Panel onClick={handleClick}>Click me Example</Panel>;
};

<DeprecatedPanelClickExample />;
```

--------------------------------

### String Conversion Examples

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-server/src/test/resources/org/graylog/plugins/pipelineprocessor/functions/conversions.txt

Demonstrates converting various types to strings. Handles missing fields by returning an empty string or a specified default.

```GRL
string_1: to_string("1")
```

```GRL
string_2: to_string("2", "default")
```

```GRL
string_3: to_string($message.not_there)
```

```GRL
string_4: to_string($message.not_there, "default")
```

```GRL
string_5: to_string(false)
```

```GRL
string_6: to_string(42)
```

```GRL
string_7: to_string(23.42d)
```

--------------------------------

### IP Address Conversion Examples

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-server/src/test/resources/org/graylog/plugins/pipelineprocessor/functions/conversions.txt

Shows conversion to IP addresses. Handles missing fields by returning '0.0.0.0' or '::1' (for IPv6) as defaults.

```GRL
ip_1: to_ip("127.0.0.1")
```

```GRL
ip_2: to_ip("127.0.0.1", "2001:db8::1")
```

```GRL
ip_3: to_ip($message.not_there)
```

```GRL
ip_4: to_ip($message.not_there, "::1")
```

--------------------------------

### Start Graylog and DataNodes

Source: https://github.com/graylog2/graylog2-server/blob/master/data-node/migration/Manual-Migration.md

Launch Graylog and DataNode services using Docker Compose. Check Graylog logs for authentication credentials to access the Preflight UI.

```bash
docker compose create graylog1
docker compose up -d graylog1 datanode1 datanode2 datanode3
```

--------------------------------

### Basic Table Example

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/src/components/bootstrap/Table.md

Renders a simple table with a header and body rows. Use this for standard tabular data display.

```javascript
<Table>
  <thead>
    <tr>
      <th>#</th>
      <th>Col 1</th>
      <th>Col 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Foo Bar</td>
      <td>active</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Lorem Ipsum</td>
      <td>active</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Ex salutatus</td>
      <td>active</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Usu petentium</td>
      <td>active</td>
    </tr>
  </tbody>
</Table>
```

--------------------------------

### Bootstrap NavDropdown Example

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/src/components/bootstrap/NavDropdown.md

Example of using Bootstrap's NavDropdown component with MenuItem elements. Ensure the 'components/bootstrap' module is correctly imported.

```javascript
import { Nav, NavDropdown, MenuItem } from 'components/bootstrap';

<Nav activeKey="1.1">
  <NavDropdown eventKey="1" title="Dropdown" id="nav-dropdown">
    <MenuItem eventKey="1.1">Action</MenuItem>
    <MenuItem eventKey="1.2">Another action</MenuItem>
    <MenuItem eventKey="1.3">Something else here</MenuItem>
    <MenuItem divider />
    <MenuItem eventKey="1.4">Separated link</MenuItem>
  </NavDropdown>
</Nav>;
```

--------------------------------

### Basic ListGroup Example

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/src/components/bootstrap/ListGroup.md

Renders a simple list of items using ListGroup and ListGroupItem components. Ensure bootstrap components are imported.

```javascript
import { ListGroup, ListGroupItem } from 'components/bootstrap';

<ListGroup>
  <ListGroupItem>Item 1</ListGroupItem>
  <ListGroupItem>Item 2</ListGroupItem>
  <ListGroupItem>Item 3</ListGroupItem>
</ListGroup>;
```

--------------------------------

### Map Conversion Examples

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-server/src/test/resources/org/graylog/plugins/pipelineprocessor/functions/conversions.txt

Demonstrates converting various inputs to maps. Non-map inputs or missing fields result in an empty map.

```GRL
map_1: to_map({foo:"bar"})
```

```GRL
map_2: to_map("foobar")
```

```GRL
map_3: to_map(23)
```

```GRL
map_4: to_map(23.42)
```

```GRL
map_5: to_map(true)
```

```GRL
map_6: to_map($message.not_there)
```

--------------------------------

### Panel Variants Example

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/src/components/bootstrap/Panel.md

Demonstrates how to apply different visual styles (variants) to a Panel component. Ensure the style names are correctly cased.

```javascript
const styles = ['Primary', 'Danger', 'Warning', 'Success', 'Info', 'Default'];

styles.map((style, i) => {
  return (
    <Panel bsStyle={style.toLowerCase()} key={`button-${style}-${i}`}>
      <Panel.Heading>{`${style} Heading`}</Panel.Heading>
      <Panel.Body>Panel content</Panel.Body>
    </Panel>
  );
});
```

--------------------------------

### Formatted String Example (f() helper)

Source: https://github.com/graylog2/graylog2-server/blob/master/AGENTS.md

Demonstrates using the `f()` helper for string formatting in Java, which is preferred over string concatenation for non-logging purposes. Ensure `StringUtils.f` is imported.

```java
import static org.graylog2.shared.utilities.StringUtils.f;

// ...
f("Message size exceeds %d bytes", maxSize)
```

--------------------------------

### Boolean Conversion Examples

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-server/src/test/resources/org/graylog/plugins/pipelineprocessor/functions/conversions.txt

Demonstrates converting values to booleans. Handles missing fields by returning false or a specified default.

```GRL
bool_1: to_bool("true")
```

```GRL
bool_2: to_bool("false", true)
```

```GRL
bool_3: to_bool($message.not_there)
```

```GRL
bool_4: to_bool($message.not_there, true)
```

--------------------------------

### Bootstrap Menu Implementation

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/src/components/bootstrap/Menu.md

Example of creating a dropdown menu with editable and deletable items using Bootstrap components. Ensure 'components/bootstrap' is correctly imported.

```tsx
import { Menu, MenuItem, DeleteMenuItem, Button } from 'components/bootstrap';

<Menu>
  <Menu.Target>
    <Button>Open menu</Button>
  </Menu.Target>
  <Menu.Dropdown>
    <MenuItem onClick={() => console.log('on click menu item')}>Edit</MenuItem>
    <MenuItem divider />
    <DeleteMenuItem onClick={() => console.log('on click menu item')} />
  </Menu.Dropdown>
</Menu>;
```

--------------------------------

### TableList without Bulk Actions

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/src/components/common/TableList.md

Use this example when only item-specific actions are required and bulk operations are not needed. Set 'enableBulkActions' to false.

```javascript
import Immutable from 'immutable';
import { Button } from 'components/bootstrap';

class TableListExampleNoBulkActions extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: Immutable.List([
        { id: '1', title: 'One', secret_key: 'uno', description: 'First number' },
        { id: '2', title: 'Two', secret_key: 'dos', description: 'Second number' },
        { id: '3', title: 'Three', secret_key: 'tres', description: 'Third number' },
        { id: '4', title: 'Four', secret_key: 'cuatro', description: 'Fourth number' },
        { id: '5', title: 'Five', secret_key: 'cinco', description: 'Fifth number' },
      ]),
    };
  }

  action(text) {
    return () => {
      alert(`This is an action for "${text}"`);
    };
  }

  itemActionsFactory(selectedNumber) {
    return (
      <Button bsStyle="primary" bsSize="xsmall" onClick={this.action(JSON.stringify(selectedNumber))}>
        Do something
      </Button>
    );
  }

  render() {
    const { items } = this.state;

    return (
      <TableList
        items={items}
        enableFilter={false}
        enableBulkActions={false}
        itemActionsFactory={this.itemActionsFactory}
      />
    );
  }
}

<TableListExampleNoBulkActions />
```

--------------------------------

### Table with Options Example

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/src/components/bootstrap/Table.md

Renders a table with additional Bootstrap styling options like bordered, condensed, striped, and hover effects. Apply these options for enhanced table presentation.

```javascript
<Table bordered condensed striped hover>
  <thead>
    <tr>
      <th>#</th>
      <th>Col 1</th>
      <th>Col 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Foo Bar</td>
      <td>active</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Lorem Ipsum</td>
      <td>active</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Ex salutatus</td>
      <td>active</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Usu petentium</td>
      <td>active</td>
    </tr>
  </tbody>
</Table>
```

--------------------------------

### Deprecated Panel Variants Example

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/src/components/bootstrap/Panel.md

Demonstrates the usage of deprecated Panel components with different styles. Ensure to use lowercase for bsStyle.

```javascript
const styles = ['Primary', 'Danger', 'Warning', 'Success', 'Info', 'Default'];

styles.map((style, i) => {
  return (
    <Panel bsStyle={style.toLowerCase()} key={`button-${style}-${i}`} header={`${style} Heading`}>
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </Panel>
  );
});
```

--------------------------------

### TableList with Item and Bulk Actions

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/src/components/common/TableList.md

Use this example when you need to provide both individual item actions and bulk operations on selected items. Ensure 'bulkActionsFactory' and 'itemActionsFactory' props are correctly implemented.

```javascript
import Immutable from 'immutable';
import { Button } from 'components/bootstrap';

class TableListExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: Immutable.List([
        { id: '1', title: 'One', secret_key: 'uno', description: 'First number' },
        { id: '2', title: 'Two', secret_key: 'dos', description: 'Second number' },
        { id: '3', title: 'Three', secret_key: 'tres', description: 'Third number' },
        { id: '4', title: 'Four', secret_key: 'cuatro', description: 'Fourth number' },
        { id: '5', title: 'Five', secret_key: 'cinco', description: 'Fifth number' },
      ]),
    };
  },

  action(text) {
    return () => {
      alert(`This is an action for "${text}"`);
    };
  }

  bulkActionsFactory(selectedNumbers) {
    return (
      <Button bsStyle="info"
              bsSize="xsmall"
              onClick={this.action(selectedNumbers.join(', '))}>
        Bulk-operation
      </Button>
    );
  }

  itemActionsFactory(selectedNumber) {
    return (
      <Button bsStyle="primary"
              bsSize="xsmall"
              onClick={this.action(JSON.stringify(selectedNumber))}>
        Do something
      </Button>
    );
  }

  render() {
    const { items } = this.state;

    return (
      <TableList items={items}
                 filterKeys={['title', 'secret_key']}
                 bulkActionsFactory={this.bulkActionsFactory}
                 itemActionsFactory={this.itemActionsFactory} />
    );
  }
}

<TableListExample />
```

--------------------------------

### Button Sizes Example

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/src/components/bootstrap/Button.md

Illustrates how to apply different size variants (xs, sm, md, lg) to the Button component. Requires the 'Button' component to be available in the scope.

```tsx
const sizes = ['xs', 'sm', 'md', 'lg'];

sizes.map((size, i) => {
  return (
    <p key={`button-example-${size}-${i}`}>
      <Button bsStyle="info" bsSize={size}>
        {size}
      </Button>{' '}
    </p>
  );
});
```

--------------------------------

### Logging String Formatting Example

Source: https://github.com/graylog2/graylog2-server/blob/master/AGENTS.md

Shows the standard SLF4J placeholder `{}` for string formatting within log messages. This method should be used for logging, not general string manipulation.

```java
LOG.info("Size: {}", size)
```

--------------------------------

### Deprecated Collapsible Panel Example

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/src/components/bootstrap/Panel.md

Shows how to use the deprecated collapsible Panel component with state management for expansion. Requires importing Button from 'components/bootstrap'.

```javascript
import { Button } from 'components/bootstrap';

const DeprecatedPanelCollapseExample = () => {
  const [expanded, setExpanded] = React.useState(false);

  return (
    <div>
      <p>
        <Button onClick={() => setExpanded(!expanded)}>Click to Toggle</Button>
      </p>

      <Panel collapsible expanded={expanded}>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim
        keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </Panel>
    </div>
  );
};

<>
  <DeprecatedPanelCollapseExample />

  <Panel collapsible defaultExpanded title="Click to Toggle">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh
    helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </Panel>
</>
```

--------------------------------

### Start Elasticsearch Cluster for Migration

Source: https://github.com/graylog2/graylog2-server/blob/master/data-node/migration/Manual-Migration.md

Initiate the Elasticsearch cluster before migrating to OpenSearch. This step is part of the ES 7.10 migration process.

```bash
docker compose up -d elasticsearch1 elasticsearch2 elasticsearch3
```

--------------------------------

### Generate New Graylog Plugin Project

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog-plugin-archetype/README.md

Use this command to generate a new Graylog plugin project interactively. Ensure you have Maven installed.

```bash
$ mvn archetype:generate -DarchetypeGroupId=org.graylog -DarchetypeArtifactId=graylog-plugin-archetype
```

--------------------------------

### Develop Plugin Web Interface with Hot Reloading

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog-plugin-archetype/src/main/resources/archetype-resources/README.md

Use this setup to enable hot reloading for your plugin's web interface during development. Ensure you have cloned the graylog2-server repository and are in the correct directory.

```bash
git clone https://github.com/Graylog2/graylog2-server.git
cd graylog2-server/graylog2-web-interface
ln -s $YOURPLUGIN plugin/
npm install && npm start
```

--------------------------------

### Map Set Example in Graylog Rule

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-server/src/test/resources/org/graylog/plugins/pipelineprocessor/functions/mapSet.txt

Demonstrates how to use map_set to add or update fields in a map within a Graylog processing rule. Ensure the map is correctly initialized before modification.

```glsl
rule "mapSet"
when
  true
then
  let newValue = {k1: "v1", k2: "v2"};
  map_set(newValue, "k1", "v11");
  map_set(newValue, "k3", 1);
  set_fields(newValue);
end
```

--------------------------------

### Button Variants Example

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/src/components/bootstrap/Button.md

Demonstrates how to render buttons with various predefined styles like Primary, Danger, Warning, Success, Info, Link, Default, and Transparent. Ensure the 'Button' component is imported.

```tsx
const styles = ['Primary', 'Danger', 'Warning', 'Success', 'Info', 'Link', 'Default', 'Transparent'];

styles.map((style, i) => {
  return (
    <p key={`button-example-${style}-${i}`}>
      <Button bsStyle={style.toLowerCase()}>{style}</Button>{' '}
      <Button active bsStyle={style.toLowerCase()}>
        {style} Active
      </Button>{' '}
      <Button disabled bsStyle={style.toLowerCase()}>
        {style} Disabled
      </Button>{' '}
    </p>
  );
});
```

--------------------------------

### Display No Entities Exist Component

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/src/components/common/NoEntitiesExist.md

Use the `NoEntitiesExist` component to inform users when no entities are available. No additional setup is required.

```javascript
<NoEntitiesExist />
```

--------------------------------

### Button as a Link Example

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/src/components/bootstrap/Button.md

Shows how to use the Button component to create a clickable link to an external URL. The 'href', 'target', and 'rel' attributes are used for link behavior and security.

```tsx
<Button href="https://www.graylog.org" target="_blank" rel="noopener noreferrer">
  graylog.org
</Button>
```

--------------------------------

### React Form with Input Groups and Validation

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/src/components/bootstrap/InputGroup.md

This example demonstrates a React form with various input group configurations. It includes validation logic based on input length and shows how to use addons, buttons, and dropdowns within input groups. Requires React and Bootstrap components.

```javascript
import { FormControl, FormGroup, InputGroup, Button, DropdownButton, MenuItem } from 'components/bootstrap';
import Icon from 'components/common/Icon';

class FormExample extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      value: '',
    };
  }

  getValidationState() {
    const length = this.state.value.length;
    if (length > 10) return 'success';
    if (length > 5) return 'warning';
    if (length > 0) return 'error';
    return null;
  }

  handleChange(e) {
    this.setState({ value: e.target.value });
  }

  render() {
    return (
      <form>
        <FormGroup validationState={this.getValidationState()}>
          <InputGroup>
            <InputGroup.Addon>@</InputGroup.Addon>
            <FormControl
              type="text"
              value={this.state.value}
              placeholder="Example w/ Validation"
              onChange={this.handleChange}
            />
          </InputGroup>
        </FormGroup>
        <FormGroup>
          <InputGroup>
            <FormControl type="text" />
            <InputGroup.Addon>.00</InputGroup.Addon>
          </InputGroup>
        </FormGroup>

        <FormGroup>
          <InputGroup>
            <InputGroup.Addon>$</InputGroup.Addon>
            <FormControl type="text" />
            <InputGroup.Addon>.00</InputGroup.Addon>
          </InputGroup>
        </FormGroup>

        <FormGroup>
          <InputGroup>
            <InputGroup.Addon>
              <Icon name="music" />
            </InputGroup.Addon>
            <FormControl type="text" />
          </InputGroup>
        </FormGroup>

        <FormGroup>
          <InputGroup>
            <InputGroup.Button>
              <Button>Before</Button>
            </InputGroup.Button>
            <FormControl type="text" />
          </InputGroup>
        </FormGroup>
        <FormGroup>
          <InputGroup>
            <FormControl type="text" />
            <DropdownButton componentClass={InputGroup.Button} id="input-dropdown-addon" title="Action">
              <MenuItem key="1">Item</MenuItem>
            </DropdownButton>
          </InputGroup>
        </FormGroup>

        <FormGroup>
          <InputGroup>
            <InputGroup.Addon>
              <input type="radio" aria-label="..." />
            </InputGroup.Addon>
            <FormControl type="text" />
          </InputGroup>
        </FormGroup>
        <FormGroup>
          <InputGroup>
            <InputGroup.Addon>
              <input type="checkbox" aria-label="..." />
            </InputGroup.Addon>
            <FormControl type="text" />
          </InputGroup>
        </FormGroup>
      </form>
    );
  }
}

<FormExample />;
```

--------------------------------

### Long Conversion Examples

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-server/src/test/resources/org/graylog/plugins/pipelineprocessor/functions/conversions.txt

Shows conversion to long integers. Handles missing fields by returning 0 or a specified default. Supports conversion from strings and doubles.

```GRL
long_1: to_long(1)
```

```GRL
long_2: to_long(2, 1)
```

```GRL
long_3: to_long($message.not_there)
```

```GRL
long_4: to_long($message.not_there, 1)
```

```GRL
long_5: to_long(23.42d)
```

```GRL
long_6: to_long("23")
```

```GRL
long_7: to_long("23.42", 1)
```

```GRL
long_min1: to_long("-9223372036854775808", 1)
```

```GRL
long_min2: to_long("-9223372036854775809", 1)
```

```GRL
long_max1: to_long("9223372036854775807", 1)
```

```GRL
long_max2: to_long("9223372036854775808", 1)
```

--------------------------------

### Read-only Dark-themed Editor with Annotations

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/src/components/common/SourceCodeEditor.md

This example shows a read-only, dark-themed editor for general text. It also demonstrates how to add annotations (errors, warnings, info) to specific lines.

```javascript
class TextSourceEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      code: `function foobar() {
  console.log('this is some source code!');
}
`,
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(nextValue) {
    this.setState({ code: nextValue });
  }

  render() {
    const { code } = this.state;
    const annotations = [
      { row: 1, column: -1, text: 'oh noes!', type: 'error' },
      { row: 2, column: -1, text: 'easy!', type: 'warning' },
      { row: 3, column: -1, text: 'info!', type: 'info' },
    ];
    return (
      <SourceCodeEditor id="editor-2" annotations={annotations} resizable={false} readOnly theme="dark" value={code} />
    );
  }
}

<TextSourceEditor />;
```

--------------------------------

### Double Conversion Examples

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-server/src/test/resources/org/graylog/plugins/pipelineprocessor/functions/conversions.txt

Illustrates converting values to double-precision floating-point numbers. Handles missing fields with a default value of 0d or a specified default. Supports various string formats and special values like Infinity.

```GRL
double_1: to_double(1d)
```

```GRL
double_2: to_double(2d, 1d)
```

```GRL
double_3: to_double($message.not_there)
```

```GRL
double_4: to_double($message.not_there, 1d)
```

```GRL
double_5: to_double(23)
```

```GRL
double_6: to_double("23")
```

```GRL
double_7: to_double("23.42")
```

```GRL
double_min1: to_double("4.9E-324")
```

```GRL
double_min2: to_double("4.9E-325", 1d)
```

```GRL
double_max1: to_double("1.7976931348623157E308")
```

```GRL
double_inf1: to_double("1.7976931348623157E309", 1d)
```

```GRL
double_inf2: to_double("-1.7976931348623157E309", 1d)
```

```GRL
double_inf3: to_double("Infinity", 1d)
```

```GRL
double_inf4: to_double("-Infinity", 1d)
```

--------------------------------

### Run documentation locally

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/README.md

Steps to serve the frontend documentation from the local docs directory.

```bash
cd docs
```

```bash
yarn install
```

```bash
yarn run docs:server
```

--------------------------------

### React TimezoneSelect Component Example

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/src/components/common/TimezoneSelect.md

This example shows a basic React component that uses TimezoneSelect to allow users to select a time zone. It manages the selected time zone state and updates the UI accordingly. Ensure the TimezoneSelect component is imported.

```javascript
class TimezoneSelectExample extends React.Component {
  constructor() {
    this.state = {
      tz: 'Africa/Timbuktu',
    };
    this.onChange = this.onChange.bind(this);
  }

  onChange(nextTZ) {
    this.setState({ tz: nextTZ });
  }

  render() {
    const { tz } = this.state;
    return (
      <div>
        <p>Selected time zone: {tz}</p>
        <TimezoneSelect value={tz} onChange={this.onChange} />
      </div>
    );
  }
}

<TimezoneSelectExample />;
```

--------------------------------

### Build Project (Without Plugins)

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/AGENTS.md

Builds the production-ready assets for the Graylog web interface, excluding any plugins.

```bash
yarn build
```

--------------------------------

### Uncontrolled Tabs Example

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/src/components/bootstrap/Tabs.md

Demonstrates the uncontrolled usage of the Tabs component. Use `defaultValue` to set the initially active tab.

```jsx
<Tabs defaultValue="tab1">
  <Tabs.List>
    <Tabs.Tab value="tab1">Tab 1</Tabs.Tab>
    <Tabs.Tab value="tab2">Tab 2</Tabs.Tab>
    <Tabs.Tab value="tab3" disabled>
      Tab 3
    </Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel value="tab1">Tab 1 content</Tabs.Panel>
  <Tabs.Panel value="tab2">Tab 2 content</Tabs.Panel>
  <Tabs.Panel value="tab3">Tab 3 content</Tabs.Panel>
</Tabs>
```

--------------------------------

### ControlledTableList Example

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/src/components/common/ControlledTableList.md

This component renders a list of numbers using ControlledTableList. It initializes state with an Immutable.List and formats each item for display.

```javascript
import Immutable from 'immutable';
import { Col, Row } from 'components/bootstrap';

class ControlledTableListExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: Immutable.List([
        { id: '1', title: 'One', secret_key: 'uno', description: 'First number' },
        { id: '2', title: 'Two', secret_key: 'dos', description: 'Second number' },
        { id: '3', title: 'Three', secret_key: 'tres', description: 'Third number' },
        { id: '4', title: 'Four', secret_key: 'cuatro', description: 'Fourth number' },
        { id: '5', title: 'Five', secret_key: 'cinco', description: 'Fifth number' },
      ]),
    };
    this.formatItems = this.formatItems.bind(this);
  }

  formatItems(items) {
    return items.map((item) => {
      return (
        <ControlledTableList.Item key={item.id}>
          <Row className="row-sm">
            <Col md={12}>
              <h5>
                {item.title} <small>{item.description}</small>
              </h5>
            </Col>
          </Row>
          <Row className="row-sm">
            <Col md={12}>#{item.id}</Col>
          </Row>
        </ControlledTableList.Item>
      );
    });
  }

  render() {
    const { items } = this.state;

    return (
      <ControlledTableList>
        <ControlledTableList.Header>Numbers</ControlledTableList.Header>
        {this.formatItems(items)}
      </ControlledTableList>
    );
  }
}

<ControlledTableListExample />;
```

--------------------------------

### Configure development server host and port

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/README.md

Customize the host and port for the development server using command-line arguments.

```bash
yarn start --host=0.0.0.0 --port=8000
```

--------------------------------

### Simple Carousel Usage

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/src/components/common/Carousel/Carousel.md

Basic example of using the Carousel and CarouselProvider components. Ensure CarouselProvider is used to wrap the Carousel.

```tsx
import Carousel from './Carousel';
import CarouselProvider from './CarouselProvider';

<CarouselProvider>
  <Carousel>
    <Carousel.Slide>Slide 1</Carousel.Slide>
    <Carousel.Slide>Slide 2</Carousel.Slide>
    <Carousel.Slide>Slide 3</Carousel.Slide>
    <Carousel.Slide>Slide 4</Carousel.Slide>
    <Carousel.Slide>Slide 5</Carousel.Slide>
    <Carousel.Slide>Slide 6</Carousel.Slide>
    <Carousel.Slide>Slide 7</Carousel.Slide>
  </Carousel>
</CarouselProvider>;
```

--------------------------------

### Panel with Footer

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/src/components/bootstrap/Panel.md

An example of a Panel component that includes a footer. This is suitable for actions or additional information related to the panel content.

```javascript
<Panel>
  <Panel.Body>Panel content</Panel.Body>
  <Panel.Footer>Panel footer</Panel.Footer>
</Panel>
```

--------------------------------

### Implement SearchForm with controlled query string and help

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/src/components/common/SearchForm.md

Demonstrates a controlled input pattern where the query is synced with a template state and includes a custom help component.

```javascript
import { Button } from 'components/bootstrap';
import { Icon } from 'components/common';

class SearchFormExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      queryTemplate: 'test',
      query: '',
    };
    this.onQueryTemplateChange = this.onQueryTemplateChange.bind(this);
    this.onSearch = this.onSearch.bind(this);
    this.onReset = this.onReset.bind(this);
  }

  onQueryTemplateChange(e) {
    this.setState({ queryTemplate: e.target.value });
  }

  onSearch(query, resetState) {
    this.setState({ query: query });
    setTimeout(resetState, 2 * 1000);
  }

  onReset() {
    this.setState({ query: '' });
  }

  render() {
    return (
      <div>
        Query template:
        <input type="text" value={this.state.queryTemplate} onChange={this.onQueryTemplateChange} />
        <br />
        <span>Query: "{this.state.query}"</span>
        <SearchForm
          onSearch={this.onSearch}
          onReset={this.onReset}
          query={this.state.queryTemplate}
          label="Search"
          queryHelpComponent={
            <Button onClick={() => alert('help!')} bsStyle="link">
              <Icon name="help" />
            </Button>
          }
          useLoadingState
        />
      </div>
    );
  }
}

<SearchFormExample />;
```

--------------------------------

### Require modules with object destructuring

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/docs/documentation.md

Use object destructuring when requiring multiple items from the same module to keep examples concise.

```javascript
const { ButtonToolbar } = require('components/bootstrap');
```

--------------------------------

### Create Containers

Source: https://github.com/graylog2/graylog2-server/blob/master/data-node/migration/Manual-Migration.md

Command to create the containers defined in the docker-compose file.

```bash
docker compose create
```

--------------------------------

### Controlled Tabs Example

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/src/components/bootstrap/Tabs.md

Shows the controlled usage of the Tabs component. Manage the active tab state using `value` and `onChange` props.

```jsx
const TabExample = () => {
  const [activeTab, setActiveTab] = React.useState('tab1');

  return (
    <Tabs value={activeTab} onChange={setActiveTab}>
      <Tabs.List>
        <Tabs.Tab value="tab1">Tab 1</Tabs.Tab>
        <Tabs.Tab value="tab2">Tab 2</Tabs.Tab>
        <Tabs.Tab value="tab3">Tab 3</Tabs.Tab>
      </Tabs.List>
      <Tabs.Panel value="tab1">Tab 1 content</Tabs.Panel>
      <Tabs.Panel value="tab2">Tab 2 content</Tabs.Panel>
      <Tabs.Panel value="tab3">Tab 3 content</Tabs.Panel>
    </Tabs>
  );
};

<TabExample />;
```

--------------------------------

### Deprecated Panel with Longer Content

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/src/components/bootstrap/Panel.md

A deprecated example of a Panel component with longer content and a style variant. Use standard Panel structure and props.

```javascript
<Panel bsStyle="info">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, expedita eveniet, exercitationem, iure corporis quae
  inventore excepturi saepe laudantium consequatur facere labore reiciendis recusandae adipisci alias explicabo?
  <br />
  Quidem, consectetur sunt.Enim placeat amet cum eum quidem autem accusamus quam modi temporibus mollitia dolores iste
  aliquam tenetur officia, laboriosam totam, ratione velit! Architecto reiciendis quod aliquid impedit obcaecati
  exercitationem quis amet!
</Panel>
```

--------------------------------

### Build Plugin JAR with Maven

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog-plugin-archetype/src/main/resources/archetype-resources/README.md

Build a JAR file for your plugin using Maven. This command also provides options to create DEB and RPM packages.

```bash
mvn package
```

```bash
mvn jdeb:jdeb
```

```bash
mvn rpm:rpm
```

--------------------------------

### Consume Plugin Entities

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/AGENTS.md

Example of how to consume plugin entities using the `usePluginEntities` hook. The hook takes a `key` to retrieve specific plugin data.

```typescript
usePluginEntities('key')
```

--------------------------------

### Simple Dropzone Usage

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/src/components/common/Dropzone.md

Demonstrates basic usage of the Dropzone component, including file drop and rejection handlers, accepted file types, and maximum file size. Requires styled-components and Icon components.

```tsx
import styled from 'styled-components';
import { Icon } from 'components/common';

const DropzoneInner = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
`;

<Dropzone
  onDrop={() => alert('File dropped!')}
  onReject={() => alert('File rejected!')}
  accept={['image/png', 'image/jpeg']}
  maxSize={1024 * 1024}
  loading={false}>
  <DropzoneInner>
    <Dropzone.Accept>
      <Icon name="image" type="regular" size="2x" />
    </Dropzone.Accept>
    <Dropzone.Reject>
      <Icon name="warning" size="2x" />
    </Dropzone.Reject>
    <Dropzone.Idle>
      <Icon name="image" type="regular" size="2x" />
    </Dropzone.Idle>
    <div>Drag an image here or click to select file</div>
  </DropzoneInner>
</Dropzone>;
```

--------------------------------

### Simple PageHeader implementation

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/src/components/common/PageHeader.md

Displays a basic header with a title and a simple description.

```js
<PageHeader title="This is a simple page">
  <span>Here goes the page description</span>
</PageHeader>
```

--------------------------------

### Perform Lookups in Graylog Pipeline Rules

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-server/src/test/resources/org/graylog/plugins/pipelineprocessor/functions/lookupAll.txt

Demonstrates how to use lookup_all with JSON path results, static arrays, and single values within a pipeline rule.

```Graylog Processing Language
rule "lookup_all"
when
    true
then
    let json = parse_json(to_string($message.json_with_arrays));
            let selectedPath = select_jsonpath(json: json,
                paths: {strings: "$.strings[*].value"});

    set_field("json_results", lookup_all("table", selectedPath.strings));
    set_field("results", lookup_all("table", ["one", "two", "three"]));
    set_field("single_result", lookup_all("table", "one"));

    trigger_test();
end
```

--------------------------------

### Configure build path

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/packages/graylog-web-plugin/README.md

Create a build.config.js file to specify the path to your Graylog git repository checkout. This configuration is used by the plugin archetype.

```javascript
module.exports = {
  web_src_path: '<path to your Graylog git repository>',
};

```

--------------------------------

### Parse CSV with Strict Quotes

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-server/src/test/resources/org/graylog/plugins/pipelineprocessor/functions/csvMap.txt

This example demonstrates parsing CSV with single quotes and strict quote handling. `strictQuotes: true` ensures that quotes are handled precisely.

```GRL
let csv = "'v1','v2'extra,'v3'";
    let map =  csv_to_map(
        value: csv,
        fieldNames: "'k1','k2','k3'",
        quoteChar: "'",
        strictQuotes: true
    );
    set_fields(fields: map, prefix: "test4_");
```

--------------------------------

### Parse CSV with Custom Separator

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-server/src/test/resources/org/graylog/plugins/pipelineprocessor/functions/csvMap.txt

This example shows how to parse a CSV string that uses a semicolon as a separator. The `separator` parameter is set to ";ignorerest" to handle this.

```GRL
let csv = "v1;v2;v3";
    let map =  csv_to_map(
        value: csv,
        fieldNames: "k1;k2;k3",
        separator: ";ignorerest"
    );
    set_fields(fields: map, prefix: "test2_");
```

--------------------------------

### Example Graylog Processing Rule

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-server/src/test/resources/org/graylog/plugins/pipelineprocessor/functions/messages/loopPreventionWorkaround1.txt

A basic processing rule that clones a message, routes it to another stream, and removes it from the default stream. This is useful for message duplication and conditional routing.

```Groovy
rule "test rule"
when
    true
then
    let newmsg = clone_message();
    route_to_stream(name: "other stream", message: newmsg);
    remove_from_stream(name: "default stream", message: newmsg);
end
```

--------------------------------

### Restart Graylog

Source: https://github.com/graylog2/graylog2-server/blob/master/data-node/migration/Manual-Migration.md

Bring up Graylog again after disabling the Preflight UI. You should now be able to log in with your regular credentials.

```bash
docker compose create graylog1
docker compose up -d graylog1
```

--------------------------------

### Import Color Utilities

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-web-interface/src/theme/docs/Utilities.md

Import the useTheme hook to access color utilities from styled-components.

```javascript
import { useTheme } from 'styled-components';
const { utils } = useTheme();
```

--------------------------------

### Default Null Handling Examples

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-server/src/test/resources/org/graylog/plugins/pipelineprocessor/functions/conversions.txt

Illustrates using `defaultToNull: true` for various conversion functions. When the input field is missing, these functions will return null instead of a default value.

```GRL
string_default_null: to_string(value: $message.not_there, defaultToNull:true)
```

```GRL
long_default_null: to_long(value: $message.not_there, defaultToNull:true)
```

```GRL
double_default_null: to_double(value: $message.not_there, defaultToNull:true)
```

```GRL
bool_default_null: to_bool(value: $message.not_there, defaultToNull:true)
```

```GRL
ip_default_null: to_ip(ip: $message.not_there, defaultToNull:true)
```

```GRL
map_default_null: to_map(value: $message.not_there, defaultToNull:true)
```

```GRL
list_default_null: to_list(value: $message.not_there, defaultToNull:true)
```

```GRL
string_default_null_set_single_field: to_long(value: $message.not_there, defaultToNull:true)
```

```GRL
long_default_null_set_single_field: to_long(value: $message.not_there, defaultToNull:true)
```

```GRL
double_default_null_set_single_field: to_double(value: $message.not_there, defaultToNull:true)
```

```GRL
bool_default_null_set_single_field: to_bool(value: $message.not_there, defaultToNull:true)
```

```GRL
ip_default_null_set_single_field: to_ip(ip: $message.not_there, defaultToNull:true)
```

```GRL
map_default_null_set_single_field: to_map(value: $message.not_there, defaultToNull:true)
```

```GRL
list_default_null_set_single_field: to_list(value: $message.not_there, defaultToNull:true)
```

--------------------------------

### Date Math Operations in Graylog Rules

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-server/src/test/resources/org/graylog/plugins/pipelineprocessor/functions/dateArithmetic.txt

Demonstrates date and time manipulation using various units like years, months, days, hours, minutes, seconds, and milliseconds. It also shows how to use ISO 8601 periods and check if a value is a period. Use this for time-based event correlation and analysis.

```GRL
// now() is fixed to "2010-07-30T18:03:25+02:00" to provide a better testing experience
rule "date math"
when
    now() + years(1) > now() &&
    now() + months(1) > now() &&
    now() + weeks(1) > now() &&
    now() + days(1) > now() &&
    now() + hours(1) > now() &&
    now() + minutes(1) > now() &&
    now() + seconds(1) > now() &&
    now() + millis(1) > now() &&
    now() + period("P1YT1M") > now() &&

    now() - years(1) < now() &&
    now() - months(1) < now() &&
    now() - weeks(1) < now() &&
    now() - days(1) < now() &&
    now() - hours(1) < now() &&
    now() - minutes(1) < now() &&
    now() - seconds(1) < now() &&
    now() - millis(1) < now() &&
    now() - period("P1YT1M") < now() &&

    is_period(years(1)) == true &&
    is_period(months(1)) == true &&
    is_period(weeks(1)) == true &&
    is_period(days(1)) == true &&
    is_period(hours(1)) == true &&
    is_period(minutes(1)) == true &&
    is_period(seconds(1)) == true &&
    is_period(millis(1)) == true &&
    is_period(period("P1YT1M")) == true &&
    is_period("foobar") == false &&
    is_period(1234) == false &&
    is_period(12.34) == false &&
    is_period(true) == false
then
    set_field("interval", now() - (now() - days(1))); // is a duration of 1 day
    set_field("long_time_ago", now() - years(10000));
    set_fields({
      years: years(2),
      months: months(2),
      weeks: weeks(2),
      days: days(2),
      hours: hours(2),
      minutes: minutes(2),
      seconds: seconds(2),
      millis: millis(2),
      period: period("P1YT1M")
    });
    set_field("timestamp", to_date($message.timestamp) + hours(1));

    trigger_test();
end
```

--------------------------------

### Ignore Extra Field Names Explicitly

Source: https://github.com/graylog2/graylog2-server/blob/master/graylog2-server/src/test/resources/org/graylog/plugins/pipelineprocessor/functions/csvMap.txt

This example explicitly uses `ignoreExtraFieldNames: true` to ensure that extra field names provided in `fieldNames` are ignored when the CSV has fewer values.

```GRL
let csv = "v1,v2,v3";
        let map =  csv_to_map(
            value: csv,
            fieldNames: "k1,k2,k3,k4",
            ignoreExtraFieldNames: true
        );
    set_fields(fields: map, prefix: "ignore_extra_field_names_");
```