Feature: Technitium DNS Widget

bobby-driggs commented 1 month ago

Proposed change

Adds a new service widget for Technitium DNS Server, based on their Dashboard API

The above API call takes the format of: <server ip / domain>/api/dashboard/stats/get?token=<api-token>&type=<time_range>&utc=true

The following query string parameters are used

token: Is the api token that can be created on the Technitium DNS dashboard, this is a permanant token that wont expire, that is specifically used to API calls.
type: Is really a date range, and can be one of: [LastHour, LastDay, LastWeek, LastMonth, LastYear]

The response of this API call returns a lot of information, but the one this widget cares about, is the response.stats property that has the following data:

{
    "response": {
        "stats": {
            "totalQueries": 52321,
            "totalNoError": 49112,
            "totalServerFailure": 107,
            "totalNxDomain": 3102,
            "totalRefused": 0,
            "totalAuthoritative": 3393,
            "totalRecursive": 36952,
            "totalCached": 11976,
            "totalBlocked": 0,
            "totalDropped": 0,
            "totalClients": 4,
            "zones": 11,
            "cachedEntries": 15867,
            "allowedZones": 0,
            "blockedZones": 0,
            "allowListZones": 0,
            "blockListZones": 0
        },
    // additional properties removed for brevity ...
}

The above block is what gets translated to the data the component gets using the useWidgetAPI call.

I have a max 4 fields set as a default (as i saw utilized in other widgets), and a user can select which fields they would like to use.

Here is an example of its service configuration:

    - Technitium:
        icon: technitium.png
        href: https://tdns.example.org
        description: T-DNS
        widget:
            type: technitium
            url: https://tdns.example.org
            key: <api_token>
            range: LastDay # optional, defaults to LastHour

Here is a screenshot of how i would personally use it, next to my Pi Hole widgets:

And here is a screenshot of the actual Technitium DNS dashboard for comparison:

I saw Technitium was mentioned back in 2023, with a handful of upvotes, so I thought Id take a stab at it.

Related issue: https://github.com/gethomepage/homepage/issues/1152 Related discussion: https://github.com/gethomepage/homepage/discussions/1319 (20 upvotes as of 8/2024)

Type of change

[X] New service widget

Checklist:

[X] If applicable, I have added corresponding documentation changes.
[X] If applicable, I have reviewed the feature and / or service widget guidelines.
[X] I have checked that all code style checks pass using pre-commit hooks and linting checks.

bobby-driggs commented 1 month ago

Sorry for the noise, i setup pre-commit and things should be good now. also i amin a dev container and the pnpm run lint wasnt working for me. complaining about some library.

EDIT: Heres the error, but I think it a me thing, maybe a node version issue, unclear. But the pre-commit worked for me


node ➜ /workspaces/homepage (AddWidget-Technitium) $ pnpm run lint

> startpage@0.1.0 lint /workspaces/homepage
> next lint

Failed to load plugin 'jsx-a11y' declared in '.eslintrc.json » eslint-config-next/core-web-vitals » /workspaces/homepage/node_modules/.pnpm/eslint-config-next@14.2.3_eslint@8.57.0_typescript@5.4.5/node_modules/eslint-config-next/index.js': `[[GeneratorState]]` is not present on `O`
 ELIFECYCLE  Command failed with exit code 1.
 ```

IconicLight commented 3 weeks ago

@bobby-driggs Thanks for this. Been waiting on a widget for Technitium. Appreciate your work on this. Works great!

gethomepage / homepage