From 7bc01811c39aaf824fa1c991271fea2063b3ecbf Mon Sep 17 00:00:00 2001 From: Rustam Gimadiev Date: Mon, 5 Apr 2021 13:44:08 +0300 Subject: [PATCH] Display info about app version (#335) * 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 Co-authored-by: Oleg Shuralev --- kafka-ui-api/pom.xml | 27 ++++++++++++++ kafka-ui-react-app/src/components/App.tsx | 9 ++++- .../src/components/Version/Version.tsx | 35 ++++++++++++++++++ .../Version/__tests__/Version.spec.tsx | 29 +++++++++++++++ .../__snapshots__/Version.spec.tsx.snap | 36 +++++++++++++++++++ .../{__test__ => __tests__}/App.spec.tsx | 27 +++++++------- .../__snapshots__/App.spec.tsx.snap | 11 +++++- kafka-ui-react-app/src/lib/constants.ts | 4 +++ 8 files changed, 163 insertions(+), 15 deletions(-) create mode 100644 kafka-ui-react-app/src/components/Version/Version.tsx create mode 100644 kafka-ui-react-app/src/components/Version/__tests__/Version.spec.tsx create mode 100644 kafka-ui-react-app/src/components/Version/__tests__/__snapshots__/Version.spec.tsx.snap rename kafka-ui-react-app/src/components/{__test__ => __tests__}/App.spec.tsx (64%) rename kafka-ui-react-app/src/components/{__test__ => __tests__}/__snapshots__/App.spec.tsx.snap (82%) diff --git a/kafka-ui-api/pom.xml b/kafka-ui-api/pom.xml index e4f57e5bd3..a16cb80345 100644 --- a/kafka-ui-api/pom.xml +++ b/kafka-ui-api/pom.xml @@ -253,6 +253,29 @@ prod + + pl.project13.maven + git-commit-id-plugin + 4.0.0 + + + get-the-git-infos + + revision + + initialize + + + + true + ${project.build.outputDirectory}/git.properties + + ^git.build.(time|version)$ + ^git.commit.id.(abbrev|full)$ + + full + + maven-resources-plugin @@ -279,6 +302,10 @@ ${frontend-maven-plugin.version} ../kafka-ui-react-app + + v${project.version} + ${git.commit.id.abbrev} + diff --git a/kafka-ui-react-app/src/components/App.tsx b/kafka-ui-react-app/src/components/App.tsx index 9daf3dfb8a..29f81d5828 100644 --- a/kafka-ui-react-app/src/components/App.tsx +++ b/kafka-ui-react-app/src/components/App.tsx @@ -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 = ({ Kafka UI +
+
+ +
+
diff --git a/kafka-ui-react-app/src/components/Version/Version.tsx b/kafka-ui-react-app/src/components/Version/Version.tsx new file mode 100644 index 0000000000..954679ba27 --- /dev/null +++ b/kafka-ui-react-app/src/components/Version/Version.tsx @@ -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 = ({ tag, commit }) => { + if (!tag) { + return null; + } + + return ( +
+ Version: + {tag} + {commit && ( + <> + ( + + {commit} + + ) + + )} +
+ ); +}; + +export default Version; diff --git a/kafka-ui-react-app/src/components/Version/__tests__/Version.spec.tsx b/kafka-ui-react-app/src/components/Version/__tests__/Version.spec.tsx new file mode 100644 index 0000000000..84e4c011f5 --- /dev/null +++ b/kafka-ui-react-app/src/components/Version/__tests__/Version.spec.tsx @@ -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(); + expect(component.html()).toEqual(null); + }); + + it('shows current tag when only tag is defined', () => { + const component = mount(); + expect(component.text()).toContain(tag); + }); + + it('shows current tag and commit', () => { + const component = mount(); + expect(component.text()).toContain(tag); + expect(component.text()).toContain(commit); + }); + + it('matches snapshot', () => { + const component = mount(); + expect(component).toMatchSnapshot(); + }); +}); diff --git a/kafka-ui-react-app/src/components/Version/__tests__/__snapshots__/Version.spec.tsx.snap b/kafka-ui-react-app/src/components/Version/__tests__/__snapshots__/Version.spec.tsx.snap new file mode 100644 index 0000000000..6b3eb009dd --- /dev/null +++ b/kafka-ui-react-app/src/components/Version/__tests__/__snapshots__/Version.spec.tsx.snap @@ -0,0 +1,36 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Version matches snapshot 1`] = ` + +
+ + Version: + + + v1.0.1-SHAPSHOT + + + ( + + + 123sdf34 + + + ) + +
+ +`; diff --git a/kafka-ui-react-app/src/components/__test__/App.spec.tsx b/kafka-ui-react-app/src/components/__tests__/App.spec.tsx similarity index 64% rename from kafka-ui-react-app/src/components/__test__/App.spec.tsx rename to kafka-ui-react-app/src/components/__tests__/App.spec.tsx index 7118f1c999..f37dc02f11 100644 --- a/kafka-ui-react-app/src/components/__test__/App.spec.tsx +++ b/kafka-ui-react-app/src/components/__tests__/App.spec.tsx @@ -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( {setupComponent()} @@ -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(); + }); }); diff --git a/kafka-ui-react-app/src/components/__test__/__snapshots__/App.spec.tsx.snap b/kafka-ui-react-app/src/components/__tests__/__snapshots__/App.spec.tsx.snap similarity index 82% rename from kafka-ui-react-app/src/components/__test__/__snapshots__/App.spec.tsx.snap rename to kafka-ui-react-app/src/components/__tests__/__snapshots__/App.spec.tsx.snap index 4804189832..c6531a057f 100644 --- a/kafka-ui-react-app/src/components/__test__/__snapshots__/App.spec.tsx.snap +++ b/kafka-ui-react-app/src/components/__tests__/__snapshots__/App.spec.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`App matches snapshot with initial props 1`] = ` +exports[`App matches snapshot 1`] = `
@@ -19,6 +19,15 @@ exports[`App matches snapshot with initial props 1`] = ` Kafka UI
+
+
+ +
+