Theme Configuration

Customizing the appearance of your HPC Dashboard

Theme Configuration

Basic Customization

The HPC Dashboard offers several ways to customize its appearance to match your organization's branding:

Environment Variables

You can customize basic branding elements through environment variables in your .env file:

CLUSTER_LOGO="/your-logo.png"
COMPANY_NAME="Your Organization"
CLUSTER_NAME="Your Cluster Name"

To use your own logo:

  1. Add your logo image to the /public directory
  2. Update the CLUSTER_LOGO variable with the path to your image
  3. Restart the dashboard to apply changes

Node Status Color Schemas

The dashboard includes built-in color schemas for node status visualization. Users can switch between these using the color palette icon in the UI, but administrators can also customize them by editing specific files.

Color Schema Files

To customize node status colors, you need to edit these three files:

1. components/color-schema-selector.tsx

This file defines the color schema options shown in the dropdown menu:

const colorSchemaOptions: ColorSchemaOption[] = [
  {
    value: "default",
    label: "Default",
    colors: ["#60a5fa", "#047857", "#ea580c", "#6366f1", "#7c2d12", "#10b981"],
  },
  {
    value: "neon",
    label: "Neon",
    colors: ["#d946ef", "#22d3ee", "#eab308", "#9333ea", "#ec4899", "#2dd4bf"],
  },
  // Other color schemas...
];

2. components/nodecard/node-card.tsx

This file controls the colors for the node status cards:

const getStatusColor = (
  status: string,
  colorSchema: string = "default"
): { bgColor: string; textColor: string } => {
  const statusLevel = status[1] || status[0];
  const colorMap: {
    [key: string]: { [key: string]: { bgColor: string; textColor: string } };
  } = {
    default: {
      DRAIN: { bgColor: "bg-blue-400", textColor: "text-white" },
      NOT_RESPONDING: { bgColor: "bg-blue-400", textColor: "text-white" },
      DOWN: { bgColor: "bg-blue-400", textColor: "text-white" },
      IDLE: { bgColor: "bg-green-700", textColor: "text-white" },
      MIXED: { bgColor: "bg-orange-800", textColor: "text-white" },
      // Other statuses...
    },
    // Other color schemas...
  };

  // Rest of the function...
};

3. components/grouped-nodes.tsx

This file controls the colors for the status badges in group headers:

const getStatusColor = (type: string, colorSchema: string = "default") => {
  const colorMap: { [key: string]: { [key: string]: string } } = {
    default: {
      idle: "bg-green-100 dark:bg-green-500/10 text-green-700 dark:text-green-400",
      allocated: "bg-red-100 dark:bg-red-500/10 text-red-700 dark:text-red-400",
      mixed:
        "bg-orange-100 dark:bg-orange-500/10 text-orange-700 dark:text-orange-400",
      drain: "bg-blue-100 dark:bg-blue-500/10 text-blue-700 dark:text-blue-400",
    },
    neon: {
      idle: "bg-cyan-100 dark:bg-cyan-500/10 text-cyan-700 dark:text-cyan-400",
      allocated:
        "bg-rose-100 dark:bg-rose-500/10 text-rose-700 dark:text-rose-400",
      // Other statuses...
    },
    // Other color schemas...
  };

  return colorMap[colorSchema]?.[type] || colorMap.default[type];
};

Adding a New Color Schema

To add a completely new color schema:

  1. Add a new entry to the colorSchemaOptions array in components/color-schema-selector.tsx:
{
  value: "mycustom",  // Unique identifier
  label: "My Custom", // Display name
  colors: ["#ff0000", "#00ff00", "#0000ff", "#ffff00", "#ff00ff", "#00ffff"], // Preview colors
},
  1. Add a new entry to the colorMap object in components/nodecard/node-card.tsx:
mycustom: {
  DRAIN: { bgColor: "bg-red-500", textColor: "text-white" },
  NOT_RESPONDING: { bgColor: "bg-red-500", textColor: "text-white" },
  DOWN: { bgColor: "bg-red-500", textColor: "text-white" },
  IDLE: { bgColor: "bg-green-500", textColor: "text-black" },
  MIXED: { bgColor: "bg-yellow-500", textColor: "text-black" },
  PLANNED: { bgColor: "bg-blue-500", textColor: "text-white" },
  ALLOCATED: { bgColor: "bg-purple-600", textColor: "text-white" },
  COMPLETING: { bgColor: "bg-orange-500", textColor: "text-white" },
  RESERVED: { bgColor: "bg-violet-600", textColor: "text-white" },
  FUTURE: { bgColor: "bg-cyan-500", textColor: "text-black" },
  REBOOT_REQUESTED: { bgColor: "bg-gray-700", textColor: "text-white" },
},
  1. Add a new entry to the colorMap object in components/grouped-nodes.tsx:
mycustom: {
  idle: "bg-green-100 dark:bg-green-500/10 text-green-700 dark:text-green-400",
  allocated: "bg-purple-100 dark:bg-purple-500/10 text-purple-700 dark:text-purple-400",
  mixed: "bg-yellow-100 dark:bg-yellow-500/10 text-yellow-700 dark:text-yellow-400",
  drain: "bg-red-100 dark:bg-red-500/10 text-red-700 dark:text-red-400",
},

Color Schema Components

When customizing color schemas, consider these three components:

  1. Node Cards - Strong, vibrant colors that clearly show node status
  2. Status Badges - Lighter, more subtle versions of the same colors
  3. Dark Mode Support - The group headers include dark mode variants using the dark: prefix

Design Tip:

Use consistent colors across components - for example, if IDLE nodes are green in node-card.tsx, the idle status badges in grouped-nodes.tsx should also use green (but a lighter shade).

Available Tailwind Colors

When customizing colors, you can use any of Tailwind's color classes with various intensity levels (100-900):

gray, slate, zinc, neutral, stone,
red, orange, amber, yellow, lime,
green, emerald, teal, cyan, sky,
blue, indigo, violet, purple, fuchsia,
pink, rose

For example:

  • bg-blue-500 - Medium blue background
  • bg-red-700 - Dark red background
  • text-green-400 - Light green text

Available Color Schemas

The dashboard includes the following pre-built color schemas:

SchemaDescriptionBest For
DefaultStandard blue/green/orange/red paletteGeneral usage
NeonHigh contrast, bright colorsHigh visibility needs
NordicCool blues and tealsReducing eye strain
CandyBright, fun colorsVisually distinguishing states
DesertWarm earth tonesLow light environments
OceanBlues and tealsCalm, focused monitoring

After Modifications:

After making any changes to these files, you'll need to rebuild the application for them to take effect. Run npm run build followed by npm start (or restart your PM2 process if using PM2).

Accessibility:

When creating custom color schemas, ensure there is sufficient contrast between the background and text colors to maintain readability, especially for users with color vision deficiencies.

Check back soon for more customization options as we continue to expand this documentation!