Skip to content

Commit

Permalink
add id fields and metadata to form
Browse files Browse the repository at this point in the history
  • Loading branch information
klacabane committed Oct 16, 2024
1 parent b9ff82d commit b4a085a
Show file tree
Hide file tree
Showing 4 changed files with 187 additions and 4 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/

import React from 'react';
import { Control, Controller, useFieldArray } from 'react-hook-form';
import { EntityDefinition } from '@kbn/entities-schema';
import {
EuiFlexGroup,
EuiFlexItem,
EuiFieldText,
EuiButtonIcon,
EuiFormRow,
EuiSpacer,
} from '@elastic/eui';

export function IdentityFieldsInput({ control }: { control: Control<EntityDefinition> }) {
const identityFormFields = useFieldArray({ control, name: 'identityFields' });

return (
<EuiFormRow
label="Group by"
labelAppend={
<EuiButtonIcon
iconType="plus"
onClick={() => identityFormFields.append({ field: '', optional: false })}
/>
}
>
<>
{identityFormFields.fields.map((item, index) => {
return (
<Controller
control={control}
name={`identityFields.${index}.field`}
render={() => (
<>
<EuiFlexGroup alignItems="center">
<EuiFlexItem>
<EuiFieldText
key={index}
value={item.field}
onChange={(e) => {
e.preventDefault();
identityFormFields.update(index, { ...item, field: e.target.value });
}}
fullWidth
/>
</EuiFlexItem>
<EuiFlexItem>
{identityFormFields.fields.length > 1 ? (
<EuiButtonIcon
iconType="trash"
color="danger"
onClick={() => identityFormFields.remove(index)}
/>
) : null}
</EuiFlexItem>
</EuiFlexGroup>

<EuiSpacer size="s" />
</>
)}
/>
);
})}
</>
</EuiFormRow>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/

import React from 'react';
import { Control, Controller, useFieldArray } from 'react-hook-form';
import { EntityDefinition } from '@kbn/entities-schema';
import {
EuiFlexGroup,
EuiFlexItem,
EuiFieldText,
EuiButtonIcon,
EuiFormRow,
EuiSpacer,
} from '@elastic/eui';

export function MetadataFieldsInput({ control }: { control: Control<EntityDefinition> }) {
const metadataFields = useFieldArray({ control, name: 'metadata' });

return (
<EuiFormRow
label="Metadata"
labelAppend={
<EuiButtonIcon
iconType="plus"
onClick={() =>
metadataFields.append({
source: '',
destination: '',
aggregation: { type: 'terms', limit: 10 },
})
}
/>
}
>
<>
{metadataFields.fields.map((item, index) => {
return (
<Controller
control={control}
name={`metadata.${index}.source`}
render={() => (
<>
<EuiFlexGroup alignItems="center">
<EuiFlexItem>
<EuiFieldText
key={index}
value={item.source}
placeholder="source"
onChange={(e) =>
metadataFields.update(index, { ...item, source: e.target.value })
}
fullWidth
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiFieldText
key={index}
value={item.destination}
placeholder="destination"
onChange={(e) =>
metadataFields.update(index, { ...item, destination: e.target.value })
}
fullWidth
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiButtonIcon
iconType="trash"
color="danger"
onClick={() => metadataFields.remove(index)}
/>
</EuiFlexItem>
</EuiFlexGroup>

<EuiSpacer size="s" />
</>
)}
/>
);
})}
</>
</EuiFormRow>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ import { useKibana } from '../../../hooks/use_kibana';
import { paths } from '../../../../common/locators/paths';
import { ENTITY_MANAGER_LABEL } from '../../../../common/translations';
import { IndexPatternInput } from './components/index_pattern';
import { IdentityFieldsInput } from './components/identity_fields';
import { MetadataFieldsInput } from './components/metadata';

const PAGE_TITLE = i18n.translate('xpack.entityManager.createPage.title', {
defaultMessage: 'Create new definition',
Expand All @@ -23,7 +25,10 @@ const PAGE_TITLE = i18n.translate('xpack.entityManager.createPage.title', {
const DEFAULT_VALUES = {
id: '',
name: '',
type: '',
indexPatterns: [],
identityFields: [{ field: '', optional: false }],
metadata: [],
};

export function EntityManagerCreatePage() {
Expand All @@ -50,9 +55,7 @@ export function EntityManagerCreatePage() {
});
const { control, handleSubmit } = methods;

const onSubmit: SubmitHandler<EntityDefinition> = (data) => {
console.log(data);
};
const onSubmit: SubmitHandler<EntityDefinition> = (data) => {};

return (
<ObservabilityPageTemplate pageHeader={{ pageTitle: PAGE_TITLE }}>
Expand All @@ -69,6 +72,19 @@ export function EntityManagerCreatePage() {
</EuiFormRow>
)}
/>

<Controller
name="type"
rules={{ required: true }}
defaultValue=""
control={control}
render={({ field: { ref, ...field }, fieldState }) => (
<EuiFormRow label="Type">
<EuiFieldText {...field} fullWidth isInvalid={fieldState.invalid} />
</EuiFormRow>
)}
/>

<Controller
name="name"
rules={{ required: true }}
Expand All @@ -80,7 +96,13 @@ export function EntityManagerCreatePage() {
</EuiFormRow>
)}
/>

<IndexPatternInput />

<IdentityFieldsInput control={control} />

<MetadataFieldsInput control={control} />

<EuiButton onClick={handleSubmit(onSubmit)}>Submit</EuiButton>
</EuiForm>
</FormProvider>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export function TransformDetailsPanel({ stats, transform }: TransformDetailsPane

const checkpointStats = [
{
name: 'Last detected chagnes',
name: 'Last detected changes',
value: moment(stats.checkpointing.changes_last_detected_at).format('ll LTS'),
},
{
Expand Down

0 comments on commit b4a085a

Please sign in to comment.