Add more info on deployed version like commit sha date etc
Description
In a different project I've implemented a specific page called version that shows the following

I would like to include this info also in mapstore and i wan to open the discussion about it Proposal and ideas are welcome:
- one way is to create a dedicated page accessible via a specific url
- another way is to integrate these info in the Settings plugin, maybe with a collapsible panel
Acceptance criteria
- [ ] add previous information in mapstore
- [ ] TDB how to add them
Other useful information
@offtherailz @allyoucanmap @tdipisa let's discuss on how you would like do this
i don't have preferences, it can even be a flag button in the footer with a popover
@offtherailz @allyoucanmap @tdipisa let's discuss on how you would like do this
i don't have preferences, it can even be a flag button in the footer with a popover
@MV88 These seems more information for debugging purposes so I would prefer a separate html compiled during build phase instead of a react component, maybe using html replacement plugin in webpack..
@allyoucanmap it's just about to know which commit is effectively deployed
I'm ok also on your proposal, anyway projects that wants this have to update their config settings or add new html files
anyway projects that wants this have to update their config settings or add new html files
I think we could create the html file on the fly with a node script to avoid to update project
so everything I have done here can be in a script?
yes, it seems so anyway my it's only a proposal based on the description
probably the script is the best option because is more portable
I did not test it but I mean something like this
const path = require('path');
const fs = require('fs-extra');
const { GitRevisionPlugin } = require('git-revision-webpack-plugin');
const gitRevPlugin = new GitRevisionPlugin({
branchCommand: 'log -n1 --format=format:"Message: %s%nCommit: %H%nDate: %aD%nAuthor: %an"'
});
const versionHtmlFileDestination = path.join('path', 'to', 'dist', 'version.html');
const __COMMITHASH__ = gitRevPlugin.commithash();
const __COMMIT_DATA__ = gitRevPlugin.branch()
.replace("Message:", "<strong>Message:</strong>")
.replace("Author:", "<br/><strong>Author:</strong>")
.replace("Date:", "<br/><strong>Date:</strong>")
.replace("Commit:", "<br/><strong>Commit:</strong>");
const htmlContent = `
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style>
</style>
</head>
<body>
<ul class="version">
<li>
<span class="value-git commit-data">
${__COMMIT_DATA__}
</span>
</li>
<li>
<span class="label-git">
GITHUB:
</span>
<span class="value-git link-github">
<a href="https://github.com/geosolutions-it/webmapper-halliburton/tree/${__COMMITHASH__}" target="_blank" >Open github tree in a new tab </a>
</span>
</li>
</ul>
</body>
</html>
`;
fs.writeFileSync(versionHtmlFileDestination, htmlContent);
I would like to have a kind of Version plugin in options that may opens a modal window with relevantinfo or improve what we currently already have in Settings. In the first option we should clean up the Settings part.
@tdipisa I think we should clarify a bit the technical part for this issue For example where to fetch these data? In my previous post there is an implementation that includes changes to the core webpack configuration and this can be avoided if we go in the script direction + load data from a file
@offtherailz suggested to have a script that would generate a json file that will be fetched to then show these info in this new Version plugin
I can suggest that these info can be shown in the footer in a panel (no modal) opened by a click on a button similarly on what we do for CRS selector plugin
@barema4
As agreed with Tobia I would like to do as follows:
- [ ] extend webpack configuration in order to include commit sha as global variable
- [x] both for dev and prod
- [ ] also for standard template
- [ ] show this value in a new dedicated Version plugin to be visible in all main pages of mapstore
- [x] in normal viewer below sidebar after the login plugin
- [ ] in homepage as non logged user in a burger menu
- [ ] in home page as logged user in manager menu (burger menu of admins)
- [x] in dashboard in burger menu
- [x] in geostories in burger menu
- [ ] this plugin will show a modal when clicked with relevant information as the following ones
- [ ] for the button you can use the "button info" in following comment
you can take some inspiration from here
if you can't access the link these are the needed chagges for the first point
package.json
"git-revision-webpack-plugin": "5.0.0",
webpack-config.json or buildConfig
const { GitRevisionPlugin } = require('git-revision-webpack-plugin');
const DefinePlugin = require("webpack/lib/DefinePlugin");
const gitRevPlugin = new GitRevisionPlugin({
branchCommand: 'log -n1 --format=format:"Message: %s%nCommit: %H%nDate: %aD%nAuthor: %an"'
});
[
extractThemesPlugin,
ModuleFederationPlugin,
new DefinePlugin({
__COMMITHASH__: JSON.stringify(gitRevPlugin.commithash()),
__COMMIT_DATA__: JSON.stringify(gitRevPlugin.branch())
})
],
example of usage
<span className="value-git commit-data" dangerouslySetInnerHTML={{ __html: __COMMIT_DATA__
.replace("Message:", "<strong>Message:</strong>")
.replace("Author:", "<br/><strong>Author:</strong>")
.replace("Date:", "<br/><strong>Date:</strong>")
.replace("Commit:", "<br/><strong>Commit:</strong>")
}}>
button info
const githubUrl = "https://github.com/geosolutions-it/MapStore/tree/" + __COMMITHASH__;
<a href={githubUrl} target="_blank" ><Button> Open github tree in a new tab </Button></a>
I would like to have a kind of Version plugin in options that may opens a modal window with relevantinfo or improve what we currently already have in Settings. In the first option we should clean up the Settings part.
@MV88 as I clarified in our call today, my goal would be to:
- Have a dedicated plugin to be used also for dashboards and geostories burger menu since it is not possible not to understand the version there
- Have a kind of burger menu with that Version option also in home beside the user info one hat appears also to anonymous. As soon as the user is authenticated as admin it can stay durectly in the admin burger menu
- That version plugin can show all relevant info in a modal, I think such as:
- MS version and related commit (mandatory)
- GeoStore version and related commit (to be checked how, it can be optional for the moment if it requires to much work)
- Http_Proxy version and related commit (to be checked how, it can be optional for the moment if it requires to much work)
@tdipisa the following two Acceptance Criteria introduce a higher effort non initially planned. this is because ManagerMenu is hardcoded and does not accept injection of plugins. So I suggest to move them to a new issue to be tackled down in the future because it needs some refactoring and some more logic change
- in homepage as non logged user in a burger menu
- in home page as logged user in manager menu (burger menu of admins)
@barema4 please proceed as we agreed in our call
@tdipisa the following two Acceptance Criteria introduce a higher effort non initially planned. this is because ManagerMenu is hardcoded and does not accept injection of plugins. So I suggest to move them to a new issue to be tackled down in the future because it needs some refactoring and some more logic change
- in homepage as non logged user in a burger menu
- in home page as logged user in manager menu (burger menu of admins)
@barema4 please proceed as we agreed in our call
@MV88 ok, please open the new issue and assign it to me. Thank you.
@tdipisa here it is https://github.com/geosolutions-it/MapStore2/issues/8357
Hi @ barema4 after testing I found the following:
- the Version and About button icon on the Map Viewer sidebar is the same. @tdipisa I was wondering if it wasn't better to change the icon.

- The GitHub URL is incorrect. The GitHub 404 page opens. See the gif below:
https://user-images.githubusercontent.com/56537133/177306325-92bab35a-577d-45e9-9316-469326f6fedd.mov
@barema4 after a review of the current implementation it would be better if we leverage on the About for what is requested in this issue and we remove the version plugin completely from MS. Below is what we can do in my opinion:

Then, the About plugin should be also added to the Burger Menu of both dashboards and geostories
@MV88 @allyoucanmap let me know your thoughts
@tdipisa sounds good to me as we agreed in our internal call
Alright, @tdipisa @MV88. thanks for the feedback. Let me make the necessary changes as highlighted above.