31:T56d,# Public: Juniper SSR metrics Netwerk Solutions installs Juniper Session Smart (SSR) routers in most of their locations. These locations contain one or more gateways (hubs) that provide access to the internet and collect network statistics. Each hub can contain one or more nodes which work in unison to provide a stable internet connection to the location they’re assigned to. Mid-May, Netwerk Solutions wondered if it would be possible to provide information on all the nodes within an organization in a tabular format. This resulted in the creation of the SSR insights notebook, which provides a table with information about every node and shows statistics such as node and hub uptime, the hub’s last seen date, the throughput of RX/TX bytes and many more statistics. These additional metrics provide better insight into the network’s activity and status. Figure 1 shows the juniper insight metrics, in [Table 1](#WANStatusGrid) below the increase in insights can be seen.

${await FileAttachment("image@2.png").image()}

Fig 1: Juniper SSR table (the data within this image is for illustration purposes only).

Another critical difference is that the Juniper table only shows hub-wide metrics and thus does not show the status and information of each of the node(s) that are part of each hub. 32:Ta2e,viewof WANStatusGrid = { const grid = html`

`; yield grid; const columnDefs = [ { headerName: "Site Name", field: "site_name", // rowGroup: true, // hide: true, filter: true }, // { // headerName: "Hub Name", // field: "router_name", // rowGroup: true, // hide: true, // filter: true // }, { headerName: "Node Name", valueGetter: ({ data }) => ({ router_name: data?.router_name, node_name: data?.node_name }), cellRenderer: ({ value }) => { const { router_name, node_name } = value; if (isNil(router_name, node_name)) return ""; return `${router_name} / ${node_name}`; }, width: 300 }, { headerName: "Last seen", field: "hub_last_seen", cellRenderer: ({ value: seconds }) => { if (_.isNil(seconds)) return ""; return luxon.DateTime.fromSeconds(seconds).toFormat("tt, LLL d"); } }, createStatusColDef("Hub status", "hub_status"), createUptimeColDef("Node Uptime"), // { headerName: "Avg Client Count", field: "num_clients" }, createHealthColDef("WAN Edge Health", "gateway_health"), createHealthColDef("WAN Link Health", "wan_link_health"), createSparkLineColDef("# IPs", "num_ips"), createSparkLineColDef("RX bytes", "rx_bytes"), createSparkLineColDef("TX bytes", "tx_bytes"), { headerName: "24H Bandwidth usage (RX/TX)", field: "metrics", cellRenderer: ({ value: metrics }) => { if (_.isNil(metrics)) return ""; return dailyBandwidthUsage(metrics); }, width: 240 }, createSparkLineColDef("RX port errors", "port_rx_errors"), createSparkLineColDef("TX port errors", "port_tx_errors"), createColumnSparkLineColDef("AVG CPU", "avg_cpu", { valueAxisDomain: [0, 100] }), createColumnSparkLineColDef("AVG Memory", "avg_memory", { valueAxisDomain: [0, 100] }), createColumnSparkLineColDef("AVG LTE RSSI", "avg_rssi", { valueAxisDomain: [-255, 0] }), createSparkLineColDef("AVG LTE SNR", "avg_snr") ]; // let the grid know which columns and what data to use const gridOptions = { defaultColDef: { sortable: true, resizable: true }, columnDefs: columnDefs, rowData: ssr_metrics, rowSelection: "single", groupDisplayType: "multipleColumns", onGridReady: (event) => setGridValue({ grid, gridOptions }) }; new AgGrid.Grid(grid, gridOptions); }33:[{"id":"976d1c2ae565314ece33188f620813ad3fe769be88ccc55c945d93ce533873fc61a9e066f8c0cc8e90c7538e2c623b22f9b0cc0ac10ecf16ebaf6dbef5df8993","href":"https://static.observableusercontent.com/files/976d1c2ae565314ece33188f620813ad3fe769be88ccc55c945d93ce533873fc61a9e066f8c0cc8e90c7538e2c623b22f9b0cc0ac10ecf16ebaf6dbef5df8993","name":"ssr_metrics@1.json","type":"application/json","lastModified":1656669145612.759,"size":1338388},{"id":"e5f9ddb5adb5a039028af2cf487e70446bafd992b9421f7241ca11fb7e3e4bba92fcacd31bfd738118a0f3c9f0a15ca94d4af8d277cdb93c92741197526e943b","href":"https://static.observableusercontent.com/files/e5f9ddb5adb5a039028af2cf487e70446bafd992b9421f7241ca11fb7e3e4bba92fcacd31bfd738118a0f3c9f0a15ca94d4af8d277cdb93c92741197526e943b","name":"image@2.png","type":"image/png","lastModified":1656669517518.397,"size":31342}] 2f:{"title":"Public: Juniper SSR metrics","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"createHint({\n content: `\n This notebook was snapshotted and **does not** provide a live view of the data.\n **Snapshot date: _06/06/2022_**\n `,\n type: \"warn\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2833,"value":"createHint({\n content: `_**Note:** Hover tooltips **do not** work when the grid is in fullscreen._`,\n type: \"info\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1877,"value":"Inputs.button(\"GRID fullscreen\", {\n reduce: () => WANStatusGrid.element.webkitRequestFullscreen()\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1150,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2764,"value":"

Table 1: Custom SSR insights table.

","pinned":false,"hidden":false,"mode":"html"},{"id":58,"value":"## Variables","pinned":false,"hidden":false,"mode":"md"},{"id":2679,"value":"ssr_metrics = FileAttachment(\"ssr_metrics@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1026,"value":"## Functions","pinned":false,"hidden":false,"mode":"md"},{"id":1852,"value":"## AG Grid ColDef functions","pinned":false,"hidden":false,"mode":"md"},{"id":1813,"value":"function createStatusColDef(headerName, field) {\n const cellClassRules = {\n cellSuccess: (params) => params.value == \"connected\",\n cellError: (params) => params.value == \"disconnected\"\n };\n\n return {\n cellClassRules: cellClassRules,\n sort: 'desc',\n headerName,\n field\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1808,"value":"createUptimeColDef = (headerName) => {\n const cellClassRules = {\n cellInfo: ({ value }) => {\n const { uptime, hub_uptime } = value;\n if (isNil(uptime, hub_uptime)) return false;\n return uptime == hub_uptime;\n },\n cellInfoLowOpacity: ({ value }) => {\n const { uptime, hub_uptime } = value;\n if (isNil(uptime, hub_uptime)) return false;\n return uptime != hub_uptime;\n }\n };\n\n return {\n headerName,\n cellClassRules: cellClassRules,\n cellStyle: {\n \"white-space\": \"break-spaces\"\n },\n valueGetter: ({ data }) => ({\n uptime: data.uptime,\n hub_uptime: data.hub_uptime,\n hub_status: data.hub_status\n }),\n cellRenderer: ({ value }) => {\n const { uptime: seconds, hub_status } = value;\n if (isNil(seconds, hub_status)) return \"\";\n if (hub_status == \"disconnected\") return \"-\";\n return luxon.Duration.fromMillis(seconds * 1000).toFormat(\n `d'd' hh'h' mm'm'`\n );\n },\n width: 150\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1771,"value":"function createHealthColDef(headerName, field) {\n const cellClassRules = {\n cellSuccess: (params) => params.value >= 0.8,\n cellWarn: (params) => params.value >= 0.5 && params.value < 0.8,\n cellError: (params) => params.value < 0.5\n };\n\n return {\n cellClassRules: cellClassRules,\n cellRenderer: percentageRenderer,\n headerName,\n field\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1763,"value":"createSparkLineColDef = (headerName, metric, showToolTip = true) => {\n return {\n headerName,\n valueGetter: ({ data }) => convertMetricsToAgGridSparkLine(data, metric),\n cellRenderer: \"agSparklineCellRenderer\",\n cellRendererParams: {\n sparklineOptions: {\n type: \"area\",\n tooltip: {\n enabled: showToolTip,\n renderer: tooltipRenderer\n },\n axis: {\n type: \"time\"\n },\n marker: {\n size: 2\n }\n }\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2576,"value":"createColumnSparkLineColDef = (headerName, metric, params = {}) => {\n const { showToolTip = true, valueAxisDomain } = params;\n return {\n headerName,\n valueGetter: ({ data }) => convertMetricsToAgGridSparkLine(data, metric),\n cellRenderer: \"agSparklineCellRenderer\",\n cellRendererParams: {\n sparklineOptions: {\n type: \"column\",\n tooltip: {\n enabled: showToolTip,\n renderer: tooltipRenderer\n },\n axis: {\n type: \"time\"\n },\n ...(!_.isNil(valueAxisDomain) && { valueAxisDomain }),\n marker: {\n size: 2\n }\n }\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1858,"value":"## AG Grid Renderer functions","pinned":false,"hidden":false,"mode":"md"},{"id":1760,"value":"function percentageRenderer({ value }) {\n if (!_.isNumber(value)) return \"\";\n if (value == -1) {\n return \"-\";\n }\n\n const percentage = value * 100;\n if (percentage > 99 && percentage < 100) {\n return `> 99%`;\n }\n\n return `${_.round(percentage)}%`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2241,"value":"function tooltipRenderer(params) {\n console.log(params);\n const { yValue, xValue } = params;\n return {\n title: luxon.DateTime.fromJSDate(xValue).toFormat(\"dd-MM-yyyy HH:mm\"), // formats date X values\n content: yValue // format Y number values\n };\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1861,"value":"## AG Grid Helper functions","pinned":false,"hidden":false,"mode":"md"},{"id":2121,"value":"function dailyBandwidthUsage(metrics) {\n const tx_bandwidth = _.sumBy(metrics[\"tx_bytes\"], \"tx_bytes\");\n const rx_bandwidth = _.sumBy(metrics[\"rx_bytes\"], \"rx_bytes\");\n return humanize.filesize(tx_bandwidth + rx_bandwidth);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1642,"value":"function convertMetricsToAgGridSparkLine(data, metricName) {\n const metric = data?.metrics?.[metricName];\n if (!metric?.length) return [];\n return metric.map((row) => ({\n x: luxon.DateTime.fromISO(row.date, {\n setZone: true,\n locale: \"Europe/Amsterdam\"\n }).toJSDate(),\n y: row[metricName]\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1152,"value":"function setGridValue({ grid, gridOptions, value = \"\" } = {}) {\n grid.value = {\n element: grid,\n options: gridOptions,\n value\n };\n grid.dispatchEvent(new CustomEvent(\"input\"));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2049,"value":"function isNil(...args) {\n return _.some(args, _.isNil);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1867,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":1219,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":25,"value":"### Hint dialogs\nThe hint dialogs that you can see above the tables (e.g. the row-selection information dialogs) are created using the following imported notebook function.","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"import { createHint } from \"@selenecodes/hint-containers\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"## Luxon\nLuxon is used for date and time calculations within this notebook.","pinned":false,"hidden":false,"mode":"md"},{"id":452,"value":"luxon = require(\"luxon@2.3.1/build/amd/luxon.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1118,"value":"### AG Grid\nBelow we import the package AG-grid and import the accompanying styles.","pinned":false,"hidden":false,"mode":"md"},{"id":1117,"value":"AgGrid = {\n document.head.appendChild(\n html``\n );\n const enterprise = await require(\"ag-grid-enterprise@27.3.0/dist/ag-grid-enterprise.js\");\n enterprise.LicenseManager.setLicenseKey(\n \"For_Trialing_ag-Grid_Only-Not_For_Real_Development_Or_Production_Projects-Valid_Until-28_May_2022_[v2]_MTY1MzY5MjQwMDAwMA==301756ab2f436f51e838c3cb06ea6833\"\n );\n return enterprise;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1718,"value":"## Humanize\nHumanize is a package which is used in some of the graphs when representing bytes/gigabytes etc. One of humanize's functions is to convert bytes into it's closest human-readable string. E.g. 1 byte = 1 byte, 1024 bytes = 1 kilobyte etc.","pinned":false,"hidden":false,"mode":"md"},{"id":1716,"value":"humanize = require(\"humanize@0.0.9/humanize.js\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}