layer5io/sistent

Create Next.js 14 replica app of Meshery UI

Opened this issue · 0 comments

nebula-aac commented

This open issue is to allow testing components outside of Meshery UI, as this will cause breaking issues while developing in the Meshery repository.

Features

  • Uses Next.js 14
  • Uses Next.js API Routes to rewrite routes and proxy incoming requests from the backend
  • Uses the latest libraries from MUI plus @mui/material-nextjs
  • Refactored Color definitions (will be added to Sistent)
  • Refactor components in Theme
  • Icons - testing to use SvgIcon from MUI
  • Move Provider's login into one - meshery/meshery#7212

Refactor Class components to Function components

Components that are transferred but worked on to be improved This list will change and reflect a potential name change in order to make sure refactoring easier

  • BBChart
  • Dashboard
  • ConnectionWizard
  • DateFormatter
  • DryRun
  • KubernetesEmptyState
  • ErrorBoundary
  • LifeCycle
  • Loading
  • Registry
  • Applications
  • Filters
  • Patterns or Designs
  • Performance
  • Modals
  • GenericModal
  • ConfirmationModal
  • TroubleshootingModal
  • ExportModal
  • ResultModal
  • EditorModal
  • LoadTestTimerModal
  • PromptModal
  • NotificationCenter
  • TypingFilter
  • Preferences
  • Carousel
  • Extensions
  • Connections
  • Subscription
  • EditorConfigurator
  • MeshModelConfigurator
  • Breadcrumb
  • Telemetry
  • Charts
  • Graphs
  • Avatar
  • ToolbarSelect
  • TableFooter
  • DatabaseSummary
  • FlipCard
  • Header
  • DateTimePicker
  • Metrics
  • MesheryPlay
  • ProgressBar
  • Results
  • Settings
  • SnackbarWrapper
  • Navigator
  • NavigatorExtension
  • ReactSelectWrapper
  • RemoteComponent
  • URLUploader
  • UploadImport
  • User
  • Validation
  • ViewSwitch
  • MuiltiSelect
  • Tooltip
  • EarlyAccessCard

Custom hooks

  • useDashboardRouter
  • useFetchUserData
  • useKubernetes
  • useMeshModelComponent
  • useNotification
  • usePreventUserFromLeaving
  • useStateCallback
  • useTelemetry
  • useUpdateMetadata

@reduxjst/toolkit slices

  • Theme mode
  • Authentication
  • Kubernetes configuration
  • Grafana configuration
  • Prometheus configuration
  • Load test performance configuration
  • Drawer state (may be moved to use state/props) that will pass through the components that uses this specifically
  • Provider login
  • Session data
  • User information
  • Version information
  • Progress

RTK Query

  • Provider login retrieval

Custom styled components

  • ConnectClustersButton
  • CreateButton
  • DashbaordInfoOutlined
  • DashbaordLayout
  • DashboardSection
  • DashboardSubMenuTab
  • DashboardTab
  • DashboardTabs
  • Errors404
  • InnerContainer
  • InnerContainerAnimate
  • MainContainer
  • MainContainerAnimate
  • MeshModelToolbar
  • PaperSquare
  • SearchAndView
  • ToolWrapper
  • ToolWrapperAnimate

To Do List

  • Research editor packages again and add to app

Contributor Guide