ui: use build version for docs links

Makefile

@@ -1089,7 +1089,7 @@ ui-generate: $(UI_ROOT)/distccl/bindata.go
 .PHONY: ui-lint
 ui-lint: $(YARN_INSTALLED_TARGET) $(UI_PROTOS)
 	$(NODE_RUN) -C $(UI_ROOT) $(STYLINT) -c .stylintrc styl
-	$(NODE_RUN) -C $(UI_ROOT) $(TSLINT) -c tslint.json -p tsconfig.json --type-check
+	$(NODE_RUN) -C $(UI_ROOT) $(TSLINT) -c tslint.json -p tsconfig.json
 	@# TODO(benesch): Invoke tslint just once when palantir/tslint#2827 is fixed.
 	$(NODE_RUN) -C $(UI_ROOT) $(TSLINT) -c tslint.json *.js
 	@if $(NODE_RUN) -C $(UI_ROOT) yarn list | grep phantomjs; then echo ^ forbidden UI dependency >&2; exit 1; fi

pkg/server/server.go

@@ -44,6 +44,7 @@ import (
 
 	"github.com/cockroachdb/cmux"
 	"github.com/cockroachdb/cockroach/pkg/base"
+	"github.com/cockroachdb/cockroach/pkg/build"
 	"github.com/cockroachdb/cockroach/pkg/gossip"
 	"github.com/cockroachdb/cockroach/pkg/internal/client"
 	"github.com/cockroachdb/cockroach/pkg/kv"
@@ -1923,8 +1924,9 @@ func serveUIAssets(fileServer http.Handler, cfg Config) http.Handler {
 
 		// Construct arguments for template.
 		tmplArgs := ui.IndexHTMLArgs{
-			LoginEnabled:         cfg.RequireWebSession(),
 			ExperimentalUseLogin: cfg.EnableWebSessionAuthentication,
+			LoginEnabled:         cfg.RequireWebSession(),
+			Version:              build.VersionPrefix(),
 		}
 		loggedInUser, ok := request.Context().Value(loggedInUserKey{}).(string)
 		if ok && loggedInUser != "" {

pkg/server/server_test.go

@@ -31,6 +31,7 @@ import (
 	"time"
 
 	"github.com/cockroachdb/cockroach/pkg/base"
+	"github.com/cockroachdb/cockroach/pkg/build"
 	"github.com/cockroachdb/cockroach/pkg/config"
 	"github.com/cockroachdb/cockroach/pkg/internal/client"
 	"github.com/cockroachdb/cockroach/pkg/keys"
@@ -988,7 +989,13 @@ func TestServeIndexHTML(t *testing.T) {
 			t.Fatal(err)
 		}
 		respString := string(respBytes)
-		expected := fmt.Sprintf(htmlTemplate, `{"ExperimentalUseLogin":false,"LoginEnabled":false,"LoggedInUser":null}`)
+		expected := fmt.Sprintf(
+			htmlTemplate,
+			fmt.Sprintf(
+				`{"ExperimentalUseLogin":false,"LoginEnabled":false,"LoggedInUser":null,"Version":"%s"}`,
+				build.VersionPrefix(),
+			),
+		)
 		if respString != expected {
 			t.Fatalf("expected %s; got %s", expected, respString)
 		}
@@ -1012,8 +1019,20 @@ func TestServeIndexHTML(t *testing.T) {
 			client http.Client
 			json   string
 		}{
-			{loggedInClient, `{"ExperimentalUseLogin":true,"LoginEnabled":true,"LoggedInUser":"authentic_user"}`},
-			{loggedOutClient, `{"ExperimentalUseLogin":true,"LoginEnabled":true,"LoggedInUser":null}`},
+			{
+				loggedInClient,
+				fmt.Sprintf(
+					`{"ExperimentalUseLogin":true,"LoginEnabled":true,"LoggedInUser":"authentic_user","Version":"%s"}`,
+					build.VersionPrefix(),
+				),
+			},
+			{
+				loggedOutClient,
+				fmt.Sprintf(
+					`{"ExperimentalUseLogin":true,"LoginEnabled":true,"LoggedInUser":null,"Version":"%s"}`,
+					build.VersionPrefix(),
+				),
+			},
 		}
 
 		for _, testCase := range cases {

pkg/ui/package.json

@@ -102,7 +102,7 @@
     "stylus-loader": "^3.0.1",
     "thread-loader": "^1.1.1",
     "ts-loader": "^2.3.4",
-    "tslint": "^5.1.0",
+    "tslint": "^5.10.0",
     "typescript": "^2.2.1",
     "url-loader": "^0.5.8",
     "webpack": "^3.5.6",

pkg/ui/src/redux/analytics.ts

@@ -80,15 +80,15 @@ export class AnalyticsSync {
 
      /**
       * Construct a new AnalyticsSync object.
-      * @param analytics Underlying interface to push to the analytics service.
-      * @param store The redux store for the Admin UI.
+      * @param analyticsService Underlying interface to push to the analytics service.
+      * @param deprecatedStore The redux store for the Admin UI. [DEPRECATED]
       * @param redactions A list of redaction regular expressions, used to
       * scrub any potential personally-identifying information from the data
       * being tracked.
       */
     constructor(
-        private analytics: Analytics,
-        private store: Store<AdminUIState>,
+        private analyticsService: Analytics,
+        private deprecatedStore: Store<AdminUIState>,
         private redactions: PageTrackRedaction[],
     ) {}
 
@@ -147,13 +147,13 @@ export class AnalyticsSync {
         }
 
         // Do nothing if version information is not yet available.
-        const state = this.store.getState();
+        const state = this.deprecatedStore.getState();
         const versions = versionsSelector(state);
         if (_.isEmpty(versions)) {
             return;
         }
 
-        this.analytics.identify({
+        this.analyticsService.identify({
             userId: cluster_id,
             traits: {
                 version: versions[0],
@@ -170,7 +170,7 @@ export class AnalyticsSync {
      * to eventually retrieve this without having to request it ourselves.
      */
     private getCluster(): ClusterResponse | null {
-        const state = this.store.getState();
+        const state = this.deprecatedStore.getState();
 
         // Do nothing if cluster ID has not been loaded.
         const cluster = state.cachedData.cluster;
@@ -202,7 +202,7 @@ export class AnalyticsSync {
             search = "?" + params.toString();
         }
 
-        this.analytics.page({
+        this.analyticsService.page({
             userId: userID,
             name: path,
             properties: {

pkg/ui/src/redux/login.ts

@@ -5,20 +5,11 @@ import { Action } from "redux";
 import { userLogin } from "src/util/api";
 import { AdminUIState } from "src/redux/state";
 import { cockroach } from "src/js/protos";
+import { getDataFromServer } from "src/util/dataFromServer";
+
 import UserLoginRequest = cockroach.server.serverpb.UserLoginRequest;
 
-// Tell TypeScript about `window.loggedInUser`, which is set in a script
-// tag in index.html, the contents of which are generated in a Go template
-// server-side.
-declare global {
-  interface Window {
-    dataFromServer: {
-      ExperimentalUseLogin: boolean;
-      LoginEnabled: boolean;
-      LoggedInUser: string;
-    };
-  }
-}
+const dataFromServer = getDataFromServer();
 
 // State for application use.
 
@@ -94,11 +85,11 @@ class NoLoginState {
 export const selectLoginState = createSelector(
     (state: AdminUIState) => state.login,
     (login: LoginAPIState) => {
-        if (!window.dataFromServer || !window.dataFromServer.ExperimentalUseLogin) {
+        if (!dataFromServer.ExperimentalUseLogin) {
             return new NoLoginState();
         }
 
-        if (!window.dataFromServer.LoginEnabled) {
+        if (!dataFromServer.LoginEnabled) {
             return new LoginDisabledState();
         }
 
@@ -117,7 +108,7 @@ export interface LoginAPIState {
 }
 
 const emptyLoginState: LoginAPIState = {
-  loggedInUser: window.dataFromServer && window.dataFromServer.LoggedInUser,
+  loggedInUser: dataFromServer.LoggedInUser,
   error: null,
   inProgress: false,
 };

pkg/ui/src/redux/state.ts

@@ -31,7 +31,7 @@ export interface AdminUIState {
 export function createAdminUIStore() {
   const sagaMiddleware = createSagaMiddleware();
 
-  const store: Store<AdminUIState> = createStore(
+  const s: Store<AdminUIState> = createStore(
     combineReducers<AdminUIState>({
       cachedData: apiReducersReducer,
       hover: hoverReducer,
@@ -61,7 +61,7 @@ export function createAdminUIStore() {
   );
 
   sagaMiddleware.run(queryMetricsSaga);
-  return store;
+  return s;
 }
 
 export const store = createAdminUIStore();

pkg/ui/src/util/api.ts

@@ -159,7 +159,7 @@ function timeoutFetch<TResponse$Properties, TResponse, TResponseBuilder extends
   });
 }
 
-export type APIRequestFn<TRequest, TResponse> = (req: TRequest, timeout?: moment.Duration) => Promise<TResponse>;
+export type APIRequestFn<TReq, TResponse> = (req: TReq, timeout?: moment.Duration) => Promise<TResponse>;
 
 // propsToQueryString is a helper function that converts a set of object
 // properties to a query string
@@ -258,7 +258,7 @@ export function getLogs(req: LogsRequestMessage, timeout?: moment.Duration): Pro
 }
 
 // getLiveness gets cluster liveness information from the current node.
-export function getLiveness(_: LivenessRequestMessage, timeout?: moment.Duration): Promise<LivenessResponseMessage> {
+export function getLiveness(_req: LivenessRequestMessage, timeout?: moment.Duration): Promise<LivenessResponseMessage> {
   return timeoutFetch(serverpb.LivenessResponse, `${API_PREFIX}/liveness`, null, timeout);
 }
 

pkg/ui/src/util/dataFromServer.ts

@@ -0,0 +1,19 @@
+export interface DataFromServer {
+  ExperimentalUseLogin: boolean;
+  LoginEnabled: boolean;
+  LoggedInUser: string;
+  Version: string;
+}
+
+// Tell TypeScript about `window.dataFromServer`, which is set in a script
+// tag in index.html, the contents of which are generated in a Go template
+// server-side.
+declare global {
+  interface Window {
+    dataFromServer: DataFromServer;
+  }
+}
+
+export function getDataFromServer(): DataFromServer {
+  return window.dataFromServer || {};
+}

pkg/ui/src/util/docs.ts

@@ -1,7 +1,7 @@
-// TODO(benesch): Derive this URL from build.VersionPrefix() rather than
-// hardcoding it. This is harder than it sounds, since we don't want to encode
-// the branch name in embedded.go.
-const docsURLBase = "https://www.cockroachlabs.com/docs/v2.0";
+import { getDataFromServer } from "src/util/dataFromServer";
+
+const version = getDataFromServer().Version || "stable";
+const docsURLBase = "https://www.cockroachlabs.com/docs/" + version;
 
 export default function docsURL(pageName: string): string {
   return `${docsURLBase}/${pageName}`;

pkg/ui/src/views/cluster/components/linegraph/index.tsx

@@ -181,10 +181,10 @@ export class LineGraph extends React.Component<LineGraphProps, {}> {
   }
 
   render() {
-    const { title, subtitle, tooltip, data, hoverOn} = this.props;
+    const { title, subtitle, tooltip, data } = this.props;
 
     let hoverProps: Partial<React.SVGProps<SVGSVGElement>> = {};
-    if (hoverOn) {
+    if (this.props.hoverOn) {
       hoverProps = {
         onMouseMove: this.mouseMove,
         onMouseLeave: this.mouseLeave,

pkg/ui/src/views/cluster/containers/nodeGraphs/index.tsx

@@ -143,7 +143,7 @@ class NodeGraphs extends React.Component<NodeGraphsProps, {}> {
   }
 
   render() {
-    const { params, nodesSummary, hoverState, hoverOn, hoverOff } = this.props;
+    const { params, nodesSummary, hoverState } = this.props;
     const selectedDashboard = params[dashboardNameAttr];
     const dashboard = _.has(dashboards, selectedDashboard)
       ? selectedDashboard
@@ -179,6 +179,12 @@ class NodeGraphs extends React.Component<NodeGraphsProps, {}> {
       tooltipSelection,
     };
 
+    const forwardParams = {
+      hoverOn: this.props.hoverOn,
+      hoverOff: this.props.hoverOff,
+      hoverState: this.props.hoverState,
+    };
+
     // Generate graphs for the current dashboard, wrapping each one in a
     // MetricsDataProvider with a unique key.
     const graphs = dashboards[dashboard].component(dashboardProps);
@@ -187,7 +193,7 @@ class NodeGraphs extends React.Component<NodeGraphsProps, {}> {
       return (
         <div key={key}>
           <MetricsDataProvider id={key}>
-            { React.cloneElement(graph, { hoverOn, hoverOff, hoverState }) }
+            { React.cloneElement(graph, forwardParams) }
           </MetricsDataProvider>
         </div>
       );

pkg/ui/src/views/databases/containers/databaseGrants/index.tsx

@@ -14,7 +14,7 @@ import {
 } from "src/redux/apiReducers";
 
 import {
-    DatabaseSummaryBase, DatabaseSummaryExplicitData, databaseDetails, tableInfos, grants,
+    DatabaseSummaryBase, DatabaseSummaryExplicitData, databaseDetails, tableInfos, grants as selectGrants,
 } from "src/views/databases/containers/databaseSummary";
 
 class DatabaseGrantsSortedTable extends SortedTable<protos.cockroach.server.serverpb.DatabaseDetailsResponse.Grant> {}
@@ -86,7 +86,7 @@ export default connect(
       tableInfos: tableInfos(state, ownProps.name),
       sortSetting: grantsSortSetting.selector(state),
       dbResponse: databaseDetails(state)[ownProps.name] && databaseDetails(state)[ownProps.name].data,
-      grants: grants(state, ownProps.name),
+      grants: selectrants(state, ownProps.name),
     };
   },
   {

pkg/ui/src/views/databases/containers/databaseTables/index.tsx

@@ -18,7 +18,7 @@ import { Bytes } from "src/util/format";
 import { TableInfo } from "src/views/databases/data/tableInfo";
 
 import {
-    DatabaseSummaryBase, DatabaseSummaryExplicitData, databaseDetails, tableInfos, grants,
+    DatabaseSummaryBase, DatabaseSummaryExplicitData, databaseDetails, tableInfos as selectTableInfos, grants,
 } from "src/views/databases/containers/databaseSummary";
 
 const databaseTablesSortSetting = new LocalSetting<AdminUIState, SortSetting>(
@@ -124,7 +124,7 @@ class DatabaseSummaryTables extends DatabaseSummaryBase {
 export default connect(
   (state: AdminUIState, ownProps: DatabaseSummaryExplicitData) => {
     return {
-      tableInfos: tableInfos(state, ownProps.name),
+      tableInfos: selectTableInfos(state, ownProps.name),
       sortSetting: databaseTablesSortSetting.selector(state),
       dbResponse: databaseDetails(state)[ownProps.name] && databaseDetails(state)[ownProps.name].data,
       grants: grants(state, ownProps.name),

pkg/ui/src/views/databases/containers/tableDetails/index.tsx

@@ -143,7 +143,7 @@ class TableMain extends React.Component<TableMainProps, {}> {
  *         SELECTORS
  */
 
-function tableInfo(state: AdminUIState, props: RouterState): TableInfo {
+function selectTableInfo(state: AdminUIState, props: RouterState): TableInfo {
   const db = props.params[databaseNameAttr];
   const table = props.params[tableNameAttr];
   const details = state.cachedData.tableDetails[generateTableID(db, table)];
@@ -155,7 +155,7 @@ function tableInfo(state: AdminUIState, props: RouterState): TableInfo {
 const tableMainConnected = connect(
   (state: AdminUIState, ownProps: RouterState) => {
     return {
-      tableInfo: tableInfo(state, ownProps),
+      tableInfo: selectTableInfo(state, ownProps),
       grantsSortSetting: databaseTableGrantsSortSetting.selector(state),
     };
   },

pkg/ui/src/views/devtools/containers/raftMessages/index.tsx

@@ -6,7 +6,7 @@ import { InjectedRouter, RouterState } from "react-router";
 import { createSelector } from "reselect";
 
 import { refreshNodes, refreshLiveness } from "src/redux/apiReducers";
-import { hoverStateSelector, HoverState, hoverOn, hoverOff } from "src/redux/hover";
+import { hoverStateSelector, HoverState, hoverOn as hoverOnAction, hoverOff as hoverOffAction } from "src/redux/hover";
 import { nodesSummarySelector, NodesSummary } from "src/redux/nodes";
 import { AdminUIState } from "src/redux/state";
 import { nodeIDAttr } from "src/util/constants";
@@ -24,8 +24,8 @@ import messagesDashboard from "./messages";
 interface NodeGraphsOwnProps {
   refreshNodes: typeof refreshNodes;
   refreshLiveness: typeof refreshLiveness;
-  hoverOn: typeof hoverOn;
-  hoverOff: typeof hoverOff;
+  hoverOn: typeof hoverOnAction;
+  hoverOff: typeof hoverOffAction;
   nodesQueryValid: boolean;
   livenessQueryValid: boolean;
   nodesSummary: NodesSummary;
@@ -176,7 +176,7 @@ function mapStateToProps(state: AdminUIState) {
 const actions = {
   refreshNodes,
   refreshLiveness,
-  hoverOn,
-  hoverOff,
+  hoverOnAction,
+  hoverOffAction,
 };
 export default connect(mapStateToProps, actions)(NodeGraphs);

pkg/ui/src/views/devtools/containers/raftRanges/index.tsx

@@ -271,13 +271,13 @@ class RangesMain extends React.Component<RangesMainProps, RangesMainState> {
  */
 
 // Base selectors to extract data from redux state.
-const raftState = (state: AdminUIState): CachedDataReducerState<protos.cockroach.server.serverpb.RaftDebugResponse> => state.cachedData.raft;
+const selectRaftState = (state: AdminUIState): CachedDataReducerState<protos.cockroach.server.serverpb.RaftDebugResponse> => state.cachedData.raft;
 
 // Connect the RangesMain class with our redux store.
 const rangesMainConnected = connect(
   (state: AdminUIState) => {
     return {
-      state: raftState(state),
+      state: selectRaftState(state),
     };
   },
   {