From 0dbb969f10ced20bd4d3402301fe55ac78a3f6a9 Mon Sep 17 00:00:00 2001 From: FancMa01 Date: Thu, 22 Aug 2024 06:33:06 -0600 Subject: [PATCH] Mfancher/homepage (#830) * save progress * Finish Initial tutorial Added a tutorial when a user access' tombolo and doesn't have applications or clusters set up. Locked all components until these are set up. Guided tour with links to guides Once set up, unlocks rest of application * Initial tour finished Added back cluster tour on the cluster screen to work with new workflows. * Update leftNav reorganize left nav, comment out unused components, and fix highlighting * remove finish buttons * store collapsed in local storage * saving progress * apply fix css * Fix highlighting and redirecting * adjust look and feel to be more modern, add seperate css file * reverse the default state of left nav collapse to "fix" flicker * flicker fix for left nav default collapse state * further visible tweaks * tweak * updates * Update index.js --- Tombolo/client-reactjs/src/App.js | 23 ++-- .../src/components/application/home/home.css | 115 +++++++++++++++++ .../src/components/application/home/index.js | 119 ++++++++++++++++++ .../src/components/layout/LeftNav.js | 36 +++++- .../client-reactjs/src/images/logo-dark.webp | Bin 0 -> 2454 bytes Tombolo/client-reactjs/src/index.css | 4 + 6 files changed, 280 insertions(+), 17 deletions(-) create mode 100644 Tombolo/client-reactjs/src/components/application/home/home.css create mode 100644 Tombolo/client-reactjs/src/components/application/home/index.js create mode 100644 Tombolo/client-reactjs/src/images/logo-dark.webp diff --git a/Tombolo/client-reactjs/src/App.js b/Tombolo/client-reactjs/src/App.js index 079bb28d..eb328e7f 100644 --- a/Tombolo/client-reactjs/src/App.js +++ b/Tombolo/client-reactjs/src/App.js @@ -2,13 +2,15 @@ import React, { Suspense } from 'react'; import { connect } from 'react-redux'; import { Layout, ConfigProvider, Spin, Card, Tour } from 'antd'; import { Router, Route, Switch } from 'react-router-dom'; -import { Redirect } from 'react-router'; import history from './components/common/History'; import i18next from 'i18next'; import zh_CN from 'antd/es/locale/zh_CN'; // For every language import respective module from antd import en_US from 'antd/es/locale/en_US'; import logo from './images/logo.png'; +//home page +import Home from './components/application/home/index.js'; + // Auth pages import Assets from './components/application/Assets'; // This is "home" view, can go into main bundle const LoginPage = React.lazy(() => import('./components/login/LoginPage')); @@ -79,7 +81,7 @@ const BG_COLOR = ''; class App extends React.Component { state = { - collapsed: false, + collapsed: localStorage.getItem('collapsed') === 'true', locale: 'en', message: '', tourOpen: false, @@ -188,13 +190,8 @@ class App extends React.Component { return ; }; - const getAssets = () => { - const applicationId = this.props.application?.applicationId; - if (applicationId) { - return ; - } else { - return ; - } + const getHome = () => { + return ; }; //steps for tour @@ -343,8 +340,8 @@ class App extends React.Component { }> @@ -359,7 +356,7 @@ class App extends React.Component { ) : null} - + - {this.props.authWithAzure ? : null} + {this.props.authWithAzure ? : null} diff --git a/Tombolo/client-reactjs/src/components/application/home/home.css b/Tombolo/client-reactjs/src/components/application/home/home.css new file mode 100644 index 00000000..41b3e36b --- /dev/null +++ b/Tombolo/client-reactjs/src/components/application/home/home.css @@ -0,0 +1,115 @@ +.container { + display: flex; + flex-direction: column; + justify-content: space-between; + flex-wrap: wrap; + width: 100%; + height: calc(100% + 55px); + text-align: center; + font-size: 1.5rem; + min-height: 1300px; +} + +.container ul { + list-style: none; + padding-left: 0; +} + +.container ul li { + margin-bottom: 1rem; +} + +.header { + background: rgb(8, 85, 127); + color: white; + padding: 6rem; + width: 100%; + margin-bottom: 3rem; +} + +.top { + width: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + margin-top: -5px; + margin-bottom: 3rem; +} + +.middle { + width: 95%; + margin: 0 auto; + text-align: center; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.middle .ant-card { + width: 30%; + + font-size: 1.25rem; +} + +.footer { + background: rgb(48, 56, 70); + color: white; + padding: 2rem; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.footerRow { + width: 100%; + margin-bottom: 2rem; + display: flex; + flex-direction: row; + justify-content: space-between; + text-align: center; +} + +.footerRow a { + color: white; + text-decoration: underline; +} + +.footerRow p { + margin: 0 auto; + font-size: 1rem; +} + +.sub { + width: 30%; + font-size: 1rem; + margin-bottom: 3rem; +} + +.container .ant-card-head { + background: #002140; + color: white; +} + +/* @media breakpoint for tablets */ +@media (max-width: 1024px) { + .container { + height: auto; + } + + .middle { + margin-bottom: 3rem; + flex-direction: column; + } + .middle .ant-card { + width: 100%; + margin-bottom: 2rem; + } + + .footerRow { + flex-direction: column; + } + + .sub { + width: 100%; + } +} diff --git a/Tombolo/client-reactjs/src/components/application/home/index.js b/Tombolo/client-reactjs/src/components/application/home/index.js new file mode 100644 index 00000000..f665d364 --- /dev/null +++ b/Tombolo/client-reactjs/src/components/application/home/index.js @@ -0,0 +1,119 @@ +import React from 'react'; +import { Card } from 'antd'; +import { Link } from 'react-router-dom'; +import { useSelector } from 'react-redux'; +import logo from '../../../images/logo-dark.webp'; + +import './home.css'; + +const Home = () => { + //Redux + const { + applicationReducer: { + application: { applicationId }, + }, + } = useSelector((state) => state); + + return ( +
+
+
+

Welcome to Tombolo!

+

Transform and Process Data with Ease: Your Low-Code Bridge to HPCC Systems.

+
+ +
+ +

Workflows

+
+

Get started with creating your own workflows and jobs to process data.

+
+
    +
  • + Assets +
    • +
  • + Dataflows +
    • +
  • + Job Execution +
    • +
+ + +

Monitoring

+
+

Set up monitoring and alerts for when things go awry with your data processing jobs and files.

+
+
    +
  • + File Monitoring +
    • +
  • + Cluster Monitoring +
    • +
  • + Job Monitoring +
    • + +
  • + Superfile Monitoring +
    • +
+ + + +

Dashboards

+
+

Visualize all of the notifications produced by Tombolo, and cluster usage with dashboards.

+
+
    +
  • + Cluster Usage Dashboards +
    • +
  • + Notification Dashboards +
    • +
+ +
+
+
+
+
+

Powered by HPCC Systems

+

Tombolo is built on top of HPCC Systems, a powerful open-source platform for big data analysis.

+
+
+

Focus on What Matters

+

+ Tombolo lets you focus on your data and your analysis, without worrying about the underlying + infrastructure. +

+
+
+

Easy to Use

+

+ Tombolo is designed to be easy to use, with a simple UI and great{' '} + documentation to allow even non-technical users + access to big data tools and analysis. +

+
+
+
+ + HPCC Systems + +
+
+

+ Tombolo is an open source project maintained by{' '} + HPCC Systems. +

+
+
+
+ ); +}; + +export default Home; diff --git a/Tombolo/client-reactjs/src/components/layout/LeftNav.js b/Tombolo/client-reactjs/src/components/layout/LeftNav.js index 7b4cf9d8..e2f28562 100644 --- a/Tombolo/client-reactjs/src/components/layout/LeftNav.js +++ b/Tombolo/client-reactjs/src/components/layout/LeftNav.js @@ -65,11 +65,39 @@ class LeftNav extends Component { this.setState({ current: options[key] }); } } + } + + componentDidUpdate(prevProps) { + if (this.props.location.pathname !== prevProps.location.pathname) { + const options = { + '/': '0', + assets: '1', + dataflow: '2', + dataflowinstances: '3', + fileMonitoring: '4a', + directoryMonitoring: '4b', + clustermonitoring: '4c', + jobmonitoring: '4d', + superfileMonitoring: '4e', + orbitMonitoring: '4f', + notifications: '5a', + clusterUsage: '5b', + Orbit: '5c', + clusters: '6', + github: '8', + consumers: '9', + applications: '10', + integrations: '11', + msTeams: '12a', + }; - //check local storage for collapsed preference - const collapsed = localStorage.getItem('collapsed'); - if (collapsed === 'true') { - this.props.onCollapse(true); + // on init we check pathname if it contains options key in name, if it does => highlight that menu item + for (const key in options) { + let path = this.props.history.location.pathname; + if (path.includes(key)) { + this.setState({ current: options[key] }); + } + } } } diff --git a/Tombolo/client-reactjs/src/images/logo-dark.webp b/Tombolo/client-reactjs/src/images/logo-dark.webp new file mode 100644 index 0000000000000000000000000000000000000000..5e2bef29de4f4a112c2702e20d976cc79394e56b GIT binary patch literal 2454 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 Uv div { + margin: 0.5rem; +}