0ct0pu5/kafka-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Display info about app version (#335)

Browse source 
* inject VERSION to npm build

* [issues#315] add new component VersionApp. Display application version in UI

* [CHORE] Adds info about app vesrsion

* fix mvn envs

* [CHORE] Cleanup and specs

Co-authored-by: mbovtryuk <mbovtryuk@provectus.com>
Co-authored-by: Oleg Shuralev <workshur@gmail.com>
This commit is contained in:
Rustam Gimadiev 2021-04-05 13:44:08 +03:00 • committed by GitHub
parent 7c0cc3bf14
commit 7bc01811c3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 163 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
kafka-ui-api/pom.xml
View file

@ -253,6 +253,29 @@
<id>prod</id>
<build>
<plugins>
<plugin>
<groupId>pl.project13.maven</groupId>
<artifactId>git-commit-id-plugin</artifactId>
<version>4.0.0</version>
<executions>
<execution>
<id>get-the-git-infos</id>
<goals>
<goal>revision</goal>
</goals>
<phase>initialize</phase>
</execution>
</executions>
<configuration>
<generateGitPropertiesFile>true</generateGitPropertiesFile>
<generateGitPropertiesFilename>${project.build.outputDirectory}/git.properties</generateGitPropertiesFilename>
<includeOnlyProperties>
<includeOnlyProperty>^git.build.(time|version)$</includeOnlyProperty>
<includeOnlyProperty>^git.commit.id.(abbrev|full)$</includeOnlyProperty>
</includeOnlyProperties>
<commitIdGenerationMode>full</commitIdGenerationMode>
</configuration>
</plugin>
<plugin>
<artifactId>maven-resources-plugin</artifactId>
<executions>
@ -279,6 +302,10 @@
<version>${frontend-maven-plugin.version}</version>
<configuration>
<workingDirectory>../kafka-ui-react-app</workingDirectory>
<environmentVariables>
<REACT_APP_TAG>v${project.version}</REACT_APP_TAG>
<REACT_APP_COMMIT>${git.commit.id.abbrev}</REACT_APP_COMMIT>
</environmentVariables>
</configuration>
<executions>
<execution>

9
kafka-ui-react-app/src/components/App.tsx
View file

@ -1,15 +1,17 @@
import './App.scss';
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import { GIT_TAG, GIT_COMMIT } from 'lib/constants';
import { Alerts } from 'redux/interfaces';
import NavContainer from './Nav/NavContainer';
import PageLoader from './common/PageLoader/PageLoader';
import Dashboard from './Dashboard/Dashboard';
import Cluster from './Cluster/Cluster';
import Version from './Version/Version';
import Alert from './Alert/Alert';
export interface AppProps {
isClusterListFetched: boolean;
isClusterListFetched?: boolean;
alerts: Alerts;
fetchClustersList: () => void;
}
@ -35,6 +37,11 @@ const App: React.FC<AppProps> = ({
Kafka UI
</a>
</div>
<div className="navbar-end">
<div className="navbar-item mr-2">
<Version tag={GIT_TAG} commit={GIT_COMMIT} />
</div>
</div>
</nav>
<main className="Layout__container">

35
kafka-ui-react-app/src/components/Version/Version.tsx Normal file
View file

@ -0,0 +1,35 @@
import React from 'react';
import { GIT_REPO_LINK } from 'lib/constants';
export interface VesionProps {
tag?: string;
commit?: string;
}
const Version: React.FC<VesionProps> = ({ tag, commit }) => {
if (!tag) {
return null;
}
return (
<div className="is-size-7 has-text-grey">
<span className="has-text-grey-light mr-1">Version:</span>
<span className="mr-1">{tag}</span>
{commit && (
<>
<span>&#40;</span>
<a
title="Current commit"
target="__blank"
href={`${GIT_REPO_LINK}/commit/${commit}`}
>
{commit}
</a>
<span>&#41;</span>
</>
)}
</div>
);
};
export default Version;

29
kafka-ui-react-app/src/components/Version/__tests__/Version.spec.tsx Normal file
View file

@ -0,0 +1,29 @@
import React from 'react';
import { mount } from 'enzyme';
import Version from '../Version';
const tag = 'v1.0.1-SHAPSHOT';
const commit = '123sdf34';
describe('Version', () => {
it('shows nothing if tag is not defined', () => {
const component = mount(<Version />);
expect(component.html()).toEqual(null);
});
it('shows current tag when only tag is defined', () => {
const component = mount(<Version tag={tag} />);
expect(component.text()).toContain(tag);
});
it('shows current tag and commit', () => {
const component = mount(<Version tag={tag} commit={commit} />);
expect(component.text()).toContain(tag);
expect(component.text()).toContain(commit);
});
it('matches snapshot', () => {
const component = mount(<Version tag={tag} commit={commit} />);
expect(component).toMatchSnapshot();
});
});

36
kafka-ui-react-app/src/components/Version/__tests__/__snapshots__/Version.spec.tsx.snap Normal file
View file

@ -0,0 +1,36 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Version matches snapshot 1`] = `
<Version
commit="123sdf34"
tag="v1.0.1-SHAPSHOT"
>
<div
className="is-size-7 has-text-grey"
>
<span
className="has-text-grey-light mr-1"
>
Version:
</span>
<span
className="mr-1"
>
v1.0.1-SHAPSHOT
</span>
<span>
(
</span>
<a
href="https://github.com/provectus/kafka-ui/commit/123sdf34"
target="__blank"
title="Current commit"
>
123sdf34
</a>
<span>
)
</span>
</div>
</Version>
`;

27
kafka-ui-react-app/src/components/__test__/App.spec.tsx → kafka-ui-react-app/src/components/__tests__/App.spec.tsx
View file

@ -1,7 +1,7 @@
import React from 'react';
import { mount, shallow } from 'enzyme';
import { Provider } from 'react-redux';
import { StaticRouter } from 'react-router';
import { StaticRouter } from 'react-router-dom';
import configureStore from 'redux/store/configureStore';
import App, { AppProps } from '../App';
@ -18,12 +18,7 @@ describe('App', () => {
/>
);
it('matches snapshot with initial props', () => {
const wrapper = shallow(setupComponent());
expect(wrapper).toMatchSnapshot();
});
it('correctly mounts App component', () => {
it('handles fetchClustersList', () => {
const wrapper = mount(
<Provider store={store}>
<StaticRouter>{setupComponent()}</StaticRouter>
@ -33,12 +28,13 @@ describe('App', () => {
expect(fetchClustersList).toHaveBeenCalledTimes(1);
});
it('correctly renders PageLoader', () => {
const wrapper = shallow(setupComponent({ isClusterListFetched: false }));
expect(wrapper.exists('PageLoader')).toBeTruthy();
wrapper.setProps({ isClusterListFetched: true });
expect(wrapper.exists('PageLoader')).toBeFalsy();
it('shows PageLoader until cluster list is fetched', () => {
const component = shallow(setupComponent({ isClusterListFetched: false }));
expect(component.exists('.Layout__container PageLoader')).toBeTruthy();
expect(component.exists('.Layout__container Switch')).toBeFalsy();
component.setProps({ isClusterListFetched: true });
expect(component.exists('.Layout__container PageLoader')).toBeFalsy();
expect(component.exists('.Layout__container Switch')).toBeTruthy();
});
it('correctly renders alerts', () => {
@ -57,4 +53,9 @@ describe('App', () => {
expect(wrapper.exists('Alert')).toBeTruthy();
expect(wrapper.find('Alert').length).toEqual(1);
});
it('matches snapshot', () => {
const component = shallow(setupComponent());
expect(component).toMatchSnapshot();
});
});

11
kafka-ui-react-app/src/components/__test__/__snapshots__/App.spec.tsx.snap → kafka-ui-react-app/src/components/__tests__/__snapshots__/App.spec.tsx.snap
View file

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`App matches snapshot with initial props 1`] = `
exports[`App matches snapshot 1`] = `
<div
className="Layout"
>
@ -19,6 +19,15 @@ exports[`App matches snapshot with initial props 1`] = `
Kafka UI
</a>
</div>
<div
className="navbar-end"
>
<div
className="navbar-item mr-2"
>
<Version />
</div>
</div>
</nav>
<main
className="Layout__container"

4
kafka-ui-react-app/src/lib/constants.ts
View file

@ -43,3 +43,7 @@ export const MILLISECONDS_IN_SECOND = 1_000;
export const BYTES_IN_GB = 1_073_741_824;
export const PER_PAGE = 25;
export const GIT_REPO_LINK = 'https://github.com/provectus/kafka-ui';
export const GIT_TAG = process.env.REACT_APP_TAG;
export const GIT_COMMIT = process.env.REACT_APP_COMMIT;