Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Merge branch 'master' into release

Browse Source
This commit is contained in:
Nikhil Nandagopal 2020-09-24 21:36:08 +05:30
commit fa20d54bd0
13 changed files with 163 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
app/client/src/AppRouter.tsx
View File

@ -1,8 +1,7 @@
import React, { Suspense } from "react";
import history from "utils/history";
import AppHeader from "pages/common/AppHeader";
import { Redirect, Router, Switch } from "react-router-dom";
import AppRoute from "pages/common/AppRoute";
import { Redirect, Route, Router, Switch } from "react-router-dom";
import {
APP_VIEW_URL,
APPLICATIONS_URL,
@ -28,70 +27,81 @@ import Users from "pages/users";
import PageNotFound from "pages/common/PageNotFound";
import PageLoadingBar from "pages/common/PageLoadingBar";
import ServerUnavailable from "pages/common/ServerUnavailable";
import { getThemeDetails } from "selectors/themeSelectors";
import { ThemeMode } from "reducers/uiReducers/themeReducer";
import { AppState } from "reducers";
import { setThemeMode } from "actions/themeActions";
import { connect } from "react-redux";
import * as Sentry from "@sentry/react";
const SentryRoute = Sentry.withSentryRouting(Route);
const loadingIndicator = <PageLoadingBar />;
function changeAppBackground(currentTheme: any) {
if (
window.location.pathname === "/applications" ||
window.location.pathname.indexOf("/settings/") !== -1
) {
document.body.style.backgroundColor =
currentTheme.colors.homepageBackground;
} else {
document.body.style.backgroundColor = currentTheme.colors.appBackground;
}
}
class AppRouter extends React.Component<any, any> {
render() {
const { currentTheme } = this.props;
// This is needed for the theme switch.
changeAppBackground(currentTheme);
// This is needed for the route switch.
history.listen(() => {
changeAppBackground(currentTheme);
});
return (
<Router history={history}>
<Suspense fallback={loadingIndicator}>
<AppHeader />
<Switch>
<AppRoute
exact
path={BASE_URL}
component={LandingScreen}
name={"App"}
/>
<SentryRoute exact path={BASE_URL} component={LandingScreen} />
<Redirect exact from={BASE_LOGIN_URL} to={AUTH_LOGIN_URL} />
<Redirect exact from={BASE_SIGNUP_URL} to={SIGN_UP_URL} />
<AppRoute
path={ORG_URL}
component={OrganizationLoader}
name={"Organisation"}
/>
<AppRoute exact path={USERS_URL} component={Users} name={"Users"} />
<AppRoute
path={USER_AUTH_URL}
component={UserAuth}
name={"UserAuth"}
/>
<AppRoute
<SentryRoute path={ORG_URL} component={OrganizationLoader} />
<SentryRoute exact path={USERS_URL} component={Users} />
<SentryRoute path={USER_AUTH_URL} component={UserAuth} />
<SentryRoute
exact
path={APPLICATIONS_URL}
component={ApplicationListLoader}
name={"Home"}
/>
<AppRoute
path={BUILDER_URL}
component={EditorLoader}
name={"Editor"}
/>
<AppRoute
path={APP_VIEW_URL}
component={AppViewerLoader}
name={"AppViewer"}
logDisable
/>
<AppRoute
<SentryRoute path={BUILDER_URL} component={EditorLoader} />
<SentryRoute path={APP_VIEW_URL} component={AppViewerLoader} />
<SentryRoute
exact
path={PAGE_NOT_FOUND_URL}
component={PageNotFound}
name={"PageNotFound"}
/>
<AppRoute
<SentryRoute
exact
path={SERVER_ERROR_URL}
component={ServerUnavailable}
name={"ServerError"}
/>
<AppRoute component={PageNotFound} name={"PageNotFound"} />
<SentryRoute component={PageNotFound} />
</Switch>
</Suspense>
</Router>
);
}
}
const mapStateToProps = (state: AppState) => ({
currentTheme: getThemeDetails(state).theme,
});
const mapDispatchToProps = (dispatch: any) => ({
setTheme: (mode: ThemeMode) => {
dispatch(setThemeMode(mode));
},
});
export default AppRouter;
export default connect(mapStateToProps, mapDispatchToProps)(AppRouter);

9
app/client/src/components/editorComponents/Sidebar.tsx
View File

@ -1,9 +1,12 @@
import React, { memo } from "react";
import React, { memo, useEffect } from "react";
import styled from "styled-components";
import ExplorerSidebar from "pages/Editor/Explorer";
import { PanelStack, Classes } from "@blueprintjs/core";
import { Colors } from "constants/Colors";
import * as Sentry from "@sentry/react";
import PerformanceTracker, {
PerformanceTransactionName,
} from "utils/PerformanceTracker";
const SidebarWrapper = styled.div`
background-color: ${Colors.MINE_SHAFT};
@ -24,6 +27,10 @@ const SidebarWrapper = styled.div`
const initialPanel = { component: ExplorerSidebar };
export const Sidebar = memo(() => {
PerformanceTracker.startTracking(PerformanceTransactionName.SIDE_BAR_MOUNT);
useEffect(() => {
PerformanceTracker.stopTracking();
});
return (
<SidebarWrapper className="t--sidebar">
<PanelStack initialPanel={initialPanel} showPanelHeader={false} />

8
app/client/src/pages/AppViewer/index.tsx
View File

@ -1,7 +1,7 @@
import React, { Component } from "react";
import styled from "styled-components";
import { connect } from "react-redux";
import { withRouter, RouteComponentProps } from "react-router";
import { withRouter, RouteComponentProps, Route } from "react-router";
import { Switch } from "react-router-dom";
import { AppState } from "reducers";
import {
@ -21,9 +21,9 @@ import {
resetChildrenMetaProperty,
updateWidgetMetaProperty,
} from "actions/metaActions";
import AppRoute from "pages/common/AppRoute";
import { editorInitializer } from "utils/EditorUtils";
import * as Sentry from "@sentry/react";
const SentryRoute = Sentry.withSentryRouting(Route);
const AppViewerBody = styled.section`
display: flex;
@ -84,12 +84,10 @@ class AppViewer extends Component<
<AppViewerBody>
{isInitialized && this.state.registered && (
<Switch>
<AppRoute
<SentryRoute
path={getApplicationViewerPageURL()}
exact
component={AppViewerPageContainer}
name={"AppViewerPageContainer"}
logDisable
/>
</Switch>
)}

10
app/client/src/pages/Editor/Explorer/index.tsx
View File

@ -1,4 +1,4 @@
import React, { useRef, MutableRefObject, useCallback } from "react";
import React, { useRef, MutableRefObject, useCallback, useEffect } from "react";
import styled from "styled-components";
import Divider from "components/editorComponents/Divider";
import {
@ -18,6 +18,9 @@ import history from "utils/history";
import { useParams } from "react-router";
import { ExplorerURLParams } from "./helpers";
import JSDependencies from "./JSDependencies";
import PerformanceTracker, {
PerformanceTransactionName,
} from "utils/PerformanceTracker";
const Wrapper = styled.div`
height: 100%;
@ -40,7 +43,10 @@ const EntityExplorer = (props: IPanelProps) => {
const searchInputRef: MutableRefObject<HTMLInputElement | null> = useRef(
null,
);
PerformanceTracker.startTracking(PerformanceTransactionName.ENTITY_EXPLORER);
useEffect(() => {
PerformanceTracker.stopTracking();
});
const explorerRef = useRef<HTMLDivElement | null>(null);
const { searchKeyword, clearSearch } = useFilteredEntities(searchInputRef);
const datasources = useFilteredDatasources(searchKeyword);

15
app/client/src/pages/Editor/MainContainer.tsx
View File

@ -3,10 +3,12 @@ import EditorsRouter from "./routes";
import WidgetsEditor from "./WidgetsEditor";
import styled from "styled-components";
import Sidebar from "components/editorComponents/Sidebar";
import { Switch } from "react-router";
import AppRoute from "../common/AppRoute";
import { Route, Switch } from "react-router";
import { BUILDER_URL } from "constants/routes";
import * as Sentry from "@sentry/react";
const SentryRoute = Sentry.withSentryRouting(Route);
const Container = styled.div`
display: flex;
height: calc(100vh - ${props => props.theme.headerHeight});
@ -23,13 +25,8 @@ const MainContainer = () => {
<Sidebar />
<EditorContainer>
<Switch>
<AppRoute
exact
path={BUILDER_URL}
component={WidgetsEditor}
name={"WidgetsEditor"}
/>
<AppRoute component={EditorsRouter} name={"OtherEditors"} />
<SentryRoute exact path={BUILDER_URL} component={WidgetsEditor} />
<SentryRoute component={EditorsRouter} />
</Switch>
</EditorContainer>
</Container>

6
app/client/src/pages/Editor/WidgetsEditor.tsx
View File

@ -49,9 +49,7 @@ const CanvasContainer = styled.section`
/* eslint-disable react/display-name */
const WidgetsEditor = () => {
PerformanceTracker.startTracking(
PerformanceTransactionName.GENERATE_WIDGET_EDITOR_PROPS,
);
PerformanceTracker.startTracking(PerformanceTransactionName.EDITOR_MOUNT);
const { focusWidget, selectWidget } = useWidgetSelection();
const params = useParams<{ applicationId: string; pageId: string }>();
const dispatch = useDispatch();
@ -62,6 +60,7 @@ const WidgetsEditor = () => {
const currentPageName = useSelector(getCurrentPageName);
useEffect(() => {
PerformanceTracker.stopTracking(PerformanceTransactionName.EDITOR_MOUNT);
PerformanceTracker.stopTracking(PerformanceTransactionName.CLOSE_API);
});
@ -111,7 +110,6 @@ const WidgetsEditor = () => {
node = <Canvas dsl={widgets} />;
}
log.debug("Canvas rendered");
PerformanceTracker.stopTracking();
return (
<EditorContextProvider>
<EditorWrapper onClick={handleWrapperClick}>

42
app/client/src/pages/Editor/routes.tsx
View File

@ -1,5 +1,10 @@
import React, { useEffect, ReactNode } from "react";
import { Switch, withRouter, RouteComponentProps } from "react-router-dom";
import {
Switch,
withRouter,
RouteComponentProps,
Route,
} from "react-router-dom";
import ApiEditor from "./APIEditor";
import QueryEditor from "./QueryEditor";
import DataSourceEditor from "./DataSourceEditor";
@ -21,7 +26,6 @@ import {
getProviderTemplatesURL,
} from "constants/routes";
import styled from "styled-components";
import AppRoute from "pages/common/AppRoute";
import {
useShowPropertyPane,
useWidgetSelection,
@ -32,6 +36,9 @@ import PerformanceTracker, {
PerformanceTransactionName,
} from "utils/PerformanceTracker";
import * as Sentry from "@sentry/react";
const SentryRoute = Sentry.withSentryRouting(Route);
const Wrapper = styled.div<{ isVisible: boolean }>`
position: absolute;
top: 0;
@ -102,60 +109,47 @@ class EditorsRouter extends React.Component<
onClick={this.preventClose}
>
<Switch>
<AppRoute
exact
path={API_EDITOR_URL()}
component={ApiEditor}
name={"ApiEditor"}
/>
<AppRoute
<SentryRoute exact path={API_EDITOR_URL()} component={ApiEditor} />
<SentryRoute
exact
path={API_EDITOR_ID_URL()}
component={ApiEditor}
name={"ApiEditor"}
/>
<AppRoute
<SentryRoute
exact
path={API_EDITOR_URL_WITH_SELECTED_PAGE_ID()}
component={ApiEditor}
name={"ApiEditor"}
/>
<AppRoute
<SentryRoute
exact
path={QUERIES_EDITOR_URL()}
component={QueryEditor}
name={"QueryEditor"}
/>
<AppRoute
<SentryRoute
exact
path={QUERIES_EDITOR_ID_URL()}
component={QueryEditor}
name={"QueryEditor"}
/>
<AppRoute
<SentryRoute
exact
path={getCurlImportPageURL()}
component={CurlImportForm}
name={"ApiEditor"}
/>
<AppRoute
<SentryRoute
exact
path={DATA_SOURCES_EDITOR_URL()}
component={DataSourceEditor}
name={"DataSourceEditor"}
/>
<AppRoute
<SentryRoute
exact
path={DATA_SOURCES_EDITOR_ID_URL()}
component={DataSourceEditor}
name={"DataSourceEditor"}
/>
<AppRoute
<SentryRoute
exact
path={getProviderTemplatesURL()}
component={ProviderTemplates}
name={"ApiEditor"}
/>
</Switch>
</PaneDrawer>

28
app/client/src/pages/UserAuth/index.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import { Switch, useRouteMatch, useLocation } from "react-router-dom";
import { Switch, useRouteMatch, useLocation, Route } from "react-router-dom";
import Login from "./Login";
import Centered from "components/designSystems/appsmith/CenteredWrapper";
import { animated, useTransition } from "react-spring";
@ -7,8 +7,10 @@ import { AuthContainer, AuthCard } from "./StyledComponents";
import SignUp from "./SignUp";
import ForgotPassword from "./ForgotPassword";
import ResetPassword from "./ResetPassword";
import AppRoute from "pages/common/AppRoute";
import PageNotFound from "pages/common/PageNotFound";
import * as Sentry from "@sentry/react";
const SentryRoute = Sentry.withSentryRouting(Route);
const AnimatedAuthCard = animated(AuthContainer);
export const UserAuth = () => {
const { path } = useRouteMatch();
@ -25,31 +27,19 @@ export const UserAuth = () => {
<Centered>
<AuthCard>
<Switch location={location}>
<AppRoute
exact
path={`${path}/login`}
component={Login}
name={"Login"}
/>
<AppRoute
exact
path={`${path}/signup`}
component={SignUp}
name={"SignUp"}
/>
<AppRoute
<SentryRoute exact path={`${path}/login`} component={Login} />
<SentryRoute exact path={`${path}/signup`} component={SignUp} />
<SentryRoute
exact
path={`${path}/resetPassword`}
component={ResetPassword}
name={"ResetPassword"}
/>
<AppRoute
<SentryRoute
exact
path={`${path}/forgotPassword`}
component={ForgotPassword}
name={"ForgotPassword"}
/>
<AppRoute component={PageNotFound} name={"PageNotFound"} />
<SentryRoute component={PageNotFound} />
</Switch>
</AuthCard>
</Centered>

33
app/client/src/pages/common/AppRoute.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import { Route } from "react-router-dom";
import { Route, RouteComponentProps } from "react-router-dom";
import AnalyticsUtil from "utils/AnalyticsUtil";
import * as Sentry from "@sentry/react";
import { connect } from "react-redux";
@ -7,29 +7,29 @@ import { getThemeDetails } from "selectors/themeSelectors";
import { AppState } from "reducers";
import { ThemeMode } from "reducers/uiReducers/themeReducer";
import { setThemeMode } from "actions/themeActions";
import equal from "fast-deep-equal/es6";
const SentryRoute = Sentry.withSentryRouting(Route);
class AppRouteWithoutProps extends React.Component<{
interface AppRouteProps {
currentTheme: any;
path?: string;
component: React.ReactType;
component:
| React.ComponentType<RouteComponentProps<any>>
| React.ComponentType<any>;
exact?: boolean;
logDisable?: boolean;
name: string;
location?: any;
setTheme: Function;
}> {
componentDidUpdate() {
if (!this.props.logDisable) {
AnalyticsUtil.logEvent("NAVIGATE_EDITOR", {
page: this.props.name,
path: this.props.location.pathname,
});
}
}
class AppRouteWithoutProps extends React.Component<AppRouteProps> {
shouldComponentUpdate(prevProps: AppRouteProps, nextProps: AppRouteProps) {
return !equal(prevProps?.location, nextProps?.location);
}
render() {
const { component: Component, currentTheme, ...rest } = this.props;
if (
window.location.pathname === "/applications" ||
window.location.pathname.indexOf("/settings/") !== -1
@ -39,14 +39,7 @@ class AppRouteWithoutProps extends React.Component<{
} else {
document.body.style.backgroundColor = currentTheme.colors.appBackground;
}
return (
<SentryRoute
{...rest}
render={props => {
return <Component {...props} />;
}}
/>
);
return <SentryRoute {...rest} component={this.props.component} />;
}
}
const mapStateToProps = (state: AppState) => ({

14
app/client/src/pages/organization/index.tsx
View File

@ -1,21 +1,19 @@
import React from "react";
import { Switch, useRouteMatch, useLocation } from "react-router-dom";
import { Switch, useRouteMatch, useLocation, Route } from "react-router-dom";
import PageWrapper from "pages/common/PageWrapper";
import DefaultOrgPage from "./defaultOrgPage";
import AppRoute from "pages/common/AppRoute";
import Settings from "./settings";
import * as Sentry from "@sentry/react";
const SentryRoute = Sentry.withSentryRouting(Route);
export const Organization = () => {
const { path } = useRouteMatch();
const location = useLocation();
return (
<PageWrapper displayName="Organization Settings">
<Switch location={location}>
<AppRoute
path={`${path}/:orgId/settings`}
component={Settings}
name={"Settings"}
/>
<AppRoute component={DefaultOrgPage} name={"DefaultOrgPage"} />
<SentryRoute path={`${path}/:orgId/settings`} component={Settings} />
<SentryRoute component={DefaultOrgPage} />
</Switch>
</PageWrapper>
);

17
app/client/src/pages/organization/settings.tsx
View File

@ -1,6 +1,11 @@
import React, { useEffect } from "react";
import { useRouteMatch, useLocation, useParams, Link } from "react-router-dom";
import AppRoute from "pages/common/AppRoute";
import {
useRouteMatch,
useLocation,
useParams,
Link,
Route,
} from "react-router-dom";
import { getCurrentOrg } from "selectors/organizationSelectors";
import { useSelector, useDispatch } from "react-redux";
import { TabComponent, TabProp } from "components/ads/Tabs";
@ -12,6 +17,8 @@ import MemberSettings from "./Members";
import IconComponent from "components/designSystems/appsmith/IconComponent";
import { fetchOrg } from "actions/orgActions";
import { GeneralSettings } from "./General";
import * as Sentry from "@sentry/react";
const SentryRoute = Sentry.withSentryRouting(Route);
const LinkToApplications = styled(Link)`
margin-top: 30px;
@ -41,17 +48,15 @@ export default function Settings() {
const SettingsRenderer = (
<div>
<AppRoute
<SentryRoute
path={`${path}/general`}
component={GeneralSettings}
location={location}
name={"Settings"}
/>
<AppRoute
<SentryRoute
path={`${path}/members`}
component={MemberSettings}
location={location}
name={"Settings"}
/>
</div>
);

4
app/client/src/utils/DynamicBindingUtils.ts
View File

@ -660,6 +660,7 @@ export function dependencySortedEvaluateDataTree(
try {
return sortedDependencies.reduce(
(currentTree: DataTree, propertyPath: string) => {
// PerformanceTracker.startTracking(PerformanceTransactionName.EVALUATE_BINDING, { binding: propertyPath }, true)
const entityName = propertyPath.split(".")[0];
const entity: DataTreeEntity = currentTree[entityName];
const unEvalPropertyValue = _.get(currentTree as any, propertyPath);
@ -719,10 +720,13 @@ export function dependencySortedEvaluateDataTree(
widgetEntity,
);
}
// PerformanceTracker.stopTracking();
return _.set(currentTree, propertyPath, parsedValue);
}
// PerformanceTracker.stopTracking();
return _.set(currentTree, propertyPath, evalPropertyValue);
} else {
// PerformanceTracker.stopTracking();
return _.set(currentTree, propertyPath, evalPropertyValue);
}
},

46
app/client/src/utils/PerformanceTracker.ts
View File

@ -27,8 +27,11 @@ export enum PerformanceTransactionName {
GENERATE_VIEW_MODE_PROPS = "GENERATE_VIEW_MODE_PROPS",
GENERATE_WIDGET_EDITOR_PROPS = "GENERATE_WIDGET_EDITOR_PROPS",
ENTITY_EXPLORER_ENTITY = "ENTITY_EXPLORER_ENTITY",
ENTITY_EXPLORER = "ENTITY_EXPLORER",
CLOSE_API = "CLOSE_API",
OPEN_API = "OPEN_API",
EDITOR_MOUNT = "EDITOR_MOUNT",
SIDE_BAR_MOUNT = "SIDE_BAR_MOUNT",
CANVAS_MOUNT = "CANVAS_MOUNT",
GENERATE_API_PROPS = "GENERATE_API_PROPS",
CHANGE_API_SAGA = "CHANGE_API_SAGA",
@ -118,27 +121,32 @@ class PerformanceTracker {
eventName?: PerformanceTransactionName,
) => {
if (eventName) {
let index = -1;
_.forEach(PerformanceTracker.perfLogQueue, (perfLog, i) => {
if (perfLog.eventName === eventName) {
index = i;
}
if (index !== -1 && i >= index) {
const currentSpan = perfLog.sentrySpan;
currentSpan.finish();
if (!perfLog?.skipLog) {
PerformanceTracker.printDuration(
perfLog.eventName,
PerformanceTracker.perfLogQueue.length + 1,
currentSpan.startTimestamp,
currentSpan.endTimestamp,
);
const index = _.findLastIndex(
PerformanceTracker.perfLogQueue,
(perfLog, i) => {
return perfLog.eventName === eventName;
},
);
if (index !== -1) {
for (let i = PerformanceTracker.perfLogQueue.length - 1; i >= 0; i--) {
const perfLog = PerformanceTracker.perfLogQueue[i];
if (i >= index) {
const currentSpan = perfLog.sentrySpan;
currentSpan.finish();
if (!perfLog?.skipLog) {
PerformanceTracker.printDuration(
perfLog.eventName,
i + 1,
currentSpan.startTimestamp,
currentSpan.endTimestamp,
);
}
}
}
});
PerformanceTracker.perfLogQueue = PerformanceTracker.perfLogQueue.splice(
index,
);
PerformanceTracker.perfLogQueue = PerformanceTracker.perfLogQueue.splice(
index,
);
}
} else {
const perfLog = PerformanceTracker.perfLogQueue.pop();
if (perfLog) {