PragmaTwice commented on code in PR #316:
URL:
https://github.com/apache/kvrocks-controller/pull/316#discussion_r2137204865
##########
webui/src/app/page.tsx:
##########
@@ -19,220 +19,780 @@
"use client";
-import { Button, Typography, Box, Paper, Grid } from "@mui/material";
+import React, { useCallback, useMemo } from "react";
+import mainImage from "./main.png";
+import {
+ Button,
+ Typography,
+ Box,
+ Grid,
+ Chip,
+ Card,
+ CardContent,
+ Container,
+ useMediaQuery,
+ useTheme as useMuiTheme,
+} from "@mui/material";
import Image from "next/image";
import { useRouter } from "next/navigation";
import { useTheme } from "./theme-provider";
import StorageIcon from "@mui/icons-material/Storage";
-import DnsIcon from "@mui/icons-material/Dns";
-import DeviceHubIcon from "@mui/icons-material/DeviceHub";
-import BarChartIcon from "@mui/icons-material/BarChart";
+import SyncIcon from "@mui/icons-material/Sync";
+import SecurityIcon from "@mui/icons-material/Security";
+import HubIcon from "@mui/icons-material/Hub";
import GitHubIcon from "@mui/icons-material/GitHub";
import LaunchIcon from "@mui/icons-material/Launch";
import MenuBookIcon from "@mui/icons-material/MenuBook";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
+import SpeedIcon from "@mui/icons-material/Speed";
+import CloudIcon from "@mui/icons-material/Cloud";
+import TerminalIcon from "@mui/icons-material/Terminal";
import Link from "next/link";
+import { useEffect, useState, useRef } from "react";
export default function Home() {
const router = useRouter();
const { isDarkMode } = useTheme();
- const currentYear = new Date().getFullYear(); // minor change: compute
current year once
-
- const features = [
- {
- title: "Cluster Management",
- description: "Create, modify, and monitor Redis clusters with an
intuitive interface",
- icon: (
- <StorageIcon
- sx={{ fontSize: 40 }}
- className="text-primary dark:text-primary-light"
- />
- ),
- },
- {
- title: "Shard Distribution",
- description:
- "Efficiently distribute data across multiple shards for
optimal performance",
- icon: (
- <DnsIcon sx={{ fontSize: 40 }} className="text-primary
dark:text-primary-light" />
- ),
- },
- {
- title: "Node Monitoring",
- description: "Monitor node health, performance, and connectivity
in real-time",
- icon: (
- <DeviceHubIcon
- sx={{ fontSize: 40 }}
- className="text-primary dark:text-primary-light"
- />
- ),
- },
- {
- title: "Advanced Metrics",
- description: "View detailed performance metrics to optimize your
infrastructure",
- icon: (
- <BarChartIcon
- sx={{ fontSize: 40 }}
- className="text-primary dark:text-primary-light"
- />
- ),
- },
- ];
-
- const resources = [
- {
- title: "Documentation",
- description: "Learn how to use Kvrocks Controller",
- icon: <MenuBookIcon sx={{ fontSize: 30 }} />,
- url: "https://kvrocks.apache.org/docs/";,
- },
- {
- title: "GitHub Repository",
- description: "View the source code on GitHub",
- icon: <GitHubIcon sx={{ fontSize: 30 }} />,
- url: "https://github.com/apache/kvrocks-controller";,
- },
- ];
+ const muiTheme = useMuiTheme();
+ const isMobile = useMediaQuery(muiTheme.breakpoints.down("md"));
+ const [isLoaded, setIsLoaded] = useState(true);
+ const [scrollY, setScrollY] = useState(0);
+ const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
+ const [cursorVisible, setCursorVisible] = useState(true);
+ const requestRef = useRef<number>();
+ const prevScrollY = useRef(0);
+
+ const terminalRef = useRef({ lineIndex: 0, charIndex: 0 });
+
+ const terminalLines = useMemo(
+ () => [
+ { text: "$ redis-cli -p 6666", className: "text-green-400" },
+ { text: '127.0.0.1:6666> SET mykey "Hello Kvrocks"', className:
"text-blue-400" },
+ { text: "OK", className: "text-yellow-400" },
+ { text: "127.0.0.1:6666> GET mykey", className: "text-blue-400" },
+ { text: '"Hello Kvrocks"', className: "text-yellow-400" },
+ { text: "127.0.0.1:6666> INFO", className: "text-blue-400" },
+ { text: "# Server", className: "text-yellow-200" },
+ { text: "redis_version:6.0.0", className: "text-yellow-400" },
+ { text: "kvrocks_version:2.0.0", className: "text-yellow-400" },
Review Comment:
```suggestion
{ text: "kvrocks_version:unstable", className: "text-yellow-400"
},
{ text: "kvrocks_git_sha1:fffffff", className: "text-yellow-400"
},
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
