import { Code, Table, Td, Th, Tr } from "nextra/components";
import { Callout } from "nextra-theme-docs";
import platforms from "~/platforms.json";
import { Supported } from "./platforms.mdx";

export const Platforms = () => (
    <ul>
        {platforms.reduce((final, platform) => {
            if (platform.native) {
                const element = (
                    <li key={platform.name}>
                        <Supported style={{ display: "inline", marginRight: "0.5rem" }} />
                        {platform.name}
                    </li>
                );
                final = [...final, element];
            }
            return final;
        }, [])}
    </ul>
);

Once you've gotten started with a basic configuration, you'll probably want to customize the look and feel of hyperglass by changing the logo or color scheme. Fortunately, there are _a lot_ ways to customize hyperglass.

## Configuration Files

| File Name    | Purpose                                                                    |
| :----------- | :------------------------------------------------------------------------- |
| `config`     | Application-wide configuration such as logging, web UI customization, etc. |
| `devices`    | Your devices and their associated configurations.                          |
| `directives` | Custom [directives](configuration/directives.mdx) (commands).              |

<Callout type="info">
    **File Extensions** <br />
    All the examples in the docs are provided in [YAML](https://yaml.org/) format, but [TOML](https://toml.io/),
    JSON, and Python files are also supported.
</Callout>

### Using a Python File

When using a Python file for a hyperglass configuration, one of the following methods may be used:

#### Define a Function Named `main`

```python filename="Example: Using a Python function to define configuration parameters"
def main():
  return {
    "org_name": "Your Organization Name",
    "web": {
      "theme": {
        "colors": {
          "blue": "#0000ff",
        }
      }
    }
  }

# The main function can also be an async function.
async def main():
  config = await some_function_to_fetch_config()
  return config
```

#### Define a Dictionary Named `main`

```python filename="Example: Using a Python dictionary to define configuration parameters"
main = {
    "org_name": "Your Organization Name",
    "web": {
      "theme": {
        "colors": {
          "blue": "#0000ff",
        }
      }
    }
  }
```

## Built-in Directives

hyperglass ships with predefined [directives](configuration/directives.mdx) for the following [platforms](platforms.mdx):

<Platforms />

All built in directives require that the following `attrs` be defined on each device using the directive:

| Attribute | Value                                                     |
| :-------- | :-------------------------------------------------------- |
| `source4` | IPv4 address used to source Ping and Traceroute commands. |
| `source6` | IPv6 address used to source Ping and Traceroute commands. |

<Callout type="warning">
    If you do not utilize IPv6 in your network, you'll need to create your own directive that only
    has IPv4 commands.
</Callout>
