@manojkmfsi/monodog 1.1.37 → 1.1.39

package/monodog-dashboard/src/components/modules/ci-integration/CIIntegration.tsx

@@ -1,277 +0,0 @@
-import { useState, useEffect } from 'react';
-import { RocketLaunchIcon } from '../../../icons/heroicons';
-// Import sub-components
-import {
-  LoadingState,
-  ErrorState,
-  CIIntegrationHeader,
-  BuildOverview,
-  BuildList,
-  PipelineStatus,
-  BuildDetails,
-} from './components';
-
-// Import types and utilities
-import { Build, Pipeline, CIFilters } from './types/ci.types';
-import { calculateBuildStats, filterBuilds } from './utils/ci.utils';
-
-// Import service and constants
-import { monorepoService } from '../../../services/monorepoService';
-import { DASHBOARD_ERROR_MESSAGES } from '../../../constants/messages';
-
-// Re-export types for backward compatibility
-export type { Build, Pipeline, CIFilters } from './types/ci.types';
-
-// Mock pipelines data (since not included in service yet)
-const mockPipelines: Pipeline[] = [
-  {
-    id: '1',
-    name: 'Dashboard CI',
-    packageName: 'dashboard',
-    status: 'active',
-    lastRun: '2024-01-16T09:00:00Z',
-    nextRun: '2024-01-16T10:00:00Z',
-    successRate: 95,
-    avgDuration: 420,
-    triggers: ['push', 'pull_request'],
-  },
-  {
-    id: '2',
-    name: 'Backend CI',
-    packageName: 'backend',
-    status: 'active',
-    lastRun: '2024-01-16T08:30:00Z',
-    nextRun: '2024-01-16T09:30:00Z',
-    successRate: 88,
-    avgDuration: 900,
-    triggers: ['push', 'pull_request', 'tag'],
-  },
-  {
-    id: '3',
-    name: 'Utils CI',
-    packageName: 'utils',
-    status: 'paused',
-    lastRun: '2024-01-16T08:00:00Z',
-    successRate: 75,
-    avgDuration: 600,
-    triggers: ['push', 'pull_request'],
-  },
-];
-
-export default function CIIntegration() {
-  // State management
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [builds, setBuilds] = useState<Build[]>([]);
-  const [pipelines] = useState<Pipeline[]>(mockPipelines);
-
-  // Selection state
-  const [selectedBuild, setSelectedBuild] = useState<string | null>(null);
-
-  // Filter state
-  const [filters, setFilters] = useState<CIFilters>({
-    package: 'all',
-    status: 'all',
-    pipeline: 'all',
-    dateRange: 'all',
-  });
-
-  // Fetch build data
-  useEffect(() => {
-    const fetchBuildData = async () => {
-      try {
-        setLoading(true);
-        const data = await monorepoService.getBuildStatus();
-
-        // Transform the data to match our Build interface
-        const transformedData: Build[] = data.map((build: Record<string, unknown>) => ({
-          id: (build.id as string) || Math.random().toString(36).substr(2, 9),
-          packageName: (build.package as string) || (build.packageName as string) || 'unknown',
-          branch: (build.branch as string) || 'main',
-          commit: (build.commit as string) || 'unknown',
-          status: (build.status as string) || 'pending',
-          startTime: (build.startTime as string) || new Date().toISOString(),
-          endTime: build.endTime as string | undefined,
-          duration: build.duration as number | undefined,
-          stages: build.stages || [],
-          triggeredBy: build.triggeredBy || 'system',
-          artifacts: build.artifacts || [],
-        }));
-
-        setBuilds(transformedData);
-        setError(null);
-      } catch (err) {
-        setError(DASHBOARD_ERROR_MESSAGES.FAILED_TO_FETCH_PACKAGES);
-        console.error('Error fetching build data:', err);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchBuildData();
-  }, []);
-
-  // Get filtered builds and statistics
-  const filteredBuilds = filterBuilds(builds, filters);
-  const stats = calculateBuildStats(builds);
-  const selectedBuildData = selectedBuild
-    ? builds.find(build => build.id === selectedBuild) || null
-    : null;
-
-  // Event handlers
-  const handleRefresh = () => {
-    window.location.reload();
-  };
-
-  const handleTriggerBuild = () => {
-    // In a real implementation, this would trigger a new build
-    console.log('Triggering new build...');
-  };
-
-  const handleCreatePipeline = () => {
-    // In a real implementation, this would open a pipeline creation dialog
-    console.log('Creating new pipeline...');
-  };
-
-  const handleBuildSelect = (buildId: string | null) => {
-    setSelectedBuild(buildId);
-  };
-
-  const handlePipelineSelect = (pipelineId: string) => {
-    // In a real implementation, this would show pipeline details
-    console.log('Selected pipeline:', pipelineId);
-  };
-
-  const handlePipelineToggle = (pipelineId: string, active: boolean) => {
-    // In a real implementation, this would toggle pipeline status
-    console.log('Toggle pipeline:', pipelineId, 'active:', active);
-  };
-
-  const handleBuildCancel = (buildId: string) => {
-    // In a real implementation, this would cancel the build
-    console.log('Cancelling build:', buildId);
-    setSelectedBuild(null);
-  };
-
-  const handleBuildRetry = (buildId: string) => {
-    // In a real implementation, this would retry the build
-    console.log('Retrying build:', buildId);
-    setSelectedBuild(null);
-  };
-
-  const handleRetry = () => {
-    window.location.reload();
-  };
-
-  // Loading state
-  if (loading) {
-    return <LoadingState />;
-  }
-
-  // Error state
-  if (error) {
-    return <ErrorState error={error} onRetry={handleRetry} />;
-  }
-
-  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <CIIntegrationHeader
-        onTriggerBuild={handleTriggerBuild}
-        onCreatePipeline={handleCreatePipeline}
-      />
-
-      {/* Build Overview */}
-      <BuildOverview
-        stats={stats}
-        onRefresh={handleRefresh}
-        loading={loading}
-      />
-
-      {/* Main Content */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        {/* Build List */}
-        <div className="lg:col-span-2">
-          <BuildList
-            builds={filteredBuilds}
-            selectedBuild={selectedBuild}
-            onBuildSelect={handleBuildSelect}
-            filters={filters}
-            onFiltersChange={setFilters}
-          />
-        </div>
-
-        {/* Pipeline Status */}
-        <div className="lg:col-span-1">
-          <PipelineStatus
-            pipelines={pipelines}
-            onPipelineSelect={handlePipelineSelect}
-            onPipelineToggle={handlePipelineToggle}
-          />
-        </div>
-      </div>
-
-      {/* Build Details Modal */}
-      <BuildDetails
-        build={selectedBuildData}
-        onClose={() => setSelectedBuild(null)}
-        onCancel={handleBuildCancel}
-        onRetry={handleBuildRetry}
-      />
-
-      {/* Empty State */}
-      {filteredBuilds.length === 0 && builds.length > 0 && (
-        <div className="text-center py-12">
-          <div className="text-gray-400 text-6xl mb-4">🔨</div>
-          <h3 className="text-lg font-medium text-gray-900 mb-2">
-            No builds found
-          </h3>
-          <p className="text-gray-600 mb-4">
-            No builds match your current filters. Try adjusting your search
-            criteria.
-          </p>
-          <button
-            onClick={() =>
-              setFilters({
-                package: 'all',
-                status: 'all',
-                pipeline: 'all',
-                dateRange: 'all',
-              })
-            }
-            className="text-blue-600 hover:text-blue-500"
-          >
-            Clear Filters
-          </button>
-        </div>
-      )}
-
-      {/* No Data State */}
-      {builds.length === 0 && !loading && (
-        <div className="text-center py-12">
-          <div className="text-gray-400 text-6xl mb-4"><RocketLaunchIcon className="w-6 h-6 text-primary-600" /></div>
-          <h3 className="text-lg font-medium text-gray-900 mb-2">
-            No CI/CD data available
-          </h3>
-          <p className="text-gray-600 mb-4">
-            Get started by triggering your first build or setting up a pipeline.
-          </p>
-          <div className="flex justify-center space-x-4">
-            <button
-              onClick={handleTriggerBuild}
-              className="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors"
-            >
-              Trigger Build
-            </button>
-            <button
-              onClick={handleCreatePipeline}
-              className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
-            >
-              Create Pipeline
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

package/monodog-dashboard/src/components/modules/ci-integration/components/BuildDetails.tsx

@@ -1,228 +0,0 @@
-import {
-  XMarkIcon,
-  StopIcon,
-  ArrowPathIcon,
-  CheckCircleIcon,
-  XCircleIcon,
-  ClockIcon,
-} from '../../../../icons/heroicons';
-import { BuildDetailsProps } from '../types/ci.types';
-import {
-  getStatusColor,
-  getStageStatusColor,
-  formatDuration,
-  formatDateTime,
-  getShortCommitHash,
-  getStageIcon,
-} from '../utils/ci.utils';
-
-export default function BuildDetails({
-  build,
-  onClose,
-  onCancel,
-  onRetry,
-}: BuildDetailsProps) {
-  if (!build) return null;
-
-  const getStatusIcon = (status: string) => {
-    switch (status) {
-      case 'success':
-        return <CheckCircleIcon className="h-5 w-5 text-green-500" />;
-      case 'running':
-        return (
-          <div className="h-5 w-5 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
-        );
-      case 'pending':
-        return <ClockIcon className="h-5 w-5 text-yellow-500" />;
-      case 'failed':
-        return <XCircleIcon className="h-5 w-5 text-red-500" />;
-      case 'cancelled':
-        return <StopIcon className="h-5 w-5 text-red-500" />;
-      default:
-        return <ClockIcon className="h-5 w-5 text-gray-500" />;
-    }
-  };
-
-  return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-      <div className="bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-hidden">
-        {/* Header */}
-        <div className="flex items-center justify-between p-6 border-b border-gray-200">
-          <div className="flex items-center space-x-3">
-            {getStatusIcon(build.status)}
-            <div>
-              <h2 className="text-xl font-semibold text-gray-900">
-                {build.packageName} Build
-              </h2>
-              <p className="text-sm text-gray-600">
-                {build.branch} • {getShortCommitHash(build.commit)}
-              </p>
-            </div>
-          </div>
-          <div className="flex items-center space-x-2">
-            {build.status === 'running' && onCancel && (
-              <button
-                onClick={() => onCancel(build.id)}
-                className="inline-flex items-center px-3 py-2 text-sm font-medium text-red-700 bg-red-100 rounded-lg hover:bg-red-200 transition-colors"
-              >
-                <StopIcon className="w-4 h-4 mr-1" />
-                Cancel
-              </button>
-            )}
-            {(build.status === 'failed' || build.status === 'cancelled') &&
-              onRetry && (
-                <button
-                  onClick={() => onRetry(build.id)}
-                  className="inline-flex items-center px-3 py-2 text-sm font-medium text-green-700 bg-green-100 rounded-lg hover:bg-green-200 transition-colors"
-                >
-                  <ArrowPathIcon className="w-4 h-4 mr-1" />
-                  Retry
-                </button>
-              )}
-            <button
-              onClick={onClose}
-              className="text-gray-400 hover:text-gray-600 transition-colors"
-            >
-              <XMarkIcon className="w-6 h-6" />
-            </button>
-          </div>
-        </div>
-
-        {/* Content */}
-        <div className="p-6 overflow-y-auto max-h-[70vh]">
-          {/* Build Info */}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
-            <div className="space-y-4">
-              <div>
-                <h3 className="text-sm font-medium text-gray-700 mb-2">
-                  Build Information
-                </h3>
-                <div className="space-y-2 text-sm">
-                  <div className="flex justify-between">
-                    <span className="text-gray-600">Status:</span>
-                    <span
-                      className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getStatusColor(build.status)}`}
-                    >
-                      {build.status}
-                    </span>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-gray-600">Started:</span>
-                    <span className="font-medium">
-                      {formatDateTime(build.startTime)}
-                    </span>
-                  </div>
-                  {build.endTime && (
-                    <div className="flex justify-between">
-                      <span className="text-gray-600">Ended:</span>
-                      <span className="font-medium">
-                        {formatDateTime(build.endTime)}
-                      </span>
-                    </div>
-                  )}
-                  {build.duration && (
-                    <div className="flex justify-between">
-                      <span className="text-gray-600">Duration:</span>
-                      <span className="font-medium">
-                        {formatDuration(build.duration)}
-                      </span>
-                    </div>
-                  )}
-                  <div className="flex justify-between">
-                    <span className="text-gray-600">Triggered by:</span>
-                    <span className="font-medium">{build.triggeredBy}</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div className="space-y-4">
-              <div>
-                <h3 className="text-sm font-medium text-gray-700 mb-2">
-                  Artifacts
-                </h3>
-                {build.artifacts.length > 0 ? (
-                  <div className="space-y-1">
-                    {build.artifacts.map((artifact, index) => (
-                      <div key={index} className="text-sm">
-                        <a
-                          href="#"
-                          className="text-blue-600 hover:text-blue-500 font-medium"
-                        >
-                          {artifact}
-                        </a>
-                      </div>
-                    ))}
-                  </div>
-                ) : (
-                  <p className="text-sm text-gray-500">
-                    No artifacts generated
-                  </p>
-                )}
-              </div>
-            </div>
-          </div>
-
-          {/* Build Stages */}
-          <div>
-            <h3 className="text-lg font-medium text-gray-900 mb-4">
-              Build Stages
-            </h3>
-            <div className="space-y-4">
-              {build.stages.map((stage, index) => (
-                <div
-                  key={stage.name}
-                  className="border border-gray-200 rounded-lg p-4"
-                >
-                  <div className="flex items-center justify-between mb-3">
-                    <div className="flex items-center space-x-3">
-                      <span className="text-2xl">
-                        {getStageIcon(stage.name)}
-                      </span>
-                      <div>
-                        <h4 className="text-sm font-medium text-gray-900">
-                          {stage.name}
-                        </h4>
-                        <div className="flex items-center space-x-2 mt-1">
-                          <span
-                            className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getStageStatusColor(stage.status)}`}
-                          >
-                            {stage.status}
-                          </span>
-                          {stage.duration && (
-                            <span className="text-xs text-gray-500">
-                              {formatDuration(stage.duration)}
-                            </span>
-                          )}
-                        </div>
-                      </div>
-                    </div>
-                    <div className="text-sm text-gray-500">
-                      Step {index + 1} of {build.stages.length}
-                    </div>
-                  </div>
-
-                  {/* Stage Logs */}
-                  {stage.logs && stage.logs.length > 0 && (
-                    <div className="mt-3">
-                      <h5 className="text-xs font-medium text-gray-700 mb-2">
-                        Logs
-                      </h5>
-                      <div className="bg-gray-900 text-gray-100 p-3 rounded-lg text-xs font-mono max-h-32 overflow-y-auto">
-                        {stage.logs.map((log, logIndex) => (
-                          <div key={logIndex} className="mb-1">
-                            {log}
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  )}
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}