Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

release-22.2: ui: dynamically read ui data on js load #94067

Merged
merged 1 commit into from Dec 21, 2022
Merged

release-22.2: ui: dynamically read ui data on js load #94067

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 6 additions & 1 deletion pkg/ui/workspaces/db-console/src/index.tsx
View file
Open in desktop
Expand Up @@ -15,19 +15,24 @@ import "src/protobufInit";
import { alertDataSync } from "src/redux/alerts";
import { App } from "src/app";
import { history } from "src/redux/history";
import { store } from "src/redux/state";
import { createAdminUIStore } from "src/redux/state";
import "src/redux/analytics";
import {
DataFromServer,
fetchDataFromServer,
getDataFromServer,
setDataFromServer,
} from "src/util/dataFromServer";
import { recomputeDocsURLs } from "src/util/docs";

async function fetchAndRender() {
setDataFromServer(
(await fetchDataFromServer().catch(() => {})) as DataFromServer,
);

const store = createAdminUIStore(history, getDataFromServer());
recomputeDocsURLs();

ReactDOM.render(
<App history={history} store={store} />,
document.getElementById("react-layout"),
Expand Down
1 change: 1 addition & 0 deletions pkg/ui/workspaces/db-console/src/redux/login.ts
View file
Open in desktop
Expand Up @@ -105,6 +105,7 @@ class NoLoginState {
export const selectLoginState = createSelector(
(state: AdminUIState) => state.login,
(login: LoginAPIState) => {
const dataFromServer = getDataFromServer();
if (!dataFromServer.ExperimentalUseLogin) {
return new NoLoginState();
}
Expand Down
33 changes: 27 additions & 6 deletions pkg/ui/workspaces/db-console/src/redux/state.ts
View file
Open in desktop
Expand Up @@ -25,7 +25,6 @@ import {
RouterState,
} from "connected-react-router";
import { History } from "history";
import { history } from "./history";

import { apiReducersReducer, APIReducersState } from "./apiReducers";
import { hoverReducer, HoverState } from "./hover";
Expand All @@ -38,6 +37,7 @@ import { uiDataReducer, UIDataState } from "./uiData";
import { loginReducer, LoginAPIState } from "./login";
import rootSaga from "./sagas";
import { initializeAnalytics } from "./analytics";
import { DataFromServer } from "src/util/dataFromServer";

export interface AdminUIState {
cachedData: APIReducersState;
Expand All @@ -53,9 +53,24 @@ export interface AdminUIState {
login: LoginAPIState;
}

const emptyDataFromServer: DataFromServer = {
ExperimentalUseLogin: false,
LoggedInUser: "",
LoginEnabled: false,
NodeID: "",
OIDCAutoLogin: false,
OIDCButtonText: "",
OIDCLoginEnabled: false,
Tag: "",
Version: "",
};

// createAdminUIStore is a function that returns a new store for the admin UI.
// It's in a function so it can be recreated as necessary for testing.
export function createAdminUIStore(historyInst: History<any>) {
export function createAdminUIStore(
historyInst: History<any>,
dataFromServer: DataFromServer = emptyDataFromServer,
) {
const sagaMiddleware = createSagaMiddleware();
const routerReducer = connectRouter(historyInst);

Expand All @@ -73,6 +88,16 @@ export function createAdminUIStore(historyInst: History<any>) {
uiData: uiDataReducer,
login: loginReducer,
}),
{
login: {
loggedInUser: dataFromServer.LoggedInUser,
error: null,
inProgress: false,
oidcAutoLogin: dataFromServer.OIDCAutoLogin,
oidcLoginEnabled: dataFromServer.OIDCLoginEnabled,
oidcButtonText: dataFromServer.OIDCButtonText,
},
},
compose(
applyMiddleware(thunk, sagaMiddleware, routerMiddleware(historyInst)),
// Support for redux dev tools
Expand All @@ -99,8 +124,4 @@ export function createAdminUIStore(historyInst: History<any>) {
return s;
}

const store = createAdminUIStore(history);

export type AppDispatch = ThunkDispatch<AdminUIState, unknown, Action>;

export { store };
178 changes: 102 additions & 76 deletions pkg/ui/workspaces/db-console/src/util/docs.ts
View file
Open in desktop
Expand Up @@ -11,82 +11,54 @@
import { getDataFromServer } from "src/util/dataFromServer";

const stable = "stable";
const version = getDataFromServer().Version || stable;
const docsURLBase = "https://www.cockroachlabs.com/docs/" + version;
const docsURLBaseNoVersion = "https://www.cockroachlabs.com/docs/" + stable;

function docsURL(pageName: string): string {
const version = getDataFromServer().Version || stable;
const docsURLBase = "https://www.cockroachlabs.com/docs/" + version;
return `${docsURLBase}/${pageName}`;
}

function docsURLNoVersion(pageName: string): string {
const docsURLBaseNoVersion = "https://www.cockroachlabs.com/docs/" + stable;
return `${docsURLBaseNoVersion}/${pageName}`;
}

export const adminUILoginNoVersion = docsURLNoVersion(
export let adminUILoginNoVersion = docsURLNoVersion(
"ui-overview.html#db-console-security",
);
export const startFlags = docsURL("start-a-node.html#flags");
export const pauseJob = docsURL("pause-job.html");
export const cancelJob = docsURL("cancel-job.html");
export const enableNodeMap = docsURL("enable-node-map.html");
export const configureReplicationZones = docsURL(
"configure-replication-zones.html",
);
export const transactionalPipelining = docsURL(
"architecture/transaction-layer.html#transaction-pipelining",
);
export const adminUIAccess = docsURL("ui-overview.html#db-console-access");
export const howAreCapacityMetricsCalculated = docsURL(
"ui-storage-dashboard.html#capacity-metrics",
);
export const howAreCapacityMetricsCalculatedOverview = docsURL(
"ui-cluster-overview-page.html#capacity-metrics",
);
export const keyValuePairs = docsURL(
"architecture/distribution-layer.html#table-data",
);
export const writeIntents = docsURL(
"architecture/transaction-layer.html#write-intents",
);
export const metaRanges = docsURL(
"architecture/distribution-layer.html#meta-ranges",
);
export const databaseTable = docsURL("ui-databases-page.html");
export const jobTable = docsURL("ui-jobs-page.html");
export const jobStatus = docsURL("ui-jobs-page.html#job-status");
export const jobsPause = docsURL("pause-job");
export const jobsResume = docsURL("resume-job");
export const jobsCancel = docsURL("cancel-job");
export const statementsTable = docsURL("ui-statements-page.html");
export const statementDiagnostics = docsURL(
"ui-statements-page.html#diagnostics",
);
export const statementsSql = docsURL(
"ui-statements-page.html#sql-statement-fingerprints",
);
export const statementsRetries = docsURL(
"transactions.html#transaction-retries",
);
export const transactionRetryErrorReference = docsURL(
"transaction-retry-error-reference.html",
);
export const capacityMetrics = docsURL(
"ui-cluster-overview-page.html#capacity-metrics",
);
export const nodeLivenessIssues = docsURL(
"cluster-setup-troubleshooting.html#node-liveness-issues",
);
export const howItWork = docsURL("cockroach-quit.html#how-it-works");
export const clusterStore = docsURL("cockroach-start.html#store");
export const clusterGlossary = docsURL("architecture/overview.html#glossary");
export const clusterSettings = docsURL("cluster-settings.html");
export const reviewOfCockroachTerminology = docsURL(
"ui-replication-dashboard.html#review-of-cockroachdb-terminology",
);
export const privileges = docsURL("authorization.html#privileges");
export const showSessions = docsURL("show-sessions.html");
export const sessionsTable = docsURL("ui-sessions-page.html");
export let startFlags: string;
export let pauseJob: string;
export let cancelJob: string;
export let enableNodeMap: string;
export let configureReplicationZones: string;
export let transactionalPipelining: string;
export let adminUIAccess: string;
export let howAreCapacityMetricsCalculated: string;
export let howAreCapacityMetricsCalculatedOverview: string;
export let keyValuePairs: string;
export let writeIntents: string;
export let metaRanges: string;
export let databaseTable: string;
export let jobTable: string;
export let jobStatus: string;
export let jobsPause: string;
export let jobsResume: string;
export let jobsCancel: string;
export let statementsTable: string;
export let statementDiagnostics: string;
export let statementsSql: string;
export let statementsRetries: string;
export let transactionRetryErrorReference: string;
export let capacityMetrics: string;
export let nodeLivenessIssues: string;
export let howItWork: string;
export let clusterStore: string;
export let clusterGlossary: string;
export let clusterSettings: string;
export let reviewOfCockroachTerminology: string;
export let privileges: string;
export let showSessions: string;
export let sessionsTable: string;
// Note that these explicitly don't use the current version, since we want to
// link to the most up-to-date documentation available.
export const upgradeCockroachVersion =
Expand All @@ -97,16 +69,70 @@ export const enterpriseLicensing =
// Not actually a docs URL.
export const startTrial = "https://www.cockroachlabs.com/pricing/start-trial/";

export const reduceStorageOfTimeSeriesDataOperationalFlags = docsURL(
"operational-faqs.html#can-i-reduce-or-disable-the-storage-of-time-series-data",
);

export const performanceBestPracticesHotSpots = docsURL(
"performance-best-practices-overview.html#hot-spots",
);
export let reduceStorageOfTimeSeriesDataOperationalFlags: string;
export let performanceBestPracticesHotSpots: string;
export let uiDebugPages: string;
export let readsAndWritesOverviewPage: string;

export const uiDebugPages = docsURL("ui-debug-pages.html");
export const recomputeDocsURLs = () => {
adminUILoginNoVersion = docsURLNoVersion(
"ui-overview.html#db-console-security",
);
startFlags = docsURL("start-a-node.html#flags");
pauseJob = docsURL("pause-job.html");
cancelJob = docsURL("cancel-job.html");
enableNodeMap = docsURL("enable-node-map.html");
configureReplicationZones = docsURL("configure-replication-zones.html");
transactionalPipelining = docsURL(
"architecture/transaction-layer.html#transaction-pipelining",
);
adminUIAccess = docsURL("ui-overview.html#db-console-access");
howAreCapacityMetricsCalculated = docsURL(
"ui-storage-dashboard.html#capacity-metrics",
);
howAreCapacityMetricsCalculatedOverview = docsURL(
"ui-cluster-overview-page.html#capacity-metrics",
);
keyValuePairs = docsURL("architecture/distribution-layer.html#table-data");
writeIntents = docsURL("architecture/transaction-layer.html#write-intents");
metaRanges = docsURL("architecture/distribution-layer.html#meta-ranges");
databaseTable = docsURL("ui-databases-page.html");
jobTable = docsURL("ui-jobs-page.html");
jobStatus = docsURL("ui-jobs-page.html#job-status");
jobsPause = docsURL("pause-job");
jobsResume = docsURL("resume-job");
jobsCancel = docsURL("cancel-job");
statementsTable = docsURL("ui-statements-page.html");
statementDiagnostics = docsURL("ui-statements-page.html#diagnostics");
statementsSql = docsURL("ui-statements-page.html#sql-statement-fingerprints");
statementsRetries = docsURL("transactions.html#transaction-retries");
transactionRetryErrorReference = docsURL(
"transaction-retry-error-reference.html",
);
capacityMetrics = docsURL("ui-cluster-overview-page.html#capacity-metrics");
nodeLivenessIssues = docsURL(
"cluster-setup-troubleshooting.html#node-liveness-issues",
);
howItWork = docsURL("cockroach-quit.html#how-it-works");
clusterStore = docsURL("cockroach-start.html#store");
clusterGlossary = docsURL("architecture/overview.html#glossary");
clusterSettings = docsURL("cluster-settings.html");
reviewOfCockroachTerminology = docsURL(
"ui-replication-dashboard.html#review-of-cockroachdb-terminology",
);
privileges = docsURL("authorization.html#privileges");
showSessions = docsURL("show-sessions.html");
sessionsTable = docsURL("ui-sessions-page.html");
reduceStorageOfTimeSeriesDataOperationalFlags = docsURL(
"operational-faqs.html#can-i-reduce-or-disable-the-storage-of-time-series-data",
);
performanceBestPracticesHotSpots = docsURL(
"performance-best-practices-overview.html#hot-spots",
);
uiDebugPages = docsURL("ui-debug-pages.html");
readsAndWritesOverviewPage = docsURLNoVersion(
"architecture/reads-and-writes-overview.html#important-concepts",
);
};

export const readsAndWritesOverviewPage = docsURLNoVersion(
"architecture/reads-and-writes-overview.html#important-concepts",
);
recomputeDocsURLs();