[SR] Repository list and details UI

x-pack/plugins/infra/types/eui.d.ts

@@ -116,6 +116,8 @@ declare module '@elastic/eui' {
     loading?: any;
     hasActions?: any;
     message?: any;
+    rowProps?: any;
+    cellProps?: any;
   };
   export const EuiInMemoryTable: React.SFC<EuiInMemoryTableProps>;
 }

x-pack/plugins/snapshot_restore/common/constants.ts

@@ -17,3 +17,5 @@ export const PLUGIN = {
     });
   },
 };
+
+export const API_BASE_PATH = '/api/snapshot_restore/';

x-pack/plugins/snapshot_restore/common/repository_types.ts

@@ -0,0 +1,137 @@
+/*
+ * 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 FSRepositoryType = 'fs';
+export const ReadonlyRepositoryType = 'url';
+export const SourceRepositoryType = 'source';
+export const S3RepositoryType = 's3';
+export const HDFSRepositoryType = 'hdfs';
+export const AzureRepositoryType = 'azure';
+export const GCSRepositoryType = 'gcs';
+
+export const RepositoryTypeDocPath = 'modules-snapshots.html';
+export const FSRepositoryTypeDocPath = 'modules-snapshots.html#_shared_file_system_repository';
+export const ReadonlyRepositoryTypeDocPath = 'modules-snapshots.html#_read_only_url_repository';
+export const SourceRepositoryTypeDocPath = 'modules-snapshots.html#_source_only_repository';
+export const S3RepositoryTypeDocPath = 'repository-s3.html';
+export const HDFSRepositoryTypeDocPath = 'repository-hdfs.html';
+export const AzureRepositoryTypeDocPath = 'repository-azure.html';
+export const GCSRepositoryTypeDocPath = 'repository-gcs.html';
+
+export type RepositoryType =
+  | typeof FSRepositoryType
+  | typeof ReadonlyRepositoryType
+  | typeof SourceRepositoryType
+  | typeof S3RepositoryType
+  | typeof HDFSRepositoryType
+  | typeof AzureRepositoryType
+  | typeof GCSRepositoryType;
+
+export interface FSRepository {
+  name: string;
+  type: typeof FSRepositoryType;
+  settings: {
+    location: string;
+    compress?: boolean;
+    chunk_size?: string | null;
+    max_restore_bytes_per_sec?: string;
+    max_snapshot_bytes_per_sec?: string;
+    readonly?: boolean;
+  };
+}
+
+export interface ReadonlyRepository {
+  name: string;
+  type: typeof ReadonlyRepositoryType;
+  settings: {
+    url: string;
+  };
+}
+
+export interface S3Repository {
+  name: string;
+  type: typeof S3RepositoryType;
+  settings: {
+    bucket: string;
+    client?: string;
+    base_path?: string;
+    compress?: boolean;
+    chunk_size?: string | null;
+    server_side_encryption?: boolean;
+    buffer_size?: string;
+    canned_acl?: string;
+    storage_class?: string;
+  };
+}
+
+export interface HDFSRepository {
+  name: string;
+  type: typeof HDFSRepositoryType;
+  settings: {
+    uri: string;
+    path: string;
+    load_defaults?: boolean;
+    compress?: boolean;
+    chunk_size?: string | null;
+    ['security.principal']?: string;
+    [key: string]: any; // For conf.* settings
+  };
+}
+
+export interface AzureRepository {
+  name: string;
+  type: typeof AzureRepositoryType;
+  settings: {
+    client?: string;
+    container?: string;
+    base_path?: string;
+    compress?: boolean;
+    chunk_size?: string | null;
+    readonly?: boolean;
+    location_mode?: string;
+  };
+}
+
+export interface GCSRepository {
+  name: string;
+  type: typeof GCSRepositoryType;
+  settings: {
+    bucket: string;
+    client?: string;
+    base_path?: string;
+    compress?: boolean;
+    chunk_size?: string | null;
+  };
+}
+
+export interface SourceRepository<T> {
+  name: string;
+  type: typeof SourceRepositoryType;
+  settings: SourceRepositorySettings<T>;
+}
+
+export type SourceRepositorySettings<T> = T extends typeof FSRepositoryType
+  ? FSRepository['settings']
+  : T extends typeof S3RepositoryType
+  ? S3Repository['settings']
+  : T extends typeof HDFSRepositoryType
+  ? HDFSRepository['settings']
+  : T extends typeof AzureRepositoryType
+  ? AzureRepository['settings']
+  : T extends typeof GCSRepositoryType
+  ? GCSRepository['settings']
+  : any & {
+      delegate_type: T;
+    };
+
+export type Repository<T = null> =
+  | FSRepository
+  | ReadonlyRepository
+  | S3Repository
+  | HDFSRepository
+  | AzureRepository
+  | GCSRepository
+  | SourceRepository<T>;

x-pack/plugins/snapshot_restore/plugin.ts

@@ -3,12 +3,13 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+import { API_BASE_PATH } from './common/constants';
 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/');
+    const router = core.http.createRouter(API_BASE_PATH);
 
     // Register routes
     registerRoutes(router);

x-pack/plugins/snapshot_restore/public/app/app.tsx

@@ -4,25 +4,19 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { Component } from 'react';
+import React 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>
-    );
-  }
-}
+export const App = () => {
+  return (
+    <div>
+      <Switch>
+        <Redirect exact from={`${BASE_PATH}`} to={`${BASE_PATH}/repositories`} />
+        <Route exact path={`${BASE_PATH}/:section/:name?`} component={SnapshotRestoreHome} />
+      </Switch>
+    </div>
+  );
+};

x-pack/plugins/snapshot_restore/public/app/services/app_context.ts → x-pack/plugins/snapshot_restore/public/app/components/index.ts

@@ -4,12 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
-import { AppCore, AppPlugins } from '../../shim';
-
-export interface AppContextInterface {
-  core: AppCore;
-  plugins: AppPlugins;
-}
-
-export const AppContext = React.createContext<AppContextInterface | null>(null);
+export { RepositoryDeleteProvider } from './repository_delete_provider';
+export { RepositoryTypeName } from './repository_type_name';
+export { SectionError } from './section_error';
+export { SectionLoading } from './section_loading';

x-pack/plugins/snapshot_restore/public/app/components/repository_delete_provider.tsx

@@ -0,0 +1,27 @@
+/*
+ * 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, { Fragment, useState } from 'react';
+import { Repository } from '../../../common/repository_types';
+
+interface Props {
+  children: any;
+}
+
+export const RepositoryDeleteProvider = ({ children }: Props) => {
+  const [repositoryNames, setRepositoryNames] = useState<Array<Repository['name']>>([]);
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const deleteRepository = (names: Array<Repository['name']>): void => {
+    setIsModalOpen(true);
+    setRepositoryNames(names);
+  };
+
+  if (isModalOpen && repositoryNames.length) {
+    /* placeholder */
+  }
+
+  return <Fragment>{children(deleteRepository)}</Fragment>;
+};

x-pack/plugins/snapshot_restore/public/app/components/repository_type_name.tsx

@@ -0,0 +1,98 @@
+/*
+ * 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, { Fragment } from 'react';
+import {
+  AzureRepositoryType,
+  FSRepositoryType,
+  GCSRepositoryType,
+  HDFSRepositoryType,
+  ReadonlyRepositoryType,
+  RepositoryType,
+  S3RepositoryType,
+  SourceRepositoryType,
+} from '../../../common/repository_types';
+import { AppStateInterface, useAppState } from '../services/app_context';
+
+interface Props {
+  type: RepositoryType;
+  delegateType?: RepositoryType;
+}
+
+export const RepositoryTypeName = ({ type, delegateType }: Props) => {
+  const [
+    {
+      core: {
+        i18n: { FormattedMessage },
+      },
+    },
+  ] = useAppState() as [AppStateInterface];
+
+  const typeNameMap: { [key in RepositoryType]: JSX.Element } = {
+    [FSRepositoryType]: (
+      <FormattedMessage
+        id="xpack.snapshotRestore.repositoryType.fileSystemTypeName"
+        defaultMessage="Shared File System"
+      />
+    ),
+    [ReadonlyRepositoryType]: (
+      <FormattedMessage
+        id="xpack.snapshotRestore.repositoryType.readonlyTypeName"
+        defaultMessage="Read-only URL"
+      />
+    ),
+    [S3RepositoryType]: (
+      <FormattedMessage
+        id="xpack.snapshotRestore.repositoryType.s3TypeName"
+        defaultMessage="AWS S3"
+      />
+    ),
+    [HDFSRepositoryType]: (
+      <FormattedMessage
+        id="xpack.snapshotRestore.repositoryType.hdfsTypeName"
+        defaultMessage="HDFS File System"
+      />
+    ),
+    [AzureRepositoryType]: (
+      <FormattedMessage
+        id="xpack.snapshotRestore.repositoryType.azureTypeName"
+        defaultMessage="Azure"
+      />
+    ),
+    [GCSRepositoryType]: (
+      <FormattedMessage
+        id="xpack.snapshotRestore.repositoryType.gcsTypeName"
+        defaultMessage="Google Cloud Storage"
+      />
+    ),
+    [SourceRepositoryType]: (
+      <FormattedMessage
+        id="xpack.snapshotRestore.repositoryType.sourceTypeName"
+        defaultMessage="Source"
+      />
+    ),
+  };
+
+  const getTypeName = (repositoryType: RepositoryType): JSX.Element => {
+    return typeNameMap[repositoryType] || <Fragment>{type}</Fragment>;
+  };
+
+  if (type === SourceRepositoryType && delegateType) {
+    return (
+      <Fragment>
+        <FormattedMessage
+          id="xpack.snapshotRestore.repositoryType.sourceTypeWithDelegateName"
+          defaultMessage="Source ({delegateType})"
+          values={{
+            delegateType: getTypeName(delegateType),
+          }}
+        />
+      </Fragment>
+    );
+  }
+
+  return getTypeName(type);
+};

x-pack/plugins/snapshot_restore/public/app/components/section_error.tsx

@@ -0,0 +1,43 @@
+/*
+ * 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 { EuiCallOut, EuiSpacer } from '@elastic/eui';
+import React, { Fragment } from 'react';
+
+interface Props {
+  title: React.ReactNode;
+  error: {
+    data: {
+      error: string;
+      cause: string[];
+      message: string;
+    };
+  };
+}
+
+export function SectionError({ title, error }: Props) {
+  const {
+    error: errorString,
+    cause, // wrapEsError() on the server adds a "cause" array
+    message,
+  } = error.data;
+
+  return (
+    <EuiCallOut title={title} color="danger" iconType="alert">
+      <div>{message || errorString}</div>
+      {cause && (
+        <Fragment>
+          <EuiSpacer size="m" />
+          <ul>
+            {cause.map((causeMsg, i) => (
+              <li key={i}>{causeMsg}</li>
+            ))}
+          </ul>
+        </Fragment>
+      )}
+    </EuiCallOut>
+  );
+}