PragmaTwice commented on code in PR #281:
URL:
https://github.com/apache/kvrocks-controller/pull/281#discussion_r2003633860
##########
webui/src/app/page.tsx:
##########
@@ -17,19 +17,186 @@
* under the License.
*/
-import { Button, Container, Typography } from "@mui/material";
+"use client";
+
+import { Button, Typography, Box, Paper, Grid } 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 GitHubIcon from '@mui/icons-material/GitHub';
+import LaunchIcon from '@mui/icons-material/Launch';
+import MenuBookIcon from '@mui/icons-material/MenuBook';
+import Link from "next/link";
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";
+ }
+ ];
+
return (
- <div
- style={{minHeight: 'calc(100vh - 64px)', height: 'calc(100vh -
64px)'}}
- className={'flex flex-col items-center justify-center space-y-2
h-full'}
- >
- <Typography variant="h3">Kvrocks Controller UI</Typography>
- <Typography variant="body1">Work in progress...</Typography>
- <Button size="large" variant="outlined" sx={{ textTransform:
'none' }} href="https://github.com/apache/kvrocks-controller/issues/135";>
- Click here to submit your suggestions
- </Button>
+ <div className="flex flex-col min-h-[calc(100vh-64px)]
bg-gradient-to-b from-white to-gray-50 dark:from-dark dark:to-dark-paper">
+ {/* Hero Section */}
+ <section className="flex-grow flex flex-col items-center
justify-center px-6 py-12 text-center">
+ <div className="max-w-3xl mx-auto">
+ <div className="mb-8 mx-auto relative w-40 h-40">
+ <Image
+ src="/logo.svg"
+ alt="Kvrocks Logo"
+ layout="fill"
+ objectFit="contain"
+ priority
+ className="animate-[pulse_4s_ease-in-out_infinite]"
+ />
+ </div>
+
+ <Typography variant="h2" component="h1"
className="font-bold mb-4 text-gray-900 dark:text-gray-100">
+ Kvrocks <span className="text-primary
dark:text-primary-light">Controller</span>
+ </Typography>
+
+ <Typography variant="h6" className="mb-8 text-gray-600
dark:text-gray-300 max-w-2xl mx-auto">
+ A powerful management interface for Apache Kvrocks
clusters, enabling efficient distribution, monitoring, and maintenance of your
Redis compatible database infrastructure.
Review Comment:
```suggestion
A powerful management interface for Apache Kvrocks
clusters, enabling efficient distribution, monitoring, and maintenance of your
Redis compatible database infrastructure.
```
##########
webui/src/app/page.tsx:
##########
@@ -17,19 +17,186 @@
* under the License.
*/
-import { Button, Container, Typography } from "@mui/material";
+"use client";
+
+import { Button, Typography, Box, Paper, Grid } 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 GitHubIcon from '@mui/icons-material/GitHub';
+import LaunchIcon from '@mui/icons-material/Launch';
+import MenuBookIcon from '@mui/icons-material/MenuBook';
+import Link from "next/link";
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";
+ }
+ ];
+
return (
- <div
- style={{minHeight: 'calc(100vh - 64px)', height: 'calc(100vh -
64px)'}}
- className={'flex flex-col items-center justify-center space-y-2
h-full'}
- >
- <Typography variant="h3">Kvrocks Controller UI</Typography>
- <Typography variant="body1">Work in progress...</Typography>
- <Button size="large" variant="outlined" sx={{ textTransform:
'none' }} href="https://github.com/apache/kvrocks-controller/issues/135";>
- Click here to submit your suggestions
- </Button>
+ <div className="flex flex-col min-h-[calc(100vh-64px)]
bg-gradient-to-b from-white to-gray-50 dark:from-dark dark:to-dark-paper">
+ {/* Hero Section */}
+ <section className="flex-grow flex flex-col items-center
justify-center px-6 py-12 text-center">
+ <div className="max-w-3xl mx-auto">
+ <div className="mb-8 mx-auto relative w-40 h-40">
+ <Image
+ src="/logo.svg"
+ alt="Kvrocks Logo"
+ layout="fill"
+ objectFit="contain"
+ priority
+ className="animate-[pulse_4s_ease-in-out_infinite]"
+ />
+ </div>
+
+ <Typography variant="h2" component="h1"
className="font-bold mb-4 text-gray-900 dark:text-gray-100">
+ Kvrocks <span className="text-primary
dark:text-primary-light">Controller</span>
+ </Typography>
+
+ <Typography variant="h6" className="mb-8 text-gray-600
dark:text-gray-300 max-w-2xl mx-auto">
+ A powerful management interface for Apache Kvrocks
clusters, enabling efficient distribution, monitoring, and maintenance of your
Redis compatible database infrastructure.
Review Comment:
```suggestion
A powerful management interface for Apache Kvrocks
clusters, enabling efficient distribution, monitoring, and maintenance of your
Redis compatible database infrastructure.
```
--
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]
