How can I make report HTML like in README

amarc commented 4 years ago

Hello,

found about dsnet today and I am loving it. Thanks.

Care to share how can I make same, identical table like in your README from .json ?

https://raw.githubusercontent.com/naggie/dsnet/master/etc/report.png

Thanks, A.

naggie commented 4 years ago

found about dsnet today and I am loving it. Thanks.

I'm glad you like it!

Care to share how can I make same, identical table like in your README from .json ?

The report was generated using hugo, a static site generator on a cron job. I've added the shortcode to the repository so you can use it with hugo for yourself: https://github.com/naggie/dsnet/blob/master/etc/dsnetreport.html

Hugo, and shortcode documentation is here: https://gohugo.io/content-management/shortcodes/

As the report, which can be generated with sudo dsnet report to /var/lib/dsnetreport.json is just a json file, you could use anything to render it to HTML. Even perhaps using clientside javascript.

amarc commented 4 years ago

Thanks, looking at Hugo now.. I am not very familiar with it but it looks above html should be placed in /layouts/shortcodes/ and than called on Hugo page with

? Thanks

naggie commented 4 years ago

Yes, though the shortcode name is the filename:

{{< dsnetreport >}}

With the report, dsnetreport.json in data/

amarc commented 4 years ago

Thanks,

for some reason when I put {{< dsnetreport />}} in report.md (eaxmple page..) I get when running Hugo server:

failed to extract shortcode: shortcode ">}}" has no .Inner, yet a closing tag was provided when I put {{< dsnetreport >}} (without /) server runs fine but my page looks.. bad :) like this:

https://imgur.com/vCG4U1y

Not sure if it's theme related, I picked "Nix"

naggie commented 4 years ago

Yes, my mistake, no / required -- corrected.

You'll need some css, any table css will do, such as:

table {
    width: 100%;
    border-collapse: collapse;
    margin: 80px 0;
    user-select: text;
}

table caption {
    caption-side: bottom;
    text-align:left;
    color:var(--text-muted);
    margin-top:10px;
}

table th, table td {
    text-align:left;
    padding:10px 5px;
    padding:0.6em;
}

table th {
    border-bottom:1px solid var(--heading);
    color:var(--heading);
}

table tr.dormant {
    opacity:0.3;
}

table tr:nth-child(even) {
    background: var(--bg-highlight);
}

table td.indicator-green::before,
table td.indicator-amber::before,
table td.indicator-red::before,
table td.indicator-null::before {
    display:inline-block;
    content:"";
    margin-right:0.4em;
    width:0.5em;
    height:0.5em;
    /* ensure solid colours are same size as null */
    border: 0.05em solid rgba(0,0,0,0);
}

table td.indicator-green::before { background:#00ff00; box-shadow: 0 0 0.5em rgba(100,255,100,0.5)}
table td.indicator-amber::before { background:orange; }
table td.indicator-red::before { background:red; }
table td.indicator-null::before { background:black; border: 0.05em solid var(--text-faint) }

Define the css variables above, or replace them with colours of you choice.

amarc commented 4 years ago

Looks much better now, will play with colours a bit. Thanks 👍

Write commented 4 years ago

Didn't really know where to put this. Just wanted to share my php file for anyone who might be interested. It use https://newcss.net/ classless framework (which is responsive and support system-wide light/dark mode) with few modifications.

Light mode Preview

Screenshot_1

Dark mode Preview

Screenshot_2

Note : If you have issue with table width, you might try to change max-width value in body {}

Feel free to copy, modify, share, enhance it

<?php
/* Look for wireguard.json in current directory */
/* Change "ReportFile": "/path/wireguard.json" accordingly */
$json = file_get_contents(__DIR__.'/wireguard.json');
$decoded_json = json_decode($json, true);
$ip = $decoded_json['ExternalIP'];
$total = $decoded_json['PeersTotal'];
$online = $decoded_json['PeersOnline'];
$peers = $decoded_json['Peers'];
?>
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://newcss.net/new.min.css">
    <style>
        html {
            -webkit-text-size-adjust: none;
            touch-action: none;
        }
        body {
            max-width: 800px;
        }
        table {
            white-space: nowrap;
            display: block;
            overflow-x: auto;
        }
        small {
            font-size: 0.75rem;
        }
        mark {
            color: whitesmoke;
        }
        muted {
            color: #0000008c;
        }
        .square {
          height: 15px;
          width: 15px;
          margin: auto;
        }
        .on {
          background-color: #22e665;
          box-shadow: 0px 0px 10px #22e665a8;
        }
        .off {
          background-color: #e62259;
        }
        tr {
            background: var(--nc-bg-1);
        }
        @media (prefers-color-scheme: dark) {
            :root {
                --nc-tx-1: #d7e6fb;
                --nc-tx-2: #c7d4e6;
            }
            mark {
                color: var(--nc-ac-tx);
            }
            muted {
                color: #ffffff75;
            }
        }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimium-scale=1.0, user-scalable=no" />
    <title>WireGuard Peers</title>
</head>
<body>
    <header>
        <h2>
            WireGuard
        </h2>
    </header>
    <p>WireGuard Peers</p>
    <table>
        <thead>
            <tr>
                <th>Hostname</th>
                <th>Status</th>
                <th>IP</th>
                <th>Owner</th>
                <th>Description</th>
                <th>Up</th>
                <th>Down</th>
            </tr>
        </thead>
        <tbody>
            <?php
            foreach($peers as $key=>$value){
            ?>
            <tr>
                <?php
                echo '<td>'.$value['Hostname'].'</td>';
                echo '<td>'.($value['Online'] ? '<div class="square on"></div>' : '<div class="square off"></div>').'</td>';
                echo '<td>'.$value['IP'].'</td>';
                echo '<td>'.$value['Owner'].'</td>';
                echo '<td>'.$value['Description'].'</td>';
                echo '<td>'.$value['ReceiveBytesSI'].'</td>';
                echo '<td>'.$value['TransmitBytesSI'].'</td>';
                ?>
            </tr>
            <?php
            }
            ?>
        </tbody>
    </table>
    <em>
        <?php echo $online. ' of '.$total.' devices connected'; ?>
    </em>
    <hr>
    <em>
        <?php
        foreach($peers as $key=>$value) {
            $date_str = substr($value['LastHandshakeTime'], 0, 19);
            $d2=new DateTime($date_str);
            echo '<muted><small>'.$value['Hostname'].' • Handshake : '. $d2->format("d-m \a\\t H:i:s").'</small></muted><br/>';
        }
        ?>
    </em>
</body>
</html>

naggie commented 4 years ago

Ha! That's really cool, thanks. Perhaps it could go in the repository under /etc/? PR welcome

amarc commented 4 years ago

This is great @Write thanks. Will try next week how it integrates with my needs.

amarc commented 4 years ago

@Write maybe it's not obvious to me, but is there "quick switch" on above .php from light to dark mode and vice versa ?

tnx.

Write commented 4 years ago

@amarc the theme change automatically based on your system settings (not browser). On macOS & iOS there's a dark mode included which you can setup to change automatically based on the hour of the day. On windows i use this excellent tools https://github.com/Armin2208/Windows-Auto-Night-Mode to get the same behavior.

So there's no switch unfortunately. It use the native media query "@media (prefers-color-scheme: dark)" which most recent browser support to change css based on the system dark/light mode settings.

frillip commented 4 years ago

@naggie did someone say clientside JavaScript?

Just about to drop a PR in

naggie commented 4 years ago

I'll close this as documentation now makes this easy.

naggie / dsnet

How can I make report HTML like in README #4