HA Cluster Metrics Plugin

Plugin File Structure

ha-cluster-metrics/
├── ha-cluster-metrics.php
├── includes/
│   ├── ha-cluster-metrics-admin.php
│   ├── ha-cluster-metrics-api.php
├── assets/
│   ├── js/
│   │   └── ha-cluster-metrics.js
│   └── css/
│       └── ha-cluster-metrics.css

Main Plugin File

ha-cluster-metrics.php

<?php
/**
 * Plugin Name: HA Cluster Metrics
 * Description: A plugin to interface with HA cluster and display metrics as charts in WordPress admin.
 * Version: 1.0.0
 * Author: Your Name
 */

// Prevent direct access
if (!defined('ABSPATH')) {
    exit;
}

// Define plugin constants
define('HA_CLUSTER_METRICS_PATH', plugin_dir_path(__FILE__));
define('HA_CLUSTER_METRICS_URL', plugin_dir_url(__FILE__));

// Include required files
require_once HA_CLUSTER_METRICS_PATH . 'includes/ha-cluster-metrics-admin.php';
require_once HA_CLUSTER_METRICS_PATH . 'includes/ha-cluster-metrics-api.php';

// Enqueue scripts and styles
function ha_cluster_metrics_enqueue_assets() {
    wp_enqueue_style('ha-cluster-metrics-css', HA_CLUSTER_METRICS_URL . 'assets/css/ha-cluster-metrics.css');
    wp_enqueue_script('ha-cluster-metrics-js', HA_CLUSTER_METRICS_URL . 'assets/js/ha-cluster-metrics.js', array('jquery'), null, true);
    wp_enqueue_script('chart-js', 'https://cdn.jsdelivr.net/npm/chart.js', array(), null, true);
}
add_action('admin_enqueue_scripts', 'ha_cluster_metrics_enqueue_assets');

Create the Admin Menu Page

includes/ha-cluster-metrics-admin.php

<?php
// Add admin menu
function ha_cluster_metrics_admin_menu() {
    add_menu_page(
        'HA Cluster Metrics',
        'HA Cluster Metrics',
        'manage_options',
        'ha-cluster-metrics',
        'ha_cluster_metrics_page_content',
        'dashicons-chart-line',
        100
    );
}
add_action('admin_menu', 'ha_cluster_metrics_admin_menu');

// Admin page content
function ha_cluster_metrics_page_content() {
    ?>
    <div class="wrap">
        <h1>HA Cluster Metrics</h1>
        <canvas id="haClusterMetricsChart" width="400" height="200"></canvas>
    </div>
    <?php
}

Fetch Metrics from the Cluster

includes/ha-cluster-metrics-api.php

<?php
// Fetch metrics from the cluster
function ha_cluster_metrics_fetch_data() {
    // Dummy data for example purposes
    $data = array(
        'labels' => ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        'data' => [65, 59, 80, 81, 56, 55, 40]
    );

    wp_send_json_success($data);
}
add_action('wp_ajax_ha_cluster_metrics_fetch_data', 'ha_cluster_metrics_fetch_data');

Create JavaScript to Handle Charts

assets/js/ha-cluster-metrics.js

jQuery(document).ready(function($) {
    function fetchMetricsData() {
        $.ajax({
            url: ajaxurl,
            method: 'POST',
            data: {
                action: 'ha_cluster_metrics_fetch_data'
            },
            success: function(response) {
                if (response.success) {
                    renderChart(response.data);
                }
            }
        });
    }

    function renderChart(data) {
        var ctx = document.getElementById('haClusterMetricsChart').getContext('2d');
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: data.labels,
                datasets: [{
                    label: 'Cluster Metrics',
                    data: data.data,
                    borderColor: 'rgba(75, 192, 192, 1)',
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                scales: {
                    x: {
                        beginAtZero: true
                    },
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    }

    fetchMetricsData();
});

Create CSS for Styling

assets/css/ha-cluster-metrics.css

/* Custom styles for the HA Cluster Metrics plugin */
#haClusterMetricsChart {
    max-width: 100%;
    height: auto;
}

Activate and Test the Plugin

1. Upload the ha-cluster-metrics directory to the wp-content/plugins directory.

   2. Activate the plugin from the WordPress admin dashboard.

   3. Navigate to the "HA Cluster Metrics" menu item to see the charts.