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.

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

[SR] Snapshot and restore plugin boilerplate #32276

Merged
1 change: 1 addition & 0 deletions .i18nrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
"xpack.searchProfiler": "x-pack/plugins/searchprofiler",
"xpack.security": "x-pack/plugins/security",
"xpack.server": "x-pack/server",
"xpack.snapshotRestore": "x-pack/plugins/snapshot_restore",
"xpack.spaces": "x-pack/plugins/spaces",
"xpack.upgradeAssistant": "x-pack/plugins/upgrade_assistant",
"xpack.uptime": "x-pack/plugins/uptime",
Expand Down
4 changes: 4 additions & 0 deletions src/legacy/ui/public/management/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,4 +28,8 @@ declare module 'ui/management' {
allowOverride: boolean
): void;
export const management: any; // TODO - properly provide types
export const MANAGEMENT_BREADCRUMB: {
text: string;
href: string;
};
}
2 changes: 2 additions & 0 deletions x-pack/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import { translations } from './plugins/translations';
import { upgradeAssistant } from './plugins/upgrade_assistant';
import { uptime } from './plugins/uptime';
import { ossTelemetry } from './plugins/oss_telemetry';
import { snapshotRestore } from './plugins/snapshot_restore';

module.exports = function (kibana) {
return [
Expand Down Expand Up @@ -73,5 +74,6 @@ module.exports = function (kibana) {
upgradeAssistant(kibana),
uptime(kibana),
ossTelemetry(kibana),
snapshotRestore(kibana),
];
};
19 changes: 19 additions & 0 deletions x-pack/plugins/snapshot_restore/common/constants.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import { LICENSE_TYPE_BASIC, LicenseType } from '../../../common/constants';

const PLUGIN_NAME = 'Snapshot and Restore';

export const PLUGIN = {
ID: 'snapshot_restore',
MINIMUM_LICENSE_REQUIRED: LICENSE_TYPE_BASIC as LicenseType,
getI18nName: (translate: (key: string, config: object) => string): string => {
return translate('xpack.snapshotRestore.appName', {
defaultMessage: PLUGIN_NAME,
});
},
};
40 changes: 40 additions & 0 deletions x-pack/plugins/snapshot_restore/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import { Legacy } from 'kibana';
import { resolve } from 'path';
import { PLUGIN } from './common/constants';
import { Plugin as SnapshotRestorePlugin } from './plugin';
import { createShim } from './shim';

export function snapshotRestore(kibana: any) {
return new kibana.Plugin({
id: PLUGIN.ID,
configPrefix: 'xpack.snapshot_restore',
publicDir: resolve(__dirname, 'public'),
require: ['kibana', 'elasticsearch', 'xpack_main'],
uiExports: {
styleSheetPaths: resolve(__dirname, 'public/index.scss'),
managementSections: ['plugins/snapshot_restore'],
},
init(server: Legacy.Server) {
const { core, plugins } = createShim(server, PLUGIN.ID);
const { i18n } = core;
const snapshotRestorePlugin = new SnapshotRestorePlugin();

// Start plugin
snapshotRestorePlugin.start(core, plugins);

// Register license checker
plugins.license.registerLicenseChecker(
server,
PLUGIN.ID,
PLUGIN.getI18nName(i18n.translate),
PLUGIN.MINIMUM_LICENSE_REQUIRED
);
},
});
}
16 changes: 16 additions & 0 deletions x-pack/plugins/snapshot_restore/plugin.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import { registerRoutes } from './server/routes/api/register_routes';
import { Core, Plugins } from './shim';

export class Plugin {
public start(core: Core, plugins: Plugins): void {
const router = core.http.createRouter('/api/snapshot_restore/');

// Register routes
registerRoutes(router);
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/* Snapshot and restore plugin styles */
28 changes: 28 additions & 0 deletions x-pack/plugins/snapshot_restore/public/app/app.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import React, { Component } from 'react';
import { Redirect, Route, Switch } from 'react-router-dom';

import { BASE_PATH } from './constants';
import { AppContext } from './services/app_context';

import { SnapshotRestoreHome } from './sections';

export class App extends Component {
public static contextType = AppContext;

public render() {
return (
<div>
<Switch>
<Redirect exact from={`${BASE_PATH}`} to={`${BASE_PATH}/repositories`} />
<Route exact path={`${BASE_PATH}/:section`} component={SnapshotRestoreHome} />
</Switch>
</div>
);
}
}
7 changes: 7 additions & 0 deletions x-pack/plugins/snapshot_restore/public/app/constants/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

export const BASE_PATH = '/management/elasticsearch/snapshot_restore';
40 changes: 40 additions & 0 deletions x-pack/plugins/snapshot_restore/public/app/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import React from 'react';
import { render } from 'react-dom';
import { HashRouter } from 'react-router-dom';

import { AppCore, AppPlugins } from '../shim';
import { App } from './app';
import { AppContext, AppContextInterface } from './services/app_context';

export { BASE_PATH as CLIENT_BASE_PATH } from './constants';

export const renderReact = async (
elem: Element,
core: AppCore,
plugins: AppPlugins
): Promise<void> => {
const {
i18n: { Context: I18nContext },
} = core;

const appContext: AppContextInterface = {
core,
plugins,
};

render(
<I18nContext>
<HashRouter>
<AppContext.Provider value={appContext}>
<App />
</AppContext.Provider>
</HashRouter>
</I18nContext>,
elem
);
};
138 changes: 138 additions & 0 deletions x-pack/plugins/snapshot_restore/public/app/sections/home/home.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import React, { PureComponent } from 'react';
import { Route, RouteComponentProps, Switch } from 'react-router-dom';

import { EuiPageBody, EuiPageContent, EuiSpacer, EuiTab, EuiTabs, EuiTitle } from '@elastic/eui';

import { BASE_PATH } from '../../constants';
import { AppContext, AppContextInterface } from '../../services/app_context';

import { RepositoryList } from './repository_list';
import { SnapshotList } from './snapshot_list';

type Section = 'repositories' | 'snapshots';

interface MatchParams {
section: Section;
}

interface Props extends RouteComponentProps<MatchParams> {}

interface State {
activeSection: Section;
}

export class SnapshotRestoreHome extends PureComponent<Props, State> {
public static contextType = AppContext;

public static getDerivedStateFromProps(nextProps: Props) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wondering if maybe we want to start using function components + hooks instead of class ones.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd like to address this with the next pass when actual features start getting built out, it's hard for me to formulate an opinion for function components with hooks instead of lifecycles when the components don't do much yet 😁 I'll try function components + hooks for new components, and refactor these class ones if it goes well!

const {
match: {
params: { section },
},
} = nextProps;
return {
activeSection: section,
};
}
public context!: React.ContextType<typeof AppContext>;

public readonly state: Readonly<State> = {
activeSection: 'repositories' as Section,
};

public componentDidMount() {
const {
core: { i18n, chrome },
plugins: { management },
} = this.context as AppContextInterface;

chrome.breadcrumbs.set([
management.constants.BREADCRUMB,
{
text: i18n.translate('xpack.snapshotRestore.home.BreadcrumbTitle', {
defaultMessage: 'Snapshot and Restore',
}),
href: `#${BASE_PATH}`,
},
]);
}

public onSectionChange = (section: Section): void => {
const { history } = this.props;
history.push(`${BASE_PATH}/${section}`);
};

public render() {
const {
core: {
i18n: { FormattedMessage },
},
} = this.context as AppContextInterface;

const tabs = [
{
id: 'snapshots' as Section,
name: (
<FormattedMessage
id="xpack.snapshotRestore.home.snapshotsTabTitle"
defaultMessage="Snapshots"
/>
),
testSubj: 'srSnapshotsTab',
},
{
id: 'repositories' as Section,
name: (
<FormattedMessage
id="xpack.snapshotRestore.home.repositoriesTabTitle"
defaultMessage="Repositories"
/>
),
testSubj: 'srRepositoriesTab',
},
];

return (
<EuiPageBody>
<EuiPageContent>
<EuiTitle size="l">
<h1>
<FormattedMessage
id="xpack.snapshotRestore.home.snapshotRestoreTitle"
defaultMessage="Snapshot and Restore"
/>
</h1>
</EuiTitle>

<EuiSpacer size="s" />

<EuiTabs>
{tabs.map(tab => (
<EuiTab
onClick={() => this.onSectionChange(tab.id)}
isSelected={tab.id === this.state.activeSection}
key={tab.id}
data-test-subject={tab.testSubj}
>
{tab.name}
</EuiTab>
))}
</EuiTabs>

<EuiSpacer size="m" />

<Switch>
<Route exact path={`${BASE_PATH}/repositories`} component={RepositoryList} />
<Route exact path={`${BASE_PATH}/snapshots`} component={SnapshotList} />
</Switch>
</EuiPageContent>
</EuiPageBody>
);
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

export { SnapshotRestoreHome } from './home';
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

export { RepositoryList } from './repository_list';
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import React, { PureComponent } from 'react';

import { AppContext } from '../../../services/app_context';

export class RepositoryList extends PureComponent {
public static contextType = AppContext;
public context!: React.ContextType<typeof AppContext>;

public render() {
return <div>List of repositories</div>;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

export { SnapshotList } from './snapshot_list';
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import React, { PureComponent } from 'react';

import { AppContext } from '../../../services/app_context';

export class SnapshotList extends PureComponent {
public static contextType = AppContext;
public context!: React.ContextType<typeof AppContext>;

public render() {
return <div>List of snapshots</div>;
}
}
Loading