@finos/legend-extension-dsl-data-quality
Version:
Legend extension for Data Quality
130 lines • 12 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/**
* Copyright (c) 2020-present, Goldman Sachs
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { observer } from 'mobx-react-lite';
import { ActionAlertActionType, ActionAlertType, useApplicationStore, } from '@finos/legend-application';
import { flowResult } from 'mobx';
import { ExecutionPlanViewer, LambdaParameterValuesEditor, } from '@finos/legend-query-builder';
import {} from '@finos/legend-graph';
import { prettyDuration } from '@finos/legend-shared';
import React, { useRef, useState } from 'react';
import { DATA_QUALITY_VALIDATION_TEST_ID, USER_ATTESTATION_MESSAGE, } from './constants/DataQualityConstants.js';
import { BlankPanelContent, CaretDownIcon, ControlledDropdownMenu, CubesLoadingIndicator, CubesLoadingIndicatorIcon, CustomSelectorInput, DebugIcon, ExclamationTriangleIcon, MenuContent, MenuContentItem, MenuContentItemIcon, MenuContentItemLabel, PanelContent, PauseCircleIcon, PlayIcon, ReportIcon, CsvIcon, } from '@finos/legend-art';
import { DataQualityResultValues } from './DataQualityResultValues.js';
export const DataQualityRelationTrialRuns = observer((props) => {
const { dataQualityRelationValidationConfigurationState } = props;
const applicationStore = useApplicationStore();
const resultState = dataQualityRelationValidationConfigurationState.resultState;
const executionResult = resultState.executionResult;
const exportValidationResults = async (format) => {
resultState.handleExport(format);
};
const confirmExport = (format) => {
applicationStore.alertService.setActionAlertInfo({
message: USER_ATTESTATION_MESSAGE,
type: ActionAlertType.CAUTION,
actions: [
{
label: 'Accept',
type: ActionAlertActionType.PROCEED_WITH_CAUTION,
handler: applicationStore.guardUnhandledError(() => exportValidationResults(format)),
},
{
label: 'Decline',
type: ActionAlertActionType.PROCEED,
default: true,
},
],
});
};
const runQuery = () => {
if (!resultState.isRunningValidation) {
resultState.handleRunValidation();
}
};
const cancelQuery = applicationStore.guardUnhandledError(() => flowResult(resultState.cancelValidation()));
const generatePlan = applicationStore.guardUnhandledError(() => {
return flowResult(resultState.generatePlan(false));
});
const debugPlanGeneration = applicationStore.guardUnhandledError(() => flowResult(resultState.generatePlan(true)));
const isRunValidationDisabled = !resultState.validationToRun ||
resultState.isGeneratingPlan ||
resultState.isRunningValidation;
const getResultSetDescription = (_executionResult) => {
const queryDuration = resultState.executionDuration
? prettyDuration(resultState.executionDuration, {
ms: true,
})
: undefined;
if (!queryDuration) {
return undefined;
}
return `validation ran in ${queryDuration}`;
};
const resultDescription = !resultState.isRunningValidation && executionResult
? getResultSetDescription(executionResult)
: undefined;
const [previewLimitValue, setPreviewLimitValue] = useState(resultState.previewLimit);
const changePreviewLimit = (event) => {
setPreviewLimitValue(parseInt(event.target.value, 10));
};
const inputRef = useRef(null);
const getPreviewLimit = () => {
if (isNaN(previewLimitValue) || previewLimitValue === 0) {
setPreviewLimitValue(1);
dataQualityRelationValidationConfigurationState.resultState.setPreviewLimit(1);
}
else {
dataQualityRelationValidationConfigurationState.resultState.setPreviewLimit(previewLimitValue);
}
};
const onKeyDown = (event) => {
if (event.code === 'Enter') {
getPreviewLimit();
inputRef.current?.focus();
}
else if (event.code === 'Escape') {
inputRef.current?.select();
}
};
const isLoading = resultState.isRunningValidation || resultState.isGeneratingPlan;
const selectedValidation = dataQualityRelationValidationConfigurationState
.resultState.validationToRun
? {
label: dataQualityRelationValidationConfigurationState.resultState
.validationToRun.name,
value: dataQualityRelationValidationConfigurationState.resultState
.validationToRun,
}
: undefined;
const onValidationChange = (val) => {
dataQualityRelationValidationConfigurationState.resetResultState();
dataQualityRelationValidationConfigurationState.resultState.setValidationToRun(val?.value);
};
return (_jsxs("div", { "data-testid": DATA_QUALITY_VALIDATION_TEST_ID.DATA_QUALITY_VALIDATION_RESULT_PANEL, className: "panel data-quality-validation__result", children: [_jsxs("div", { className: "panel__header", children: [_jsxs("div", { className: "panel__header__title", children: [_jsx("div", { className: "panel__header__title__label", children: "results" }), resultState.isRunningValidation && (_jsx("div", { className: "panel__header__title__label__status", children: "Running Validation..." })), _jsx("div", { "data-testid": DATA_QUALITY_VALIDATION_TEST_ID.DATA_QUALITY_VALIDATION_RESULT_ANALYTICS, className: "data-quality-validation__result__analytics", children: resultDescription ?? '' }), executionResult && resultState.checkForStaleResults && (_jsxs("div", { className: "data-quality-validation__result__stale-status", children: [_jsx("div", { className: "data-quality-validation__result__stale-status__icon", children: _jsx(ExclamationTriangleIcon, {}) }), _jsx("div", { className: "data-quality-validation__result__stale-status__label", children: "Preview data might be stale" })] }))] }), _jsxs("div", { className: "panel__header__actions data-quality-validation__result__header__actions", children: [_jsxs("div", { className: "data-quality-validation__result__validation", children: [_jsx("div", { className: "data-quality-validation__result__validation__label", children: "Selected Validation" }), _jsx(CustomSelectorInput, { className: "data-quality-validation__result__validation__dropdown", options: dataQualityRelationValidationConfigurationState.validationOptions, onChange: onValidationChange, value: selectedValidation, darkMode: !applicationStore.layoutService
.TEMPORARY__isLightColorThemeEnabled, placeholder: 'Select validation to run' })] }), _jsxs("div", { className: "data-quality-validation__result__limit", children: [_jsx("div", { className: "data-quality-validation__result__limit__label", children: "preview row limit" }), _jsx("input", { ref: inputRef, className: "input--dark data-quality-validation__result__limit__input", spellCheck: false, type: "number", value: previewLimitValue, onChange: changePreviewLimit, onBlur: getPreviewLimit, onKeyDown: onKeyDown })] }), _jsx("div", { className: "data-quality-validation__result__execute-btn btn__dropdown-combo btn__dropdown-combo--primary", children: resultState.isRunningValidation ? (_jsx("button", { className: "btn__dropdown-combo__canceler data-quality-validation__result__execute-btn__btn", onClick: cancelQuery, tabIndex: -1, children: _jsxs("div", { className: "btn--dark btn--caution btn__dropdown-combo__canceler__label data-quality-validation__result__execute-btn__btn", children: [_jsx(PauseCircleIcon, {}), "Stop"] }) })) : (_jsxs(_Fragment, { children: [_jsxs("button", { className: "btn__dropdown-combo__label data-quality-validation__result__execute-btn__validation data-quality-validation__result__execute-btn__btn data-quality-validation__result__execute-btn__btn--green", onClick: runQuery, tabIndex: -1, disabled: isRunValidationDisabled, children: [_jsx(PlayIcon, {}), "Run Validation"] }), _jsx(ControlledDropdownMenu, { className: "btn__dropdown-combo__dropdown-btn data-quality-validation__result__execute-btn__btn data-quality-validation__result__execute-btn__btn--green", disabled: isRunValidationDisabled, content: _jsxs(MenuContent, { children: [_jsxs(MenuContentItem, { className: "btn__dropdown-combo__option", onClick: generatePlan, disabled: isRunValidationDisabled, children: [_jsx(MenuContentItemIcon, { children: _jsx(ReportIcon, {}) }), _jsx(MenuContentItemLabel, { children: "Generate Plan" })] }), _jsxs(MenuContentItem, { className: "btn__dropdown-combo__option", onClick: debugPlanGeneration, disabled: isRunValidationDisabled, children: [_jsx(MenuContentItemIcon, { children: _jsx(DebugIcon, {}) }), _jsx(MenuContentItemLabel, { children: "Debug" })] })] }), menuProps: {
anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
transformOrigin: { vertical: 'top', horizontal: 'right' },
}, children: _jsx(CaretDownIcon, {}) })] })) }), _jsxs(ControlledDropdownMenu, { className: "data-quality-validation__result__export__dropdown", title: "Export", disabled: isRunValidationDisabled, content: _jsx(MenuContent, { children: Object.values(resultState.exportDataFormatOptions).map((format) => (_jsxs(MenuContentItem, { onClick: () => confirmExport(format), children: [_jsx(MenuContentItemIcon, { children: _jsx(CsvIcon, {}) }), _jsx(MenuContentItemLabel, { children: format })] }, format))) }), menuProps: {
anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
transformOrigin: { vertical: 'top', horizontal: 'right' },
elevation: 7,
}, children: [_jsx("div", { className: "data-quality-validation__result__export__dropdown__label", children: "Export" }), _jsx("div", { className: "data-quality-validation__result__export__dropdown__trigger", children: _jsx(CaretDownIcon, {}) })] })] })] }), _jsxs(PanelContent, { className: "data-quality-validation__result__content", children: [_jsx(CubesLoadingIndicator, { isLoading: isLoading, children: _jsx(CubesLoadingIndicatorIcon, {}) }), !executionResult && !isLoading && (_jsx(BlankPanelContent, { children: "Click on run validation to see the validation results" })), executionResult && !isLoading && (_jsx("div", { className: "data-quality-validation__result__values", children: _jsx(DataQualityResultValues, { executionResult: executionResult, relationValidationConfigurationState: dataQualityRelationValidationConfigurationState }) }))] }), _jsx(ExecutionPlanViewer, { executionPlanState: resultState.executionPlanState }), dataQualityRelationValidationConfigurationState.parametersState
.parameterValuesEditorState.showModal && (_jsx(LambdaParameterValuesEditor, { graph: dataQualityRelationValidationConfigurationState.editorStore
.graphManagerState.graph, observerContext: dataQualityRelationValidationConfigurationState.editorStore
.changeDetectionState.observerContext, lambdaParametersState: dataQualityRelationValidationConfigurationState.parametersState }))] }));
});
//# sourceMappingURL=DataQualityRelationTrialRuns.js.map