more-compute 0.1.2__py3-none-any.whl → 0.1.3__py3-none-any.whl

frontend/components/popups/FilterPopup.tsx

@@ -0,0 +1,427 @@
+import React from "react";
+import { GpuAvailabilityParams } from "@/lib/api";
+
+interface FilterPopupProps {
+  isOpen: boolean;
+  onClose: () => void;
+  filters: GpuAvailabilityParams;
+  onFiltersChange: (filters: GpuAvailabilityParams) => void;
+  onApply: () => void;
+}
+
+const GPU_TYPES = [
+  { value: "H100_80GB", label: "H100 80GB" },
+  { value: "H200_96GB", label: "H200 96GB" },
+  { value: "GH200_96GB", label: "GH200 96GB" },
+  { value: "H200_141GB", label: "H200 141GB" },
+  { value: "B200_180GB", label: "B200 180GB" },
+  { value: "A100_80GB", label: "A100 80GB" },
+  { value: "A100_40GB", label: "A100 40GB" },
+  { value: "A10_24GB", label: "A10 24GB" },
+  { value: "A30_24GB", label: "A30 24GB" },
+  { value: "A40_48GB", label: "A40 48GB" },
+  { value: "RTX4090_24GB", label: "RTX 4090 24GB" },
+  { value: "RTX5090_32GB", label: "RTX 5090 32GB" },
+  { value: "RTX4080_16GB", label: "RTX 4080 16GB" },
+  { value: "RTX4080Ti_16GB", label: "RTX 4080 Ti 16GB" },
+  { value: "RTX4070Ti_12GB", label: "RTX 4070 Ti 12GB" },
+  { value: "RTX3090_24GB", label: "RTX 3090 24GB" },
+  { value: "RTX3090Ti_24GB", label: "RTX 3090 Ti 24GB" },
+  { value: "RTX3080_10GB", label: "RTX 3080 10GB" },
+  { value: "RTX3080Ti_12GB", label: "RTX 3080 Ti 12GB" },
+  { value: "RTX3070_8GB", label: "RTX 3070 8GB" },
+  { value: "L40S_48GB", label: "L40S 48GB" },
+  { value: "L40_48GB", label: "L40 48GB" },
+  { value: "L4_24GB", label: "L4 24GB" },
+  { value: "V100_32GB", label: "V100 32GB" },
+  { value: "V100_16GB", label: "V100 16GB" },
+  { value: "T4_16GB", label: "T4 16GB" },
+  { value: "P100_16GB", label: "P100 16GB" },
+  { value: "A6000_48GB", label: "A6000 48GB" },
+  { value: "A5000_24GB", label: "A5000 24GB" },
+  { value: "A4000_16GB", label: "A4000 16GB" },
+  { value: "RTX6000Ada_48GB", label: "RTX 6000 Ada 48GB" },
+  { value: "RTX5000Ada_32GB", label: "RTX 5000 Ada 32GB" },
+  { value: "RTX4000Ada_20GB", label: "RTX 4000 Ada 20GB" },
+];
+
+const FilterPopup: React.FC<FilterPopupProps> = ({
+  isOpen,
+  onClose,
+  filters,
+  onFiltersChange,
+  onApply,
+}) => {
+  const [filterCategory, setFilterCategory] = React.useState<string>("gpu_type");
+  const [filterSearch, setFilterSearch] = React.useState<string>("");
+
+  if (!isOpen) return null;
+
+  const handleClearAll = () => {
+    onFiltersChange({});
+    setFilterSearch("");
+  };
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        onClick={onClose}
+        style={{
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          zIndex: 9998,
+        }}
+      />
+      {/* Filter Popup */}
+      <div
+        style={{
+          position: "fixed",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          backgroundColor: "white",
+          border: "1px solid #d1d5db",
+          borderRadius: "8px",
+          padding: "16px",
+          width: "320px",
+          maxHeight: "480px",
+          display: "flex",
+          flexDirection: "column",
+          boxShadow: "0 10px 25px rgba(0, 0, 0, 0.2)",
+          zIndex: 9999,
+        }}
+      >
+        {/* Header */}
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            marginBottom: "16px",
+          }}
+        >
+          <h4
+            style={{
+              fontSize: "14px",
+              fontWeight: 600,
+              margin: 0,
+              color: "#111827",
+            }}
+          >
+            Filter
+          </h4>
+          <button
+            onClick={handleClearAll}
+            style={{
+              fontSize: "11px",
+              color: "#3b82f6",
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              padding: "4px 8px",
+              fontWeight: 500,
+            }}
+          >
+            Clear All
+          </button>
+        </div>
+
+        {/* Category Dropdown */}
+        <select
+          value={filterCategory}
+          onChange={(e) => {
+            setFilterCategory(e.target.value);
+            setFilterSearch("");
+          }}
+          style={{
+            width: "100%",
+            padding: "8px 10px",
+            borderRadius: "6px",
+            border: "1px solid #d1d5db",
+            backgroundColor: "white",
+            color: "#111827",
+            fontSize: "12px",
+            marginBottom: "12px",
+            cursor: "pointer",
+          }}
+        >
+          <option value="gpu_type">GPU Type</option>
+          <option value="gpu_count">GPU Count</option>
+          <option value="security">Security</option>
+          <option value="socket">Socket</option>
+        </select>
+
+        {/* Search within category */}
+        <input
+          type="text"
+          placeholder="Search"
+          value={filterSearch}
+          onChange={(e) => setFilterSearch(e.target.value)}
+          style={{
+            width: "100%",
+            padding: "8px 10px",
+            borderRadius: "6px",
+            border: "1px solid #d1d5db",
+            backgroundColor: "white",
+            color: "#111827",
+            fontSize: "12px",
+            marginBottom: "12px",
+            boxSizing: "border-box",
+          }}
+        />
+
+        {/* Options List */}
+        <div
+          style={{
+            flex: 1,
+            overflowY: "auto",
+            marginBottom: "16px",
+            maxHeight: "240px",
+            border: "1px solid #e5e7eb",
+            borderRadius: "6px",
+            padding: "4px",
+          }}
+        >
+          {filterCategory === "gpu_type" && (
+            <>
+              {GPU_TYPES.filter((gpu) =>
+                gpu.label.toLowerCase().includes(filterSearch.toLowerCase())
+              ).map((gpu) => (
+                <label
+                  key={gpu.value}
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    padding: "8px 6px",
+                    cursor: "pointer",
+                    fontSize: "12px",
+                    color: "#374151",
+                    borderRadius: "4px",
+                    transition: "background-color 0.15s",
+                  }}
+                  onMouseEnter={(e) =>
+                    (e.currentTarget.style.backgroundColor = "#f3f4f6")
+                  }
+                  onMouseLeave={(e) =>
+                    (e.currentTarget.style.backgroundColor = "transparent")
+                  }
+                >
+                  <input
+                    type="radio"
+                    checked={filters.gpu_type === gpu.value}
+                    onChange={() =>
+                      onFiltersChange({
+                        ...filters,
+                        gpu_type: gpu.value,
+                      })
+                    }
+                    style={{ marginRight: "10px", cursor: "pointer" }}
+                  />
+                  {gpu.label}
+                </label>
+              ))}
+            </>
+          )}
+
+          {filterCategory === "gpu_count" && (
+            <>
+              {[
+                { value: "", label: "Any" },
+                { value: "1", label: "1 GPU" },
+                { value: "2", label: "2 GPUs" },
+                { value: "4", label: "4 GPUs" },
+                { value: "8", label: "8 GPUs" },
+              ]
+                .filter((option) =>
+                  option.label.toLowerCase().includes(filterSearch.toLowerCase())
+                )
+                .map((option) => (
+                  <label
+                    key={option.value}
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      padding: "8px 6px",
+                      cursor: "pointer",
+                      fontSize: "12px",
+                      color: "#374151",
+                      borderRadius: "4px",
+                      transition: "background-color 0.15s",
+                    }}
+                    onMouseEnter={(e) =>
+                      (e.currentTarget.style.backgroundColor = "#f3f4f6")
+                    }
+                    onMouseLeave={(e) =>
+                      (e.currentTarget.style.backgroundColor = "transparent")
+                    }
+                  >
+                    <input
+                      type="radio"
+                      checked={
+                        (filters.gpu_count?.toString() || "") === option.value
+                      }
+                      onChange={() =>
+                        onFiltersChange({
+                          ...filters,
+                          gpu_count: option.value
+                            ? parseInt(option.value)
+                            : undefined,
+                        })
+                      }
+                      style={{ marginRight: "10px", cursor: "pointer" }}
+                    />
+                    {option.label}
+                  </label>
+                ))}
+            </>
+          )}
+
+          {filterCategory === "security" && (
+            <>
+              {[
+                { value: "", label: "All" },
+                { value: "secure_cloud", label: "Secure Cloud" },
+                {
+                  value: "community_cloud",
+                  label: "Community Cloud",
+                },
+              ]
+                .filter((option) =>
+                  option.label.toLowerCase().includes(filterSearch.toLowerCase())
+                )
+                .map((option) => (
+                  <label
+                    key={option.value}
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      padding: "8px 6px",
+                      cursor: "pointer",
+                      fontSize: "12px",
+                      color: "#374151",
+                      borderRadius: "4px",
+                      transition: "background-color 0.15s",
+                    }}
+                    onMouseEnter={(e) =>
+                      (e.currentTarget.style.backgroundColor = "#f3f4f6")
+                    }
+                    onMouseLeave={(e) =>
+                      (e.currentTarget.style.backgroundColor = "transparent")
+                    }
+                  >
+                    <input
+                      type="radio"
+                      checked={(filters.security || "") === option.value}
+                      onChange={() =>
+                        onFiltersChange({
+                          ...filters,
+                          security: option.value || undefined,
+                        })
+                      }
+                      style={{ marginRight: "10px", cursor: "pointer" }}
+                    />
+                    {option.label}
+                  </label>
+                ))}
+            </>
+          )}
+
+          {filterCategory === "socket" && (
+            <>
+              {[
+                { value: "", label: "All" },
+                { value: "PCIe", label: "PCIe" },
+                { value: "SXM4", label: "SXM4" },
+                { value: "SXM5", label: "SXM5" },
+                { value: "SXM6", label: "SXM6" },
+              ]
+                .filter((option) =>
+                  option.label.toLowerCase().includes(filterSearch.toLowerCase())
+                )
+                .map((option) => (
+                  <label
+                    key={option.value}
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      padding: "8px 6px",
+                      cursor: "pointer",
+                      fontSize: "12px",
+                      color: "#374151",
+                      borderRadius: "4px",
+                      transition: "background-color 0.15s",
+                    }}
+                    onMouseEnter={(e) =>
+                      (e.currentTarget.style.backgroundColor = "#f3f4f6")
+                    }
+                    onMouseLeave={(e) =>
+                      (e.currentTarget.style.backgroundColor = "transparent")
+                    }
+                  >
+                    <input
+                      type="radio"
+                      checked={(filters.socket || "") === option.value}
+                      onChange={() =>
+                        onFiltersChange({
+                          ...filters,
+                          socket: option.value || undefined,
+                        })
+                      }
+                      style={{ marginRight: "10px", cursor: "pointer" }}
+                    />
+                    {option.label}
+                  </label>
+                ))}
+            </>
+          )}
+        </div>
+
+        {/* Action Buttons */}
+        <div style={{ display: "flex", gap: "10px" }}>
+          <button
+            onClick={onClose}
+            style={{
+              flex: 1,
+              padding: "8px 16px",
+              fontSize: "12px",
+              borderRadius: "6px",
+              border: "1px solid #d1d5db",
+              backgroundColor: "white",
+              color: "#374151",
+              cursor: "pointer",
+              fontWeight: 500,
+            }}
+          >
+            Cancel
+          </button>
+          <button
+            onClick={() => {
+              onApply();
+              onClose();
+            }}
+            style={{
+              flex: 1,
+              padding: "8px 16px",
+              fontSize: "12px",
+              borderRadius: "6px",
+              border: "none",
+              backgroundColor: "#3b82f6",
+              color: "white",
+              cursor: "pointer",
+              fontWeight: 500,
+            }}
+          >
+            Apply
+          </button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default FilterPopup;

frontend/components/popups/FolderPopup.tsx

@@ -0,0 +1,171 @@
+import React, { useState, useEffect } from 'react';
+import { Folder as FolderIcon, File as FileIcon, ArrowLeft, ArrowUp } from 'lucide-react';
+import { fetchFileTree, fetchFilePreview, type FileTreeItem } from '@/lib/api';
+
+interface FolderPopupProps {
+  onClose?: () => void;
+}
+
+type ViewState = 'list' | 'preview';
+
+const FolderPopup: React.FC<FolderPopupProps> = () => {
+  const [currentPath, setCurrentPath] = useState<string>('.');
+  const [rootPath, setRootPath] = useState<string>('');
+  const [items, setItems] = useState<FileTreeItem[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+  const [viewState, setViewState] = useState<ViewState>('list');
+  const [selectedFile, setSelectedFile] = useState<FileTreeItem | null>(null);
+  const [filePreview, setFilePreview] = useState<string>('');
+  const [previewLoading, setPreviewLoading] = useState<boolean>(false);
+  const [previewError, setPreviewError] = useState<string | null>(null);
+
+  useEffect(() => {
+    void loadDirectory(currentPath);
+  }, [currentPath]);
+
+  const loadDirectory = async (path: string) => {
+    setLoading(true);
+    setError(null);
+    setViewState('list');
+    try {
+      const data = await fetchFileTree(path);
+      setRootPath(data.root);
+      setCurrentPath(data.path);
+      setItems(data.items);
+    } catch (err: any) {
+      console.error('Failed to load files:', err);
+      setError(err.message || 'Failed to load files');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleItemClick = async (item: FileTreeItem) => {
+    if (item.type === 'directory') {
+      setSelectedFile(null);
+      setFilePreview('');
+      setPreviewError(null);
+      await loadDirectory(item.path);
+    } else {
+      await openFile(item);
+    }
+  };
+
+  const openFile = async (item: FileTreeItem) => {
+    setSelectedFile(item);
+    setViewState('preview');
+    setPreviewLoading(true);
+    setPreviewError(null);
+    try {
+      const text = await fetchFilePreview(item.path);
+      setFilePreview(text);
+    } catch (err: any) {
+      console.error('Failed to load file:', err);
+      setPreviewError(err.message || 'Failed to load file');
+    } finally {
+      setPreviewLoading(false);
+    }
+  };
+
+  const navigateUp = () => {
+    if (currentPath === '.' || currentPath === '') {
+      return;
+    }
+    const parts = currentPath.split('/');
+    parts.pop();
+    const parent = parts.join('/') || '.';
+    setCurrentPath(parent);
+  };
+
+  const renderToolbar = () => (
+    <div className="file-toolbar">
+      {viewState === 'preview' && (
+        <button type="button" className="file-toolbar-btn" onClick={() => setViewState('list')} aria-label="Back to files">
+          <ArrowLeft size={16} />
+        </button>
+      )}
+      {!(currentPath === '.' || currentPath === '') && (
+        <button type="button" className="file-toolbar-btn" onClick={navigateUp} aria-label="Up one directory">
+          <ArrowUp size={16} />
+        </button>
+      )}
+    </div>
+  );
+
+  const renderList = () => {
+    if (loading) {
+      return <div className="file-tree">Loading…</div>;
+    }
+
+    if (error) {
+      return (
+        <div className="error">
+          <p>{error}</p>
+          <button type="button" onClick={() => void loadDirectory(currentPath)}>Retry</button>
+        </div>
+      );
+    }
+
+    if (!items.length) {
+      return <div className="file-tree empty">No files found in this directory.</div>;
+    }
+
+    return (
+      <div className="file-tree">
+        <div className="file-list">
+          {items.map((item) => (
+            <div
+              key={item.path}
+              className={`file-item ${item.type}`}
+              onClick={() => void handleItemClick(item)}
+            >
+              {item.type === 'directory' ? (
+                <FolderIcon className="file-icon" size={18} />
+              ) : (
+                <FileIcon className="file-icon" size={18} />
+              )}
+              <div className="file-meta">
+                <span className="file-name">{item.name}</span>
+                <span className="file-details">
+                  {item.type === 'directory' ? 'Folder' : 'File'}
+                  {item.size !== undefined ? ` · ${item.size} bytes` : ''}
+                  {item.modified ? ` · ${new Date(item.modified).toLocaleString()}` : ''}
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  };
+
+  const renderPreview = () => {
+    if (!selectedFile) return null;
+
+    return (
+      <div className="file-preview">
+        <div className="file-preview-body">
+          {previewLoading ? (
+            <div className="file-preview-loading">Loading preview…</div>
+          ) : previewError ? (
+            <div className="error">{previewError}</div>
+          ) : (
+            <pre className="file-preview-content">{filePreview}</pre>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="file-browser">
+      {renderToolbar()}
+      <div className="file-tree-container">
+        {viewState === 'list' ? renderList() : renderPreview()}
+      </div>
+    </div>
+  );
+};
+
+export default FolderPopup;