implement server and client version check for updates

Author: x1unix

build/Dockerfile

@@ -13,7 +13,7 @@ COPY cmd ./cmd
 COPY pkg ./pkg
 COPY go.mod .
 COPY go.sum .
-RUN go build -o server ./cmd/playground && \
+RUN go build -o server -ldflags="-X 'main.Version=$APP_VERSION'" ./cmd/playground && \
     GOOS=js GOARCH=wasm go build -o ./worker.wasm ./cmd/webworker && \
     cp $(go env GOROOT)/misc/wasm/wasm_exec.js .
 

cmd/playground/main.go

@@ -18,6 +18,8 @@ import (
 	"go.uber.org/zap"
 )
 
+const Version = "testing"
+
 type appArgs struct {
 	packagesFile    string
 	addr            string
@@ -75,6 +77,7 @@ func start(goRoot string, args appArgs) error {
 		return fmt.Errorf("invalid cleanup interval parameter: %s", err)
 	}
 
+	zap.S().Info("Server version: ", Version)
 	zap.S().Infof("GOROOT is %q", goRoot)
 	zap.S().Infof("Packages file is %q", args.packagesFile)
 	zap.S().Infof("Cleanup interval is %s", cleanInterval.String())
@@ -94,7 +97,7 @@ func start(goRoot string, args appArgs) error {
 	go store.StartCleaner(ctx, cleanInterval, nil)
 
 	r := mux.NewRouter()
-	langserver.New(packages, compiler.NewBuildService(zap.S(), store)).
+	langserver.New(Version, packages, compiler.NewBuildService(zap.S(), store)).
 		Mount(r.PathPrefix("/api").Subrouter())
 	r.PathPrefix("/").Handler(langserver.SpaFileServer("./public"))
 

pkg/langserver/request.go

@@ -52,6 +52,14 @@ func (r *ErrorResponse) Write(w http.ResponseWriter) http.ResponseWriter {
 	return w
 }
 
+type VersionResponse struct {
+	Version string `json:"version"`
+}
+
+func (r VersionResponse) Write(w http.ResponseWriter) {
+	WriteJSON(w, r)
+}
+
 type SuggestionsResponse struct {
 	Suggestions []*analyzer.CompletionItem `json:"suggestions"`
 }

pkg/langserver/server.go

@@ -29,15 +29,17 @@ const (
 )
 
 type Service struct {
+	version  string
 	log      *zap.SugaredLogger
 	index    analyzer.PackageIndex
 	compiler compiler.BuildService
 	limiter  *rate.Limiter
 }
 
-func New(packages []*analyzer.Package, builder compiler.BuildService) *Service {
+func New(version string, packages []*analyzer.Package, builder compiler.BuildService) *Service {
 	return &Service{
 		compiler: builder,
+		version:  version,
 		log:      zap.S().Named("langserver"),
 		index:    analyzer.BuildPackageIndex(packages),
 		limiter:  rate.NewLimiter(rate.Every(frameTime), compileRequestsPerFrame),
@@ -46,6 +48,8 @@ func New(packages []*analyzer.Package, builder compiler.BuildService) *Service {
 
 // Mount mounts service on route
 func (s *Service) Mount(r *mux.Router) {
+	r.Path("/version").
+		HandlerFunc(WrapHandler(s.HandleGetVersion))
 	r.Path("/suggest").
 		HandlerFunc(WrapHandler(s.HandleGetSuggestion))
 	r.Path("/run").Methods(http.MethodPost).
@@ -113,6 +117,11 @@ func (s *Service) provideSuggestion(req SuggestionRequest) (*SuggestionsResponse
 	return s.lookupBuiltin(req.Value)
 }
 
+func (s *Service) HandleGetVersion(w http.ResponseWriter, r *http.Request) error {
+	WriteJSON(w, VersionResponse{Version: s.version})
+	return nil
+}
+
 func (s *Service) HandleGetSuggestion(w http.ResponseWriter, r *http.Request) error {
 	q := r.URL.Query()
 	value := q.Get("value")

web/src/Header.css

@@ -7,6 +7,21 @@
     min-height: 44px;
 }
 
+.app__update {
+    display: none;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    max-width: 500px;
+    z-index: 9999;
+}
+
+.app__update.app__update--visible {
+    display: block
+}
+
 .header__preloader {
     margin-right: 15px;
 }

web/src/Header.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
 import './Header.css'
+import { MessageBarButton } from 'office-ui-fabric-react';
 import {CommandBar, ICommandBarItemProps} from 'office-ui-fabric-react/lib/CommandBar';
+import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBar';
 import {getTheme} from '@uifabric/styling';
 import SettingsModal, {SettingsChanges} from './settings/SettingsModal';
 import AboutModal from './AboutModal';
 import config from './services/config';
+import api from './services/api';
 import { getSnippetsMenuItems, SnippetMenuItem } from './utils/headerutils';
 import {
     Connect,
@@ -19,13 +22,12 @@ import {
 } from './store';
 import ChangeLogModal from "./ChangeLogModal";
 
-
-
 interface HeaderState {
     showSettings: boolean
     showAbout: boolean
     showChangelog: boolean
     loading: boolean
+    showUpdateBanner: boolean
 }
 
 @Connect(s => ({darkMode: s.settings.darkMode, loading: s.status?.loading}))
@@ -39,7 +41,8 @@ export class Header extends React.Component<any, HeaderState> {
             showSettings: false,
             showAbout: false,
             showChangelog: false,
-            loading: false
+            loading: false,
+            showUpdateBanner: false
         };
     }
 
@@ -49,6 +52,13 @@ export class Header extends React.Component<any, HeaderState> {
         fileElement.accept = '.go';
         fileElement.addEventListener('change', () => this.onItemSelect(), false);
         this.fileInput = fileElement;
+
+        // show update popover
+        api.getVersion().then(r => {
+            const {version} = r;
+            if (!version) return;
+            this.setState({showUpdateBanner: version !== config.appVersion});
+        }).catch(err => console.warn('failed to check server API version: ', err));
     }
 
     onItemSelect() {
@@ -208,6 +218,23 @@ export class Header extends React.Component<any, HeaderState> {
 
     render() {
         return <header className='header' style={this.styles}>
+            <MessageBar
+                className={this.state.showUpdateBanner ? 'app__update app__update--visible' : 'app__update'}
+                messageBarType={MessageBarType.warning}
+                onDismiss={() => this.setState({showUpdateBanner: false})}
+                dismissButtonAriaLabel="Close"
+                isMultiline={false}
+                actions={
+                    <div>
+                        <MessageBarButton onClick={() => {
+                            this.setState({showUpdateBanner: false});
+                            config.forceRefreshPage();
+                        }}>Action</MessageBarButton>
+                    </div>
+                }
+            >
+                Web application was updated, click <b>Reload</b> to apply changes
+            </MessageBar>
             <img
                 src='/go-logo-blue.svg'
                 className='header__logo'

web/src/services/api.ts

@@ -36,9 +36,15 @@ export interface BuildResponse {
     fileName: string
 }
 
+export interface VersionResponse {
+    version: string
+}
+
 export interface IAPIClient {
     readonly axiosClient: AxiosInstance
 
+    getVersion(): Promise<VersionResponse>
+
     getSuggestions(query: { packageName?: string, value?: string }): Promise<monaco.languages.CompletionList>
 
     evaluateCode(code: string, format: boolean): Promise<RunResponse>
@@ -71,6 +77,10 @@ class Client implements IAPIClient {
     constructor(private client: axios.AxiosInstance) {
     }
 
+    async getVersion(): Promise<VersionResponse> {
+        return this.get<VersionResponse>(`/version?=${Date.now()}`)
+    }
+
     async getSuggestions(query: { packageName?: string, value?: string }): Promise<monaco.languages.CompletionList> {
         const queryParams = Object.keys(query).map(k => `${k}=${query[k]}`).join('&');
         return this.get<monaco.languages.CompletionList>(`/suggest?${queryParams}`);

web/src/services/config.ts

@@ -139,5 +139,9 @@ export default {
 
     sync() {
         setThemeStyles(this.darkThemeEnabled);
+    },
+
+    forceRefreshPage() {
+        document.location.reload(true);
     }
 };