@manojkmfsi/monodog 1.1.38 → 1.1.39

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

@@ -1,212 +0,0 @@
-import {
-  CheckCircleIcon,
-  XCircleIcon,
-  ClockIcon,
-  StopIcon,
-  FunnelIcon,
-} from '../../../../icons/heroicons';
-import { BuildListProps } from '../types/ci.types';
-import {
-  getStatusColor,
-  formatDuration,
-  formatRelativeTime,
-  getBuildProgress,
-  getShortCommitHash,
-  getUniquePackages,
-  getUniqueStatuses,
-} from '../utils/ci.utils';
-
-export default function BuildList({
-  builds,
-  selectedBuild,
-  onBuildSelect,
-  filters,
-  onFiltersChange,
-}: BuildListProps) {
-  const availablePackages = getUniquePackages(builds);
-  const availableStatuses = getUniqueStatuses(builds);
-
-  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="space-y-4">
-      {/* Filters */}
-      <div className="bg-white p-4 rounded-lg shadow border">
-        <div className="flex items-center space-x-4">
-          <div className="flex items-center space-x-2">
-            <FunnelIcon className="h-4 w-4 text-gray-400" />
-            <select
-              value={filters.package}
-              onChange={e =>
-                onFiltersChange({ ...filters, package: e.target.value })
-              }
-              className="border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            >
-              <option value="all">All Packages</option>
-              {availablePackages.map(pkg => (
-                <option key={pkg} value={pkg}>
-                  {pkg}
-                </option>
-              ))}
-            </select>
-          </div>
-
-          <select
-            value={filters.status}
-            onChange={e =>
-              onFiltersChange({ ...filters, status: e.target.value })
-            }
-            className="border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-          >
-            <option value="all">All Statuses</option>
-            {availableStatuses.map(status => (
-              <option key={status} value={status}>
-                {status.charAt(0).toUpperCase() + status.slice(1)}
-              </option>
-            ))}
-          </select>
-
-          <select
-            value={filters.dateRange}
-            onChange={e =>
-              onFiltersChange({ ...filters, dateRange: e.target.value })
-            }
-            className="border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-          >
-            <option value="all">All Time</option>
-            <option value="today">Today</option>
-            <option value="week">This Week</option>
-            <option value="month">This Month</option>
-          </select>
-        </div>
-      </div>
-
-      {/* Build List */}
-      <div className="bg-white rounded-lg shadow border">
-        <div className="p-4 border-b border-gray-200">
-          <h3 className="text-lg font-medium text-gray-900">Recent Builds</h3>
-          <p className="text-sm text-gray-500 mt-1">
-            {builds.length} build{builds.length !== 1 ? 's' : ''} found
-          </p>
-        </div>
-
-        {builds.length === 0 ? (
-          <div className="p-8 text-center">
-            <div className="text-gray-400 text-4xl mb-2">🔨</div>
-            <p className="text-gray-500">
-              No builds found matching your filters
-            </p>
-          </div>
-        ) : (
-          <div className="divide-y divide-gray-200">
-            {builds.map(build => {
-              const progress = getBuildProgress(build);
-              const isSelected = selectedBuild === build.id;
-
-              return (
-                <div
-                  key={build.id}
-                  className={`p-4 cursor-pointer transition-colors ${
-                    isSelected
-                      ? 'bg-blue-50 border-l-4 border-blue-500'
-                      : 'hover:bg-gray-50'
-                  }`}
-                  onClick={() => onBuildSelect(isSelected ? null : build.id)}
-                >
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center space-x-4">
-                      {getStatusIcon(build.status)}
-                      <div>
-                        <div className="flex items-center space-x-2">
-                          <h4 className="text-sm font-medium text-gray-900">
-                            {build.packageName}
-                          </h4>
-                          <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">
-                            {build.branch}
-                          </span>
-                          <span className="text-xs text-gray-500 font-mono">
-                            {getShortCommitHash(build.commit)}
-                          </span>
-                        </div>
-                        <div className="flex items-center space-x-2 mt-1">
-                          <span
-                            className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getStatusColor(build.status)}`}
-                          >
-                            {build.status}
-                          </span>
-                          <span className="text-xs text-gray-500">
-                            by {build.triggeredBy}
-                          </span>
-                          <span className="text-xs text-gray-500">
-                            {formatRelativeTime(build.startTime)}
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-
-                    <div className="text-right">
-                      {build.duration && (
-                        <div className="text-sm font-medium text-gray-900">
-                          {formatDuration(build.duration)}
-                        </div>
-                      )}
-                      {build.status === 'running' && (
-                        <div className="mt-1">
-                          <div className="flex items-center space-x-2">
-                            <div className="w-20 bg-gray-200 rounded-full h-2">
-                              <div
-                                className="bg-blue-500 h-2 rounded-full transition-all duration-300"
-                                style={{ width: `${progress}%` }}
-                              />
-                            </div>
-                            <span className="text-xs text-gray-500">
-                              {progress}%
-                            </span>
-                          </div>
-                        </div>
-                      )}
-                    </div>
-                  </div>
-
-                  {/* Build Stages Preview */}
-                  {isSelected && build.stages.length > 0 && (
-                    <div className="mt-4 pt-4 border-t border-gray-100">
-                      <div className="flex items-center space-x-2">
-                        {build.stages.map((stage, index) => (
-                          <div
-                            key={stage.name}
-                            className={`flex items-center px-2 py-1 text-xs rounded ${getStatusColor(stage.status)}`}
-                            title={`${stage.name}: ${stage.status}`}
-                          >
-                            {stage.name}
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  )}
-                </div>
-              );
-            })}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

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

@@ -1,158 +0,0 @@
-import {
-  CheckCircleIcon,
-  XCircleIcon,
-  ClockIcon,
-  ArrowPathIcon,
-  ChartBarIcon,
-} from '../../../../icons/heroicons';
-import { BuildOverviewProps } from '../types/ci.types';
-import { formatDuration } from '../utils/ci.utils';
-
-export default function BuildOverview({
-  stats,
-  onRefresh,
-  loading = false,
-}: BuildOverviewProps) {
-  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <h2 className="text-heading text-lg">Build Statistics</h2>
-        <button onClick={onRefresh} disabled={loading} className="btn-ghost">
-          <ArrowPathIcon
-            className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`}
-          />
-          Refresh
-        </button>
-      </div>
-
-      {/* Stats Grid */}
-      <div className="grid grid-cols-1 md:grid-cols-5 gap-4">
-        {/* Total Builds */}
-        <div className="card p-4">
-          <div className="flex items-center">
-            <div className="p-2 bg-primary-100 rounded-lg">
-              <ChartBarIcon className="w-6 h-6 text-primary-600" />
-            </div>
-            <div className="ml-4">
-              <p className="text-caption font-medium">Total Builds</p>
-              <p className="text-heading text-2xl">{stats.total}</p>
-            </div>
-          </div>
-        </div>
-
-        {/* Successful Builds */}
-        <div className="card p-4">
-          <div className="flex items-center">
-            <div className="p-2 bg-success-100 rounded-lg">
-              <CheckCircleIcon className="w-6 h-6 text-success-600" />
-            </div>
-            <div className="ml-4">
-              <p className="text-caption font-medium">Successful</p>
-              <p className="text-heading text-2xl text-success-600">
-                {stats.successful}
-              </p>
-            </div>
-          </div>
-        </div>
-
-        {/* Failed Builds */}
-        <div className="card p-4">
-          <div className="flex items-center">
-            <div className="p-2 bg-error-100 rounded-lg">
-              <XCircleIcon className="w-6 h-6 text-error-600" />
-            </div>
-            <div className="ml-4">
-              <p className="text-caption font-medium">Failed</p>
-              <p className="text-heading text-2xl text-error-600">
-                {stats.failed}
-              </p>
-            </div>
-          </div>
-        </div>
-
-        {/* Running Builds */}
-        <div className="card p-4">
-          <div className="flex items-center">
-            <div className="p-2 bg-info-100 rounded-lg">
-              <ClockIcon className="w-6 h-6 text-info-600" />
-            </div>
-            <div className="ml-4">
-              <p className="text-caption font-medium">Running</p>
-              <p className="text-heading text-2xl text-info-600">
-                {stats.running}
-              </p>
-            </div>
-          </div>
-        </div>
-
-        {/* Success Rate */}
-        <div className="card p-4">
-          <div className="flex items-center justify-between mb-2">
-            <p className="text-caption font-medium">Success Rate</p>
-            <span
-              className={`text-lg font-bold ${
-                stats.successRate >= 90
-                  ? 'text-success-600'
-                  : stats.successRate >= 70
-                    ? 'text-warning-600'
-                    : 'text-error-600'
-              }`}
-            >
-              {stats.successRate}%
-            </span>
-          </div>
-          <div className="w-full bg-neutral-200 rounded-full h-2">
-            <div
-              className={`h-2 rounded-full transition-all duration-300 ${
-                stats.successRate >= 90
-                  ? 'bg-success-500'
-                  : stats.successRate >= 70
-                    ? 'bg-warning-500'
-                    : 'bg-error-500'
-              }`}
-              style={{ width: `${stats.successRate}%` }}
-            />
-          </div>
-        </div>
-      </div>
-
-      {/* Additional Metrics */}
-      <div className="card p-6">
-        <h3 className="text-heading text-lg mb-4">Performance Metrics</h3>
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <div className="text-center">
-            <div className="text-heading text-2xl text-primary-600">
-              {formatDuration(stats.avgDuration)}
-            </div>
-            <div className="text-caption">Avg Duration</div>
-          </div>
-          <div className="text-center">
-            <div className="text-heading text-2xl text-success-600">
-              {stats.total > 0
-                ? Math.round((stats.successful / stats.total) * 100)
-                : 0}
-              %
-            </div>
-            <div className="text-caption">Success Rate</div>
-          </div>
-          <div className="text-center">
-            <div className="text-heading text-2xl text-error-600">
-              {stats.total > 0
-                ? Math.round((stats.failed / stats.total) * 100)
-                : 0}
-              %
-            </div>
-            <div className="text-caption">Failure Rate</div>
-          </div>
-          <div className="text-center">
-            <div className="text-heading text-2xl text-accent-600">
-              {stats.running}
-            </div>
-            <div className="text-caption">Active Builds</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,38 +0,0 @@
-import { PlayIcon, CpuChipIcon } from '../../../../icons/heroicons';
-
-interface CIIntegrationHeaderProps {
-  onTriggerBuild: () => void;
-  onCreatePipeline: () => void;
-}
-
-export default function CIIntegrationHeader({
-  onTriggerBuild,
-  onCreatePipeline,
-}: CIIntegrationHeaderProps) {
-  return (
-    <div className="flex items-center justify-between">
-      <div>
-        <h1 className="text-heading text-2xl">CI/CD Integration</h1>
-        <p className="text-body mt-1">
-          Monitor and manage continuous integration and deployment pipelines
-        </p>
-      </div>
-      <div className="flex space-x-2">
-        <button
-          onClick={onTriggerBuild}
-          className="btn-secondary flex items-center space-x-2"
-        >
-          <PlayIcon className="w-5 h-5" />
-          <span>Trigger Build</span>
-        </button>
-        <button
-          onClick={onCreatePipeline}
-          className="btn-primary flex items-center space-x-2"
-        >
-          <CpuChipIcon className="w-5 h-5" />
-          <span>New Pipeline</span>
-        </button>
-      </div>
-    </div>
-  );
-}

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

@@ -1,25 +0,0 @@
-import { ExclamationTriangleIcon } from '../../../../icons/heroicons';
-
-interface ErrorStateProps {
-  error: string;
-  onRetry?: () => void;
-}
-
-export default function ErrorState({ error, onRetry }: ErrorStateProps) {
-  return (
-    <div className="flex items-center justify-center h-64">
-      <div className="text-center">
-        <ExclamationTriangleIcon className="w-12 h-12 text-red-500 mx-auto" />
-        <p className="mt-4 text-red-600">{error}</p>
-        {onRetry && (
-          <button
-            onClick={onRetry}
-            className="mt-4 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
-          >
-            Retry
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}

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

@@ -1,16 +0,0 @@
-interface LoadingStateProps {
-  message?: string;
-}
-
-export default function LoadingState({
-  message = 'Loading CI/CD data...',
-}: LoadingStateProps) {
-  return (
-    <div className="flex items-center justify-center h-64">
-      <div className="text-center">
-        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
-        <p className="mt-4 text-gray-600">{message}</p>
-      </div>
-    </div>
-  );
-}

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

@@ -1,223 +0,0 @@
-import {
-  PlayIcon,
-  PauseIcon,
-  Cog6ToothIcon,
-  CheckCircleIcon,
-  ExclamationTriangleIcon,
-  XCircleIcon,
-} from '../../../../icons/heroicons';
-import { PipelineStatusProps } from '../types/ci.types';
-import {
-  getStatusColor,
-  formatDuration,
-  formatRelativeTime,
-  getPipelineHealth,
-} from '../utils/ci.utils';
-
-export default function PipelineStatus({
-  pipelines,
-  onPipelineSelect,
-  onPipelineToggle,
-}: PipelineStatusProps) {
-  const getHealthIcon = (health: string) => {
-    switch (health) {
-      case 'healthy':
-        return <CheckCircleIcon className="w-5 h-5 text-green-500" />;
-      case 'warning':
-        return <ExclamationTriangleIcon className="w-5 h-5 text-yellow-500" />;
-      case 'critical':
-        return <XCircleIcon className="w-5 h-5 text-red-500" />;
-      default:
-        return <Cog6ToothIcon className="w-5 h-5 text-gray-500" />;
-    }
-  };
-
-  const getHealthColor = (health: string) => {
-    switch (health) {
-      case 'healthy':
-        return 'bg-green-100 text-green-800';
-      case 'warning':
-        return 'bg-yellow-100 text-yellow-800';
-      case 'critical':
-        return 'bg-red-100 text-red-800';
-      default:
-        return 'bg-gray-100 text-gray-800';
-    }
-  };
-
-  if (pipelines.length === 0) {
-    return (
-      <div className="bg-white rounded-lg shadow border p-6">
-        <div className="text-center">
-          <Cog6ToothIcon className="w-12 h-12 text-gray-400 mx-auto mb-4" />
-          <h3 className="text-lg font-medium text-gray-900 mb-2">
-            No Pipelines Configured
-          </h3>
-          <p className="text-gray-600 mb-4">
-            Get started by creating your first CI/CD pipeline to automate builds
-            and deployments.
-          </p>
-          <button className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
-            Create Pipeline
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="bg-white rounded-lg shadow border">
-      <div className="p-4 border-b border-gray-200">
-        <h3 className="text-lg font-medium text-gray-900">Pipeline Status</h3>
-        <p className="text-sm text-gray-500 mt-1">
-          {pipelines.length} pipeline{pipelines.length !== 1 ? 's' : ''}{' '}
-          configured
-        </p>
-      </div>
-
-      <div className="divide-y divide-gray-200">
-        {pipelines.map(pipeline => {
-          const health = getPipelineHealth(pipeline);
-
-          return (
-            <div
-              key={pipeline.id}
-              className="p-4 hover:bg-gray-50 transition-colors cursor-pointer"
-              onClick={() => onPipelineSelect(pipeline.id)}
-            >
-              <div className="flex items-center justify-between">
-                <div className="flex items-center space-x-4">
-                  {getHealthIcon(health)}
-                  <div>
-                    <div className="flex items-center space-x-2">
-                      <h4 className="text-sm font-medium text-gray-900">
-                        {pipeline.name}
-                      </h4>
-                      <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">
-                        {pipeline.packageName}
-                      </span>
-                    </div>
-                    <div className="flex items-center space-x-4 mt-1">
-                      <span
-                        className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getStatusColor(pipeline.status)}`}
-                      >
-                        {pipeline.status}
-                      </span>
-                      <span
-                        className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getHealthColor(health)}`}
-                      >
-                        {health}
-                      </span>
-                    </div>
-                  </div>
-                </div>
-
-                <div className="flex items-center space-x-4">
-                  {/* Pipeline Toggle */}
-                  <button
-                    onClick={e => {
-                      e.stopPropagation();
-                      onPipelineToggle(
-                        pipeline.id,
-                        pipeline.status !== 'active'
-                      );
-                    }}
-                    className={`p-2 rounded-lg transition-colors ${
-                      pipeline.status === 'active'
-                        ? 'text-green-600 hover:bg-green-100'
-                        : 'text-gray-400 hover:bg-gray-100'
-                    }`}
-                    title={
-                      pipeline.status === 'active'
-                        ? 'Pause Pipeline'
-                        : 'Activate Pipeline'
-                    }
-                  >
-                    {pipeline.status === 'active' ? (
-                      <PauseIcon className="w-5 h-5" />
-                    ) : (
-                      <PlayIcon className="w-5 h-5" />
-                    )}
-                  </button>
-                </div>
-              </div>
-
-              {/* Pipeline Metrics */}
-              <div className="mt-3 grid grid-cols-4 gap-4 text-xs">
-                <div>
-                  <span className="text-gray-500">Success Rate:</span>
-                  <div
-                    className={`font-medium ${
-                      pipeline.successRate >= 90
-                        ? 'text-green-600'
-                        : pipeline.successRate >= 70
-                          ? 'text-yellow-600'
-                          : 'text-red-600'
-                    }`}
-                  >
-                    {pipeline.successRate}%
-                  </div>
-                </div>
-                <div>
-                  <span className="text-gray-500">Avg Duration:</span>
-                  <div className="font-medium text-gray-900">
-                    {formatDuration(pipeline.avgDuration)}
-                  </div>
-                </div>
-                <div>
-                  <span className="text-gray-500">Last Run:</span>
-                  <div className="font-medium text-gray-900">
-                    {formatRelativeTime(pipeline.lastRun)}
-                  </div>
-                </div>
-                <div>
-                  <span className="text-gray-500">Triggers:</span>
-                  <div className="font-medium text-gray-900">
-                    {pipeline.triggers.length}
-                  </div>
-                </div>
-              </div>
-
-              {/* Success Rate Progress Bar */}
-              <div className="mt-3">
-                <div className="flex items-center justify-between text-xs mb-1">
-                  <span className="text-gray-500">Pipeline Health</span>
-                  <span className="font-medium text-gray-900">
-                    {pipeline.successRate}%
-                  </span>
-                </div>
-                <div className="w-full bg-gray-200 rounded-full h-2">
-                  <div
-                    className={`h-2 rounded-full transition-all duration-300 ${
-                      pipeline.successRate >= 90
-                        ? 'bg-green-500'
-                        : pipeline.successRate >= 70
-                          ? 'bg-yellow-500'
-                          : 'bg-red-500'
-                    }`}
-                    style={{ width: `${pipeline.successRate}%` }}
-                  />
-                </div>
-              </div>
-
-              {/* Triggers */}
-              <div className="mt-3">
-                <div className="flex items-center space-x-1">
-                  <span className="text-xs text-gray-500">Triggers:</span>
-                  {pipeline.triggers.map(trigger => (
-                    <span
-                      key={trigger}
-                      className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800"
-                    >
-                      {trigger}
-                    </span>
-                  ))}
-                </div>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}

package/monodog-dashboard/src/components/modules/ci-integration/components/index.ts

@@ -1,8 +0,0 @@
-// Export all CI integration components for easier imports
-export { default as LoadingState } from './LoadingState';
-export { default as ErrorState } from './ErrorState';
-export { default as CIIntegrationHeader } from './CIIntegrationHeader';
-export { default as BuildOverview } from './BuildOverview';
-export { default as BuildList } from './BuildList';
-export { default as PipelineStatus } from './PipelineStatus';
-export { default as BuildDetails } from './BuildDetails';