PR reviews

Signed-off-by: Antoine THEBAUD <antoine.thebaud@yahoo.fr>
perses · Feb 28, 2024 · 3f9df46 · 3f9df46
1 parent f1236ee
commit 3f9df46
Show file tree

Hide file tree

Showing 14 changed files with 35 additions and 42 deletions.
diff --git a/ui/app/src/components/EphemeralDashboardList/EphemeralDashboardDataGrid.tsx b/ui/app/src/components/EphemeralDashboardList/EphemeralDashboardDataGrid.tsx
@@ -41,7 +41,7 @@ export interface Row {
   version: number;
   createdAt: string;
   updatedAt: string;
-  expireAt: Date;
+  expireAt: string;
 }
 
 function NoEphemeralDashboardRowOverlay() {

diff --git a/ui/app/src/components/EphemeralDashboardList/EphemeralDashboardList.tsx b/ui/app/src/components/EphemeralDashboardList/EphemeralDashboardList.tsx
@@ -11,12 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {
-  getDashboardDisplayName,
-  EphemeralDashboardResource,
-  DashboardResource,
-  parseDurationString,
-} from '@perses-dev/core';
+import { getDashboardDisplayName, EphemeralDashboardResource, parseDurationString } from '@perses-dev/core';
 import { Box, Stack, Tooltip } from '@mui/material';
 import { GridColDef, GridRowParams, GridValueGetterParams } from '@mui/x-data-grid';
 import DeleteIcon from 'mdi-material-ui/DeleteOutline';
@@ -55,11 +50,11 @@ export function EphemeralDashboardList(props: EphemeralDashboardListProperties)
     [ephemeralDashboardList]
   );
 
-  const getExpirationDate = useCallback((ephemeralDashboard: EphemeralDashboardResource): Date => {
+  const getExpirationDate = useCallback((ephemeralDashboard: EphemeralDashboardResource): string => {
     return add(
       ephemeralDashboard.metadata.updatedAt ? new Date(ephemeralDashboard.metadata.updatedAt) : new Date(),
       parseDurationString(ephemeralDashboard.spec.ttl)
-    );
+    ).toLocaleString();
   }, []);
 
   const rows = useMemo(() => {
@@ -68,7 +63,7 @@ export function EphemeralDashboardList(props: EphemeralDashboardListProperties)
         ({
           project: ephemeralDashboard.metadata.project,
           name: ephemeralDashboard.metadata.name,
-          displayName: getDashboardDisplayName(ephemeralDashboard as unknown as DashboardResource),
+          displayName: getDashboardDisplayName(ephemeralDashboard),
           expireAt: getExpirationDate(ephemeralDashboard),
           version: ephemeralDashboard.metadata.version,
           createdAt: ephemeralDashboard.metadata.createdAt,
@@ -118,6 +113,7 @@ export function EphemeralDashboardList(props: EphemeralDashboardListProperties)
         type: 'dateTime',
         flex: 3,
         minWidth: 150,
+        valueGetter: (params: GridValueGetterParams) => new Date(params.row.expireAt),
         renderCell: (params) => (
           <Tooltip title={params.value.toUTCString()} placement="top">
             <span>{intlFormatDistance(params.value, new Date())}</span>

diff --git a/ui/app/src/components/dialogs/CreateEphemeralDashboardDialog.tsx b/ui/app/src/components/dialogs/CreateEphemeralDashboardDialog.tsx
@@ -16,14 +16,14 @@ import { Button, Stack, TextField } from '@mui/material';
 import { Dialog } from '@perses-dev/components';
 import { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { EphemeralDashboardSelector } from '@perses-dev/core';
+import { EphemeralDashboardInfo } from '@perses-dev/core';
 import { CreateEphemeralDashboardValidationType, useEphemeralDashboardValidationSchema } from '../../validation';
 
 interface CreateEphemeralDashboardProps {
   open: boolean;
   projectOptions: string[];
   onClose: DispatchWithoutAction;
-  onSuccess?: Dispatch<EphemeralDashboardSelector>;
+  onSuccess?: Dispatch<EphemeralDashboardInfo>;
 }
 
 /**
@@ -52,7 +52,7 @@ export const CreateEphemeralDashboardDialog = (props: CreateEphemeralDashboardPr
         project: data.projectName,
         dashboard: data.dashboardName,
         ttl: data.ttl,
-      } as EphemeralDashboardSelector);
+      } as EphemeralDashboardInfo);
     }
   };
 

diff --git a/ui/app/src/components/dialogs/DeleteEphemeralDashboardDialog.tsx b/ui/app/src/components/dialogs/DeleteEphemeralDashboardDialog.tsx
@@ -14,7 +14,7 @@
 import { Dispatch, DispatchWithoutAction, useCallback } from 'react';
 import { Button } from '@mui/material';
 import { Dialog, useSnackbar } from '@perses-dev/components';
-import { DashboardResource, EphemeralDashboardResource } from '@perses-dev/core';
+import { EphemeralDashboardResource } from '@perses-dev/core';
 import { getDashboardExtendedDisplayName } from '@perses-dev/core/dist/utils/text';
 import { useDeleteEphemeralDashboardMutation } from '../../model/ephemeral-dashboard-client';
 
@@ -41,9 +41,7 @@ export const DeleteEphemeralDashboardDialog = (props: DeleteEphemeralDashboardDi
     return deleteEphemeralDashboardMutation.mutate(ephemeralDashboard, {
       onSuccess: (deletedEphemeralDashboard: EphemeralDashboardResource) => {
         successSnackbar(
-          `Ephemeral dashboard ${getDashboardExtendedDisplayName(
-            deletedEphemeralDashboard as unknown as DashboardResource
-          )} was successfully deleted`
+          `Ephemeral Dashboard ${getDashboardExtendedDisplayName(deletedEphemeralDashboard)} was successfully deleted`
         );
         onClose();
         if (onSuccess) {
@@ -61,9 +59,8 @@ export const DeleteEphemeralDashboardDialog = (props: DeleteEphemeralDashboardDi
     <Dialog open={open} onClose={onClose}>
       <Dialog.Header>Delete Ephemeral Dashboard</Dialog.Header>
       <Dialog.Content>
-        Are you sure you want to delete the ephemeral dashboard{' '}
-        {getDashboardExtendedDisplayName(ephemeralDashboard as unknown as DashboardResource)}? This action cannot be be
-        be undone.
+        Are you sure you want to delete the ephemeral dashboard {getDashboardExtendedDisplayName(ephemeralDashboard)}?
+        This action cannot be be be undone.
       </Dialog.Content>
       <Dialog.Actions>
         <Button variant="contained" type="submit" onClick={handleSubmit}>

diff --git a/ui/app/src/components/dialogs/UpdateEphemeralDashboardDialog.tsx b/ui/app/src/components/dialogs/UpdateEphemeralDashboardDialog.tsx
@@ -15,7 +15,6 @@ import { Dispatch, DispatchWithoutAction } from 'react';
 import { Button, TextField } from '@mui/material';
 import { Dialog, useSnackbar } from '@perses-dev/components';
 import {
-  DashboardResource,
   DurationString,
   EphemeralDashboardResource,
   getDashboardDisplayName,
@@ -49,7 +48,7 @@ export const UpdateEphemeralDashboardDialog = (props: UpdateEphemeralDashboardDi
     resolver: zodResolver(updateEphemeralDashboardDialogValidationSchema),
     mode: 'onBlur',
     defaultValues: {
-      dashboardName: getDashboardDisplayName(ephemeralDashboard as unknown as DashboardResource),
+      dashboardName: getDashboardDisplayName(ephemeralDashboard),
       ttl: ephemeralDashboard.spec.ttl,
     },
   });
@@ -67,8 +66,8 @@ export const UpdateEphemeralDashboardDialog = (props: UpdateEphemeralDashboardDi
     updateEphemeralDashboardMutation.mutate(ephemeralDashboard, {
       onSuccess: (updatedEphemeralDashboard: EphemeralDashboardResource) => {
         successSnackbar(
-          `Ephemeral dashboard ${getDashboardExtendedDisplayName(
-            updatedEphemeralDashboard as unknown as DashboardResource
+          `Ephemeral Dashboard ${getDashboardExtendedDisplayName(
+            updatedEphemeralDashboard
           )} has been successfully updated`
         );
         onClose();

diff --git a/ui/app/src/validation/ephemeraldashboard.ts b/ui/app/src/validation/ephemeraldashboard.ts
@@ -46,7 +46,7 @@ export function useEphemeralDashboardValidationSchema(projectName?: string) {
         );
       },
       (schema) => ({
-        message: `Ephemeral dashboard name '${schema.dashboardName}' already exists in '${schema.projectName}' project!`,
+        message: `Ephemeral Dashboard name '${schema.dashboardName}' already exists in '${schema.projectName}' project!`,
         path: ['dashboardName'],
       })
     );

diff --git a/ui/app/src/views/projects/ProjectTabs.tsx b/ui/app/src/views/projects/ProjectTabs.tsx
@@ -28,7 +28,7 @@ import {
   RoleResource,
   RoleBindingResource,
   SecretResource,
-  EphemeralDashboardSelector,
+  EphemeralDashboardInfo,
 } from '@perses-dev/core';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useSnackbar } from '@perses-dev/components';
@@ -93,9 +93,9 @@ function TabButton({ index, projectName, ...props }: TabButtonProps) {
     navigate(`/projects/${dashboardSelector.project}/dashboard/new`, { state: dashboardSelector.dashboard });
   };
 
-  const handleEphemeralDashboardCreation = (dashboardSelector: EphemeralDashboardSelector) => {
-    navigate(`/projects/${dashboardSelector.project}/ephemeraldashboard/new`, {
-      state: { name: dashboardSelector.dashboard, ttl: dashboardSelector.ttl },
+  const handleEphemeralDashboardCreation = (dashboardInfo: EphemeralDashboardInfo) => {
+    navigate(`/projects/${dashboardInfo.project}/ephemeraldashboard/new`, {
+      state: { name: dashboardInfo.dashboard, ttl: dashboardInfo.ttl },
     });
   };
 
@@ -446,7 +446,8 @@ export function ProjectTabs(props: DashboardVariableTabsProps) {
 
   const navigate = useNavigate();
   const isMobileSize = useIsMobileSize();
-  const hasEphemeralDashboards = (useEphemeralDashboardList(projectName).data ?? []).length > 0;
+  const { data } = useEphemeralDashboardList(projectName);
+  const hasEphemeralDashboards = (data ?? []).length > 0;
 
   const [value, setValue] = useState((initialTab ?? dashboardsTabIndex).toLowerCase());
 
@@ -478,7 +479,7 @@ export function ProjectTabs(props: DashboardVariableTabsProps) {
             {...a11yProps(dashboardsTabIndex)}
             value={dashboardsTabIndex}
           />
-          {(hasEphemeralDashboards || tab == 'ephemeraldashboards') && (
+          {(hasEphemeralDashboards || tab == ephemeralDashboardsTabIndex) && (
             <MenuTab
               label="Ephemeral Dashboards"
               icon={<ViewDashboardIcon />}

diff --git a/ui/app/src/views/projects/dashboards/CreateEphemeralDashboardView.tsx b/ui/app/src/views/projects/dashboards/CreateEphemeralDashboardView.tsx
@@ -69,8 +69,8 @@ function CreateEphemeralDashboardView() {
       return createEphemeralDashboardMutation.mutateAsync(data, {
         onSuccess: (createdEphemeralDashboard: EphemeralDashboardResource) => {
           successSnackbar(
-            `EphemeralDashboard ${getDashboardExtendedDisplayName(
-              createdEphemeralDashboard as unknown as DashboardResource
+            `Ephemeral Dashboard ${getDashboardExtendedDisplayName(
+              createdEphemeralDashboard
             )} has been successfully created`
           );
           navigate(

diff --git a/ui/app/src/views/projects/dashboards/EphemeralDashboardView.tsx b/ui/app/src/views/projects/dashboards/EphemeralDashboardView.tsx
@@ -55,8 +55,8 @@ function EphemeralDashboardView() {
       return updateEphemeralDashboardMutation.mutateAsync(data, {
         onSuccess: (updatedEphemeralDashboard: EphemeralDashboardResource) => {
           successSnackbar(
-            `EphemeralDashboard ${getDashboardExtendedDisplayName(
-              updatedEphemeralDashboard as unknown as DashboardResource
+            `Ephemeral Dashboard ${getDashboardExtendedDisplayName(
+              updatedEphemeralDashboard
             )} has been successfully updated`
           );
           return updatedEphemeralDashboard;

diff --git a/ui/app/src/views/projects/dashboards/HelperDashboardView.tsx b/ui/app/src/views/projects/dashboards/HelperDashboardView.tsx
@@ -82,7 +82,7 @@ export function HelperDashboardView(props: GenericDashboardViewProps) {
               externalVariableDefinitions={externalVariableDefinitions}
               dashboardTitleComponent={
                 <ProjectBreadcrumbs
-                  dashboardName={getDashboardDisplayName(dashboardResource as unknown as DashboardResource)}
+                  dashboardName={getDashboardDisplayName(dashboardResource)}
                   projectName={dashboardResource.metadata.project}
                 />
               }

diff --git a/ui/core/src/model/ephemeraldashboard.ts b/ui/core/src/model/ephemeraldashboard.ts
@@ -25,6 +25,6 @@ export interface EphemeralDashboardSpec extends DashboardSpec {
   ttl: DurationString;
 }
 
-export interface EphemeralDashboardSelector extends DashboardSelector {
+export interface EphemeralDashboardInfo extends DashboardSelector {
   ttl: DurationString;
 }
diff --git a/ui/core/src/utils/text.ts b/ui/core/src/utils/text.ts
@@ -11,14 +11,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { DashboardResource, Variable, Datasource } from '../model';
+import { DashboardResource, Variable, Datasource, EphemeralDashboardResource } from '../model';
 
 /**
  * If the dashboard has a display name, return the dashboard display name
  * Else, only return the dashboard name
  * @param dashboard
  */
-export function getDashboardDisplayName(dashboard: DashboardResource) {
+export function getDashboardDisplayName(dashboard: DashboardResource | EphemeralDashboardResource) {
   return dashboard.spec.display?.name ?? dashboard.metadata.name;
 }
 
@@ -45,7 +45,7 @@ export function getDatasourceDisplayName(datasource: Datasource) {
  * Else, only return the dashboard name
  * @param dashboard
  */
-export function getDashboardExtendedDisplayName(dashboard: DashboardResource) {
+export function getDashboardExtendedDisplayName(dashboard: DashboardResource | EphemeralDashboardResource) {
   if (dashboard.spec.display?.name) {
     return `${dashboard.spec.display.name} (Name: ${dashboard.metadata.name})`;
   }

diff --git a/ui/dashboards/src/components/EditJsonDialog/EditJsonDialog.tsx b/ui/dashboards/src/components/EditJsonDialog/EditJsonDialog.tsx
@@ -72,7 +72,7 @@ const EditJsonDialogForm = (props: EditJsonDialogProps) => {
           </Alert>
         )}
         {draftDashboard.kind === 'EphemeralDashboard' && (
-          <Alert sx={{ marginBottom: (theme) => theme.spacing(1) }} severity="warning">
+          <Alert sx={{ marginBottom: 1 }} severity="warning">
             Time-to-live cannot be modified or saved from here. Go to the project view to modify it.
           </Alert>
         )}

diff --git a/ui/dashboards/src/context/DashboardProvider/DashboardProvider.tsx b/ui/dashboards/src/context/DashboardProvider/DashboardProvider.tsx
@@ -59,7 +59,7 @@ export interface DashboardStoreState
   refreshInterval: DurationString;
   display?: Display;
   datasources?: Record<string, DatasourceSpec>;
-  ttl: DurationString | undefined;
+  ttl?: DurationString;
 }
 
 export interface DashboardStoreProps {