Skip to content

Commit

Permalink
Cherry pick fix alerts PR to v0.30.0-branch (#422)
Browse files Browse the repository at this point in the history 
Cherry pick #421
  • Loading branch information
@ariefrahmansyah
ariefrahmansyah authored Jul 5, 2023
1 parent 51892ef commit 921a554
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 54 deletions.
71 changes: 31 additions & 40 deletions ui/src/model/ModelDetails.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,13 @@
* limitations under the License.
*/

import React, { useEffect, useState } from "react";
import { Route, Routes, useLocation, useParams } from "react-router-dom";
import {
EuiLoadingContent,
EuiPageTemplate,
EuiSpacer
} from "@elastic/eui";
import { get } from "@caraml-dev/ui-lib";
import { EuiLoadingContent, EuiPageTemplate, EuiSpacer } from "@elastic/eui";
import React from "react";
import { Route, Routes, useParams } from "react-router-dom";
import { featureToggleConfig } from "../config";
import { useMerlinApi } from "../hooks/useMerlinApi";
import mocks from "../mocks";
import { ModelAlert } from "./alert/ModelAlert";
import { featureToggleConfig } from "../config";

const LoadingContent = () => (
<EuiPageTemplate.Section>
Expand All @@ -34,34 +30,23 @@ const LoadingContent = () => (

export const ModelDetails = () => {
const { projectId, modelId } = useParams();
const location = useLocation();
const [model, setModel] = useState(get(location.state, "model"));
const [breadcrumbs, setBreadcrumbs] = useState([]);

const [{ data: models, isLoaded: modelsLoaded }] = useMerlinApi(
`/projects/${projectId}/models`,
{},
[],
!model
const [{ data: model, isLoaded: modelLoaded }] = useMerlinApi(
`/projects/${projectId}/models/${modelId}`,
{ mock: mocks.model },
[]
);

useEffect(() => {
modelsLoaded && setModel(models.find(m => m.id.toString() === modelId));
}, [models, modelsLoaded, modelId, setModel]);

useEffect(() => {
model &&
setBreadcrumbs([
{
text: "Models",
href: `/merlin/projects/${projectId}/models`
},
{
text: model.name,
href: `/merlin/projects/${projectId}/models/${model.id}`
}
]);
}, [projectId, model]);
const breadcrumbs = [
{
text: "Models",
href: `/merlin/projects/${projectId}/models`,
},
{
text: model.name,
href: `/merlin/projects/${projectId}/models/${modelId}`,
},
];

return (
<EuiPageTemplate restrictWidth="90%" paddingSize="none">
Expand All @@ -71,20 +56,26 @@ export const ModelDetails = () => {
iconType={"machineLearningApp"}
pageTitle={model.name}
/>

<EuiSpacer size="l" />
<EuiPageTemplate.Section color={"transparent"}>
{featureToggleConfig.alertEnabled && (
<Routes>
<Route index element={<LoadingContent default />} />
{model && (<Route path="endpoints/:endpointId/alert" element={<ModelAlert
{modelLoaded && model && (
<Route
path="endpoints/:endpointId/alert"
breadcrumbs={breadcrumbs}
model={model}
/>} />)}
element={
<ModelAlert
path="endpoints/:endpointId/alert"
breadcrumbs={breadcrumbs}
model={model}
/>
}
/>
)}
</Routes>
)}

</EuiPageTemplate.Section>
<EuiSpacer size="l" />
</EuiPageTemplate>
Expand Down
32 changes: 18 additions & 14 deletions ui/src/model/alert/ModelAlert.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,23 +14,25 @@
* limitations under the License.
*/

import React, { Fragment, useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { replaceBreadcrumbs } from "@caraml-dev/ui-lib";
import {
EuiButton,
EuiButtonEmpty,
EuiFlexGroup,
EuiFlexItem,
EuiForm,
EuiTitle
EuiTitle,
} from "@elastic/eui";
import { replaceBreadcrumbs } from "@caraml-dev/ui-lib";
import PropTypes from "prop-types";
import React, { Fragment, useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { useMerlinApi } from "../../hooks/useMerlinApi";
import mocks from "../../mocks";
import { ModelAlertForm } from "./components/ModelAlertForm";
import PropTypes from "prop-types";

export const ModelAlert = ({ breadcrumbs, model, endpointId }) => {
export const ModelAlert = ({ breadcrumbs, model }) => {
const { endpointId } = useParams();

const navigate = useNavigate();
const redirectUrl = `/merlin/projects/${model.project_id}`;

Expand All @@ -40,22 +42,22 @@ export const ModelAlert = ({ breadcrumbs, model, endpointId }) => {

const [request, setRequest] = useState({
model_id: model.id,
alert_conditions: []
alert_conditions: [],
});

const [endpoint, setEndpoint] = useState();

useEffect(() => {
if (model && endpointId) {
const endpoint = model.endpoints.find(
e => e.id.toString() === endpointId
(e) => e.id.toString() === endpointId
);
setEndpoint(endpoint);

setRequest(r => ({
setRequest((r) => ({
...r,
model_endpoint_id: parseInt(endpointId),
environment_name: endpoint.environment_name
environment_name: endpoint.environment_name,
}));
}
}, [model, endpointId, setEndpoint, setRequest]);
Expand All @@ -66,7 +68,7 @@ export const ModelAlert = ({ breadcrumbs, model, endpointId }) => {
`/models/${model.id}/endpoints/${endpointId}/alert`,
{
mock: mocks.modelEndpointAlert,
muteError: true
muteError: true,
}
);

Expand Down Expand Up @@ -134,7 +136,8 @@ export const ModelAlert = ({ breadcrumbs, model, endpointId }) => {
<EuiFlexItem grow={false}>
<EuiButtonEmpty
size="s"
onClick={() => navigate(redirectUrl)}>
onClick={() => navigate(redirectUrl)}
>
Cancel
</EuiButtonEmpty>
</EuiFlexItem>
Expand All @@ -145,7 +148,8 @@ export const ModelAlert = ({ breadcrumbs, model, endpointId }) => {
color="primary"
fill
disabled={request.alert_conditions.length === 0}
onClick={saveAlert}>
onClick={saveAlert}
>
Save
</EuiButton>
</EuiFlexItem>
Expand All @@ -162,5 +166,5 @@ export const ModelAlert = ({ breadcrumbs, model, endpointId }) => {
ModelAlert.propTypes = {
breadcrumbs: PropTypes.array,
model: PropTypes.object,
endpointId: PropTypes.string
endpointId: PropTypes.string,
};

0 comments on commit 921a554

Please sign in to comment.