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
weaveworks · Aug 31, 2021 · 8119c57 · 8119c57
1 parent 40bb9ab
commit 8119c57
Show file tree

Hide file tree

Showing 9 changed files with 197 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 (
  <BrowserRouter basename={process.env.PUBLIC_URL}>
- <ThemeProvider theme={theme as Theme}>
+ <ThemeProvider theme={withWGColors as Theme}>
  <MuiThemeProvider theme={muiTheme}>
  <GlobalStyle />
  <ResponsiveDrawer />

diff --git a/ui-cra/src/components/Applications/index.tsx 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 (
+ <PageTemplate documentTitle="WeGO · Templates">
+ <SectionHeader
+ path={[{ label: 'Clusters', url: '/clusters', count: clustersCount }]}
+ />
+ <ContentWrapper>{children}</ContentWrapper>
+ </PageTemplate>
+ );
+};
+
+export default TemplatesDashboard;
diff --git a/ui-cra/src/components/index.tsx → ui-cra/src/components/ResponsiveDrawer.tsx b/ui-cra/src/components/index.tsx → 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 => (
+ <AppContextProvider applicationsClient={applicationsClient} {...props} />
+);
+
+const WGApplications = () => (
+ <ApplicationsPageWrapper>
+ <Applications />
+ </ApplicationsPageWrapper>
+);
+
+const WGApplicationDetail = () => (
+ <ApplicationsPageWrapper>
+ <ApplicationDetail name="foo" />
+ </ApplicationsPageWrapper>
+);
+
 const ResponsiveDrawer = () => {
  const classes = useStyles();
  const theme = useTheme();
@@ -107,6 +134,7 @@ const ResponsiveDrawer = () => {
  TemplatesProvider,
  ClustersProvider,
  AlertsProvider,
+ WGAppProvider,
  ]}
  >
  <div className={classes.root}>
@@ -169,6 +197,12 @@ const ResponsiveDrawer = () => {
  path="/clusters/templates"
  />
  <Route component={AlertsDashboard} exact path="/clusters/alerts" />
+ <Route exact path={APPS_ROUTE} component={WGApplications} />
+ <Route
+ exact
+ path={APP_DETAIL_ROTUE}
+ component={WGApplicationDetail}
+ />
  <Route render={handle404} />
  </Switch>
  </main>

diff --git 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
@@ -0,0 +1,21 @@
+/// <reference types="react" />
+
+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
@@ -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/[email protected]":
+ 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/[email protected]":
  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 @@ [email protected]:
  prop-types "^15.5.6"
  warning "^3.0.0"
 
-[email protected]:
+[email protected], 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 @@ [email protected]:
  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"