[WKP-2269] Adds server/ui version to the UI (#30)

* Adds server/ui version to the UI

* Fix ui linting

* Moves help/version outside the white content boxes

Makefile

@@ -147,7 +147,7 @@ cmd/ui-server/ui-server:
  CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -ldflags "-X main.version=$(VERSION)" -o $@ cmd/ui-server/*.go
 
 ui-cra/build:
- cd ui-cra && yarn install --frozen-lockfile && yarn build
+ cd ui-cra && yarn install --frozen-lockfile && REACT_APP_VERSION=$(VERSION) yarn build
 
 lint:
  bin/go-lint

ui-cra/src/components/Layout/ContentWrapper.tsx

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import styled, { css } from 'styled-components';
 import { spacing } from 'weaveworks-ui-components/lib/theme/selectors';
+import useVersions from '../../contexts/Versions';
 
 export const pageDimensionsCss = css`
  width: 100%;
@@ -16,7 +17,7 @@ const medium = spacing('medium');
 const large = spacing('large');
 
 export const contentCss = css`
- margin: ${medium} ${small} ${small} ${small};
+ margin: ${medium} ${small} 0 ${small};
  padding: ${large} ${medium} ${medium} ${medium};
  background-color: white;
  border-radius: ${spacing('xs')};
@@ -27,9 +28,11 @@ export const Content = styled.div`
 `;
 
 const HelpLinkWrapper = styled.div`
+ margin: 0 ${small};
+ padding: ${small} ${small};
  display: flex;
- justify-content: flex-end;
- margin-top: ${large};
+ flex-direction: column;
+ align-items: flex-end;
  color: ${({ theme }) => theme.colors.gray600};
  white-space: nowrap;
  line-height: 1.5em;
@@ -39,13 +42,17 @@ const HelpLinkWrapper = styled.div`
 `;
 
 export const ContentWrapper: FC = ({ children }) => {
+ const versions = useVersions();
  return (
- <Content>
- {children}
+ <>
+ <Content>{children}</Content>
  <HelpLinkWrapper>
- Need help? Contact us at&nbsp;
- <a href="mailto:[email protected]">[email protected]</a>
+ <div>
+ Need help? Contact us at{' '}
+ <a href="mailto:[email protected]">[email protected]</a>
+ </div>
+ <div>Version {versions.versions?.capiServer}</div>
  </HelpLinkWrapper>
- </Content>
+ </>
  );
 };

ui-cra/src/components/ResponsiveDrawer.tsx

@@ -27,6 +27,7 @@ import {
 } from '@weaveworks/weave-gitops';
 import TemplatesProvider from '../contexts/Templates/Provider';
 import NotificationsProvider from '../contexts/Notifications/Provider';
+import VersionsProvider from '../contexts/Versions/Provider';
 import Compose from './ProvidersCompose';
 import Box from '@material-ui/core/Box';
 import { PageTemplate } from './Layout/PageTemplate';
@@ -135,6 +136,7 @@ const ResponsiveDrawer = () => {
  ClustersProvider,
  AlertsProvider,
  WGAppProvider,
+ VersionsProvider,
  ]}
  >
  <div className={classes.root}>

ui-cra/src/contexts/Versions/Provider.tsx

@@ -0,0 +1,30 @@
+import React, { FC, useCallback, useEffect, useState } from 'react';
+import { ClustersService } from '../../capi-server/capi_server.pb';
+import { Versions, VersionData } from './index';
+
+const VersionsProvider: FC = ({ children }) => {
+ const [versions, setVersions] = useState<VersionData>({
+ ui: process.env.REACT_APP_VERSION || 'no version specified',
+ });
+
+ const getVersions = useCallback(() => {
+ ClustersService.GetEnterpriseVersion({}).then(res => {
+ console.log('weave-gitops-enterprise capiServer:', res.version);
+ setVersions(s => ({ ...s, capiServer: res.version }));
+ });
+ }, []);
+
+ useEffect(() => getVersions(), [getVersions]);
+
+ return (
+ <Versions.Provider
+ value={{
+ versions,
+ }}
+ >
+ {children}
+ </Versions.Provider>
+ );
+};
+
+export default VersionsProvider;

ui-cra/src/contexts/Versions/index.tsx

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+
+export interface VersionData {
+ ui: string;
+ capiServer?: string;
+}
+
+type VersionsContext = {
+ versions: VersionData | null;
+};
+
+export const Versions = createContext<VersionsContext | null>(null);
+
+export default () => useContext(Versions) as VersionsContext;

ui-cra/src/index.tsx

@@ -3,6 +3,8 @@ import ReactDOM from 'react-dom';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
+console.log('weave-gitops-enterprise ui:', process.env.REACT_APP_VERSION);
+
 ReactDOM.render(
  <React.StrictMode>
  <App />