Custom UI Extensions and Plugins

Organizations want to customize the DataHub UI with company branding, add custom views, or extend functionality. Understanding the extension points and customization options is important for tailored deployments.

You Might Be Asking:

• Can I customize the DataHub UI?
• How do I add company branding?
• Can I add custom tabs or views?

1. Customize branding and theme:

# In values.yaml for Helm deployment
datahub-frontend:
  env:
    # Company name
    - name: REACT_APP_TITLE
      value: "Company Data Catalog"

    # Logo URL
    - name: REACT_APP_LOGO_URL
      value: "https://company.com/logo.png"

    # Favicon
    - name: REACT_APP_FAVICON_URL
      value: "https://company.com/favicon.ico"

    # Theme color
    - name: REACT_APP_THEME_COLOR
      value: "#1890ff"

    # Footer text
    - name: REACT_APP_FOOTER_TEXT
      value: "© 2025 Company Inc."

2. Add custom links to navigation:

datahub-frontend:
  env:
    # Custom navigation links
    - name: REACT_APP_CUSTOM_LINKS
      value: |
        [
          {
            "label": "Data Dictionary",
            "url": "https://docs.company.com/data-dictionary"
          },
          {
            "label": "Request Access",
            "url": "https://company.com/data-access-request"
          },
          {
            "label": "Support",
            "url": "https://support.company.com"
          }
        ]

3. Create custom entity views:

// Custom React component for entity view
import React from 'react';
import { EntityProfile } from '@datahub/entity-profile';

export const CustomDatasetView = ({ dataset }) => {
  return (
    
      {/* Custom section */}
      
        

          
Data Quality Score: {dataset.qualityScore}%
          
Usage Frequency: {dataset.usageFrequency}
          
Business Criticality: {dataset.criticality}
        
      

      {/* Standard sections */}
      
      
      
    
  );
};

4. Add custom entity tabs:

// Register custom tab
import { registerEntityTab } from '@datahub/entity-registry';

registerEntityTab({
  entityType: 'dataset',
  tabKey: 'cost-analysis',
  tabName: 'Cost Analysis',
  component: CostAnalysisTab,
  // Show tab only if dataset has cost data
  visible: (dataset) => dataset.properties?.customProperties?.hasCostData === 'true'
});

// CostAnalysisTab component
const CostAnalysisTab = ({ dataset }) => {
  const [costData, setCostData] = useState(null);

  useEffect(() => {
    // Fetch cost data from internal API
    fetchCostData(dataset.urn).then(setCostData);
  }, [dataset.urn]);

  return (
    

      
Storage Cost Analysis
      
Monthly Storage Cost: ${costData?.storageCost}
      
Query Cost (30d): ${costData?.queryCost}
      
Total Cost: ${costData?.totalCost}
    
  );
};

5. Integrate with internal systems:

// Custom action button
import { registerEntityAction } from '@datahub/entity-registry';

registerEntityAction({
  entityType: 'dataset',
  actionKey: 'request-access',
  label: 'Request Access',
  icon: 'lock',
  action: async (dataset) => {
    // Call internal access request system
    const response = await fetch('https://internal-api.company.com/access-request', {
      method: 'POST',
      body: JSON.stringify({
        datasetUrn: dataset.urn,
        userId: currentUser.username
      })
    });

    if (response.ok) {
      notification.success('Access request submitted');
    }
  }
});

6. Custom search filters:

// Add custom search facets
import { registerSearchFacet } from '@datahub/search';

registerSearchFacet({
  field: 'businessCriticality',
  displayName: 'Business Criticality',
  values: [
    { value: 'critical', label: 'Critical', count: 150 },
    { value: 'high', label: 'High', count: 320 },
    { value: 'medium', label: 'Medium', count: 540 },
    { value: 'low', label: 'Low', count: 890 }
  ]
});

registerSearchFacet({
  field: 'dataResidency',
  displayName: 'Data Residency',
  values: [
    { value: 'us', label: 'United States', count: 1200 },
    { value: 'eu', label: 'European Union', count: 450 },
    { value: 'apac', label: 'Asia Pacific', count: 250 }
  ]
});

7. Build and deploy custom UI:

# Clone DataHub repository
git clone https://github.com/datahub-project/datahub.git
cd datahub/datahub-web-react

# Add your customizations
# - Modify src/app/...
# - Add custom components
# - Update configuration

# Build custom Docker image
docker build -t company/datahub-frontend-react:custom .

# Push to registry
docker push company/datahub-frontend-react:custom

# Deploy with custom image
# values.yaml
datahub-frontend-react:
  image:
    repository: company/datahub-frontend-react
    tag: custom

UI customizations require maintaining a fork or custom build. Consider upgrade impact when customizing. Use environment variables for simple customizations. For complex customizations, consider contributing back to the open-source project. Document all customizations for maintainability.

• UI Configuration
• Frontend Development