From 8119c57cd171c9e5d156fd3a19fbd669787516e3 Mon Sep 17 00:00:00 2001 From: Simon Date: Tue, 31 Aug 2021 14:38:39 +0200 Subject: [PATCH] Import weave-gitops npm module! (#5) * Import weave-gitops npm module! - And try and make it work! * Adds the GITHUB_TOKEN need to pull weave-gitops npm module * wip * wip * basic styling * oops * novite --- .circleci/config.yml | 7 +- ui-cra/.npmrc | 2 + ui-cra/package.json | 1 + ui-cra/src/App.tsx | 35 +++++--- ui-cra/src/components/Applications/index.tsx | 20 +++++ .../{index.tsx => ResponsiveDrawer.tsx} | 36 +++++++- ui-cra/src/setupProxy.js | 8 ++ ui-cra/src/weave-gitops.d.ts | 21 +++++ ui-cra/yarn.lock | 84 ++++++++++++++++++- 9 files changed, 197 insertions(+), 17 deletions(-) create mode 100644 ui-cra/.npmrc create mode 100644 ui-cra/src/components/Applications/index.tsx rename ui-cra/src/components/{index.tsx => ResponsiveDrawer.tsx} (84%) create mode 100644 ui-cra/src/weave-gitops.d.ts diff --git a/.circleci/config.yml b/.circleci/config.yml index 6a21f1863a..7aefb1713d 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -223,7 +223,11 @@ jobs: steps: - checkout - setup_remote_docker - - run: make -j4 BUILD_IN_CONTAINER=false + - run: + name: "Build all the services" + command: | + export GITHUB_TOKEN=$WGE_NPM_GITHUB_TOKEN + make -j4 BUILD_IN_CONTAINER=false - deploy: name: Push mccp to S3 command: | @@ -809,6 +813,7 @@ jobs: export PATH=$GOROOT/bin:$PATH export SELENIUM_DEBUG=true + export GITHUB_TOKEN=$WGE_NPM_GITHUB_TOKEN make ui-build-for-tests cd test/integration/test go test -ginkgo.v -v -run TestMccpUI -ginkgo.skip=@Integration --timeout=99999s diff --git a/ui-cra/.npmrc b/ui-cra/.npmrc new file mode 100644 index 0000000000..7b4a51b46b --- /dev/null +++ b/ui-cra/.npmrc @@ -0,0 +1,2 @@ +@weaveworks:registry=https://npm.pkg.github.com +//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN} diff --git a/ui-cra/package.json b/ui-cra/package.json index 5ada79c4a7..47a67ffb0a 100644 --- a/ui-cra/package.json +++ b/ui-cra/package.json @@ -28,6 +28,7 @@ "@types/react-jsonschema-form": "^1.7.5", "@types/react-router-dom": "^5.1.7", "@types/styled-components": "^5.1.9", + "@weaveworks/weave-gitops": "0.0.4", "d3-scale": "3.2.1", "git-url-parse": "11.1.2", "http-proxy-middleware": "^2.0.0", diff --git a/ui-cra/src/App.tsx b/ui-cra/src/App.tsx index dc9c99ca66..29b5290c41 100644 --- a/ui-cra/src/App.tsx +++ b/ui-cra/src/App.tsx @@ -1,15 +1,15 @@ -import React, { FC } from "react"; -import { BrowserRouter } from "react-router-dom"; -import { muiTheme } from "./muiTheme"; -import { MuiThemeProvider } from "@material-ui/core/styles"; -import "@fortawesome/fontawesome-free/css/all.css"; -import { createGlobalStyle, ThemeProvider } from "styled-components"; -import theme from "weaveworks-ui-components/lib/theme"; -import { Theme } from "weaveworks-ui-components"; -import ProximaNova from "./fonts/proximanova-regular.woff"; -import RobotoMono from "./fonts/roboto-mono-regular.woff"; -import Background from "./assets/img/background.svg"; -import ResponsiveDrawer from "./components"; +import React, { FC } from 'react'; +import { BrowserRouter } from 'react-router-dom'; +import { muiTheme } from './muiTheme'; +import { MuiThemeProvider } from '@material-ui/core/styles'; +import '@fortawesome/fontawesome-free/css/all.css'; +import { createGlobalStyle, ThemeProvider } from 'styled-components'; +import theme from 'weaveworks-ui-components/lib/theme'; +import { Theme } from 'weaveworks-ui-components'; +import ProximaNova from './fonts/proximanova-regular.woff'; +import RobotoMono from './fonts/roboto-mono-regular.woff'; +import Background from './assets/img/background.svg'; +import ResponsiveDrawer from './components/ResponsiveDrawer'; const GlobalStyle = createGlobalStyle` /* https://github.com/weaveworks/wkp-ui/pull/283#discussion_r339958886 */ @@ -56,10 +56,19 @@ const GlobalStyle = createGlobalStyle` } `; +const withWGColors = { + ...theme, + colors: { + ...theme.colors, + primary: theme.colors.blue600, + success: theme.colors.green500, + }, +}; + const App: FC = () => { return ( - + diff --git a/ui-cra/src/components/Applications/index.tsx b/ui-cra/src/components/Applications/index.tsx new file mode 100644 index 0000000000..bc0f523d0b --- /dev/null +++ b/ui-cra/src/components/Applications/index.tsx @@ -0,0 +1,20 @@ +import React, { FC } from 'react'; +import { PageTemplate } from '../Layout/PageTemplate'; +import useClusters from '../../contexts/Clusters'; +import { SectionHeader } from '../Layout/SectionHeader'; +import { ContentWrapper } from '../Layout/ContentWrapper'; + +const TemplatesDashboard: FC = ({ children }) => { + const clustersCount = useClusters().count; + + return ( + + + {children} + + ); +}; + +export default TemplatesDashboard; diff --git a/ui-cra/src/components/index.tsx b/ui-cra/src/components/ResponsiveDrawer.tsx similarity index 84% rename from ui-cra/src/components/index.tsx rename to ui-cra/src/components/ResponsiveDrawer.tsx index fa0bb582e5..f950b4f0f2 100644 --- a/ui-cra/src/components/index.tsx +++ b/ui-cra/src/components/ResponsiveDrawer.tsx @@ -3,6 +3,7 @@ import { Switch, Route } from 'react-router-dom'; import ClustersProvider from '../contexts/Clusters/Provider'; import AlertsProvider from '../contexts/Alerts/Provider'; import MCCP from './Clusters'; +import ApplicationsPageWrapper from './Applications'; import TemplatesDashboard from './Templates'; import { Navigation } from './Navigation'; import { AlertsDashboard } from './Alerts'; @@ -17,6 +18,13 @@ import { Theme, createStyles, } from '@material-ui/core/styles'; +import { + AppContextProvider, + ApplicationDetail, + Applications, + applicationsClient, + // theme, +} from '@weaveworks/weave-gitops'; import TemplatesProvider from '../contexts/Templates/Provider'; import NotificationsProvider from '../contexts/Notifications/Provider'; import Compose from './ProvidersCompose'; @@ -25,9 +33,12 @@ import { PageTemplate } from './Layout/PageTemplate'; import { SectionHeader } from './Layout/SectionHeader'; import { ContentWrapper } from './Layout/ContentWrapper'; import Lottie from 'react-lottie-player'; -import error404 from './../assets/img/error404.json'; +import error404 from '../assets/img/error404.json'; import AddClusterWithCredentials from './Clusters/Create'; +const APPS_ROUTE = '/applications'; +const APP_DETAIL_ROTUE = '/application_detail'; + const drawerWidth = 220; const useStyles = makeStyles((theme: Theme) => @@ -77,6 +88,22 @@ const useStyles = makeStyles((theme: Theme) => }), ); +const WGAppProvider: React.FC = props => ( + +); + +const WGApplications = () => ( + + + +); + +const WGApplicationDetail = () => ( + + + +); + const ResponsiveDrawer = () => { const classes = useStyles(); const theme = useTheme(); @@ -107,6 +134,7 @@ const ResponsiveDrawer = () => { TemplatesProvider, ClustersProvider, AlertsProvider, + WGAppProvider, ]} >
@@ -169,6 +197,12 @@ const ResponsiveDrawer = () => { path="/clusters/templates" /> + + diff --git a/ui-cra/src/setupProxy.js b/ui-cra/src/setupProxy.js index 81d0f051fc..f02387d66d 100644 --- a/ui-cra/src/setupProxy.js +++ b/ui-cra/src/setupProxy.js @@ -4,6 +4,7 @@ const DEFAULT_PROXY_HOST = 'http://34.67.250.163:30080/'; const proxyHost = process.env.PROXY_HOST || DEFAULT_PROXY_HOST; const gitopsHost = process.env.GITOPS_HOST || proxyHost; const capiServerHost = process.env.CAPI_SERVER_HOST || proxyHost; +const wegoServerHost = process.env.WEGO_SERVER_HOST || proxyHost; module.exports = function (app) { app.use( @@ -13,6 +14,13 @@ module.exports = function (app) { changeOrigin: true, }), ); + app.use( + '/v1/applications', + createProxyMiddleware({ + target: wegoServerHost, + changeOrigin: true, + }), + ); app.use( '/v1', createProxyMiddleware({ diff --git a/ui-cra/src/weave-gitops.d.ts b/ui-cra/src/weave-gitops.d.ts new file mode 100644 index 0000000000..fc165921d0 --- /dev/null +++ b/ui-cra/src/weave-gitops.d.ts @@ -0,0 +1,21 @@ +/// + +declare module '@weaveworks/weave-gitops' { + import _AppContextProvider from './contexts/AppContext'; + import { Applications as appsClient } from './lib/api/applications/applications.pb'; + export declare const theme: import('styled-components').DefaultTheme; + export declare const AppContextProvider: typeof _AppContextProvider; + export declare const Applications: import('styled-components').StyledComponent< + ({ className }: { className?: string }) => JSX.Element, + import('styled-components').DefaultTheme, + {}, + never + >; + export declare const ApplicationDetail: import('styled-components').StyledComponent< + ({ className, name }: { className?: string; name: string }) => JSX.Element, + import('styled-components').DefaultTheme, + {}, + never + >; + export declare const applicationsClient: typeof appsClient; +} diff --git a/ui-cra/yarn.lock b/ui-cra/yarn.lock index 142121afdd..2da07c323c 100644 --- a/ui-cra/yarn.lock +++ b/ui-cra/yarn.lock @@ -1141,6 +1141,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.7.6": + version "7.15.3" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.3.tgz#2e1c2880ca118e5b2f9988322bd8a7656a32502b" + integrity sha512-OvwMLqNXkCXSz1kSm58sEsNuhqOx/fKpnUnKnFB5v8uDda5bLNEHNgKPvhDN6IU0LDcnHQ90LlJ0Q6jnyBSIBA== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/template@^7.10.4", "@babel/template@^7.12.13", "@babel/template@^7.3.3": version "7.12.13" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.13.tgz#530265be8a2589dbb37523844c5bcb55947fb327" @@ -2315,6 +2322,26 @@ "@typescript-eslint/types" "4.15.2" eslint-visitor-keys "^2.0.0" +"@weaveworks/weave-gitops@0.0.4": + version "0.0.4" + resolved "https://npm.pkg.github.com/download/@weaveworks/weave-gitops/0.0.4/fc8d34755955e02e2004edab9e4dd88f22aaf46b933498f048f0abb256f87644#036ece9f3da0a5c511494cf7db54926bcc7a2aef" + integrity sha512-cBCzwGp47a56NIKVN5A2Rgxwl4B8weg0Z+8bxLdX2syMbbZhWHqjtdba+2C+d7k5v3v4CED2M/jOYJHAvFzZlg== + dependencies: + "@material-ui/core" "^4.11.4" + "@material-ui/icons" "^4.11.2" + "@material-ui/lab" "^4.0.0-alpha.58" + history "^5.0.0" + lodash "^4.17.21" + luxon "^1.27.0" + postcss "^8.3.6" + query-string "^7.0.0" + react "^17.0.2" + react-dom "^17.0.2" + react-router "^5.2.0" + react-router-dom "^5.2.0" + react-toastify "^7.0.4" + styled-components "^5.3.0" + "@webassemblyjs/ast@1.9.0": version "1.9.0" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964" @@ -3637,7 +3664,7 @@ cliui@^6.0.0: strip-ansi "^6.0.0" wrap-ansi "^6.2.0" -clsx@^1.0.4: +clsx@^1.0.4, clsx@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188" integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA== @@ -3714,6 +3741,11 @@ colorette@^1.2.1: resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b" integrity sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw== +colorette@^1.2.2: + version "1.3.0" + resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.3.0.tgz#ff45d2f0edb244069d3b772adeb04fed38d0a0af" + integrity sha512-ecORCqbSFP7Wm8Y6lyqMJjexBQqXSF7SSeaTyGGphogUjBlFP9m9o08wy86HL2uB7fMTxtOUzLMk7ogKcxMg1w== + combined-stream@^1.0.6, combined-stream@~1.0.6: version "1.0.8" resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f" @@ -6065,6 +6097,13 @@ history@^4.9.0: tiny-warning "^1.0.0" value-equal "^1.0.1" +history@^5.0.0: + version "5.0.1" + resolved "https://registry.yarnpkg.com/history/-/history-5.0.1.tgz#de35025ed08bce0db62364b47ebbf9d97b5eb06a" + integrity sha512-5qC/tFUKfVci5kzgRxZxN5Mf1CV8NmJx9ByaPX0YTLx5Vz3Svh7NYp6eA4CpDq4iA9D0C1t8BNIfvQIrUI3mVw== + dependencies: + "@babel/runtime" "^7.7.6" + hmac-drbg@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1" @@ -7831,6 +7870,11 @@ lru-cache@^6.0.0: dependencies: yallist "^4.0.0" +luxon@^1.27.0: + version "1.28.0" + resolved "https://registry.yarnpkg.com/luxon/-/luxon-1.28.0.tgz#e7f96daad3938c06a62de0fb027115d251251fbf" + integrity sha512-TfTiyvZhwBYM/7QdAVDh+7dBTBA29v4ik0Ce9zda3Mnf8on1S5KJI8P2jKFZ8+5C0jhmr0KwJEO/Wdpm0VeWJQ== + lz-string@^1.4.4: version "1.4.4" resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26" @@ -8200,6 +8244,11 @@ nanoid@^3.1.20: resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.20.tgz#badc263c6b1dcf14b71efaa85f6ab4c1d6cfc788" integrity sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw== +nanoid@^3.1.23: + version "3.1.25" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.25.tgz#09ca32747c0e543f0e1814b7d3793477f9c8e152" + integrity sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q== + nanomatch@^1.2.9: version "1.2.13" resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119" @@ -9639,6 +9688,15 @@ postcss@^8.1.0: nanoid "^3.1.20" source-map "^0.6.1" +postcss@^8.3.6: + version "8.3.6" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.6.tgz#2730dd76a97969f37f53b9a6096197be311cc4ea" + integrity sha512-wG1cc/JhRgdqB6WHEuyLTedf3KIRuD0hG6ldkFEZNCjRxiC+3i6kkWUUbiJQayP28iwG35cEmAbe98585BYV0A== + dependencies: + colorette "^1.2.2" + nanoid "^3.1.23" + source-map-js "^0.6.2" + prelude-ls@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" @@ -9857,6 +9915,16 @@ query-string@^6.13.8: split-on-first "^1.0.0" strict-uri-encode "^2.0.0" +query-string@^7.0.0: + version "7.0.1" + resolved "https://registry.yarnpkg.com/query-string/-/query-string-7.0.1.tgz#45bd149cf586aaa582dffc7ec7a8ad97dd02f75d" + integrity sha512-uIw3iRvHnk9to1blJCG3BTc+Ro56CBowJXKmNNAm3RulvPBzWLRqKSiiDk+IplJhsydwtuNMHi8UGQFcCLVfkA== + dependencies: + decode-uri-component "^0.2.0" + filter-obj "^1.1.0" + split-on-first "^1.0.0" + strict-uri-encode "^2.0.0" + querystring-es3@^0.2.0: version "0.2.1" resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73" @@ -10092,7 +10160,7 @@ react-router@3.2.0: prop-types "^15.5.6" warning "^3.0.0" -react-router@5.2.0: +react-router@5.2.0, react-router@^5.2.0: version "5.2.0" resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.0.tgz#424e75641ca8747fbf76e5ecca69781aa37ea293" integrity sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw== @@ -10174,6 +10242,13 @@ react-scripts@4.0.3: optionalDependencies: fsevents "^2.1.3" +react-toastify@^7.0.4: + version "7.0.4" + resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-7.0.4.tgz#7d0b743f2b96f65754264ca6eae31911a82378db" + integrity sha512-Rol7+Cn39hZp5hQ/k6CbMNE2CKYV9E5OQdC/hBLtIQU2xz7DdAm7xil4NITQTHR6zEbE5RVFbpgSwTD7xRGLeQ== + dependencies: + clsx "^1.1.1" + react-transition-group@^4.4.0: version "4.4.1" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9" @@ -11067,6 +11142,11 @@ source-list-map@^2.0.0: resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34" integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw== +source-map-js@^0.6.2: + version "0.6.2" + resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e" + integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug== + source-map-resolve@^0.5.0, source-map-resolve@^0.5.2: version "0.5.3" resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"