pierrejeambrun commented on code in PR #58359:
URL: https://github.com/apache/airflow/pull/58359#discussion_r2560086040


##########
airflow-core/src/airflow/ui/src/components/DagRunInfo.tsx:
##########
@@ -42,7 +42,7 @@ const DagRunInfo = ({ endDate, logicalDate, runAfter, 
startDate, state }: Props)
         <VStack align="left" gap={0}>
           {state === undefined ? undefined : (
             <Text>
-              {translate("state")}: {state}
+              {translate("state")}: {translate(`common:states.${state}`)}

Review Comment:
   Nice catch.



##########
airflow-core/src/airflow/ui/src/components/TaskInstanceTooltip.tsx:
##########
@@ -43,7 +43,10 @@ const TaskInstanceTooltip = ({ children, positioning, 
taskInstance, ...rest }: P
       content={
         <Box>
           <Text>
-            {translate("state")}: {taskInstance.state}
+            {translate("state")}:{" "}
+            {taskInstance.state
+              ? translate(`common:states.${taskInstance.state}`)
+              : translate("common:states.no_status")}

Review Comment:
   Nice catch too.



##########
airflow-core/src/airflow/ui/src/components/BasicTooltip.tsx:
##########
@@ -0,0 +1,123 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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 { Box, Portal } from "@chakra-ui/react";
+import type { ReactElement, ReactNode } from "react";
+import { cloneElement, useCallback, useEffect, useRef, useState } from "react";
+
+type Props = {
+  readonly children: ReactElement;
+  readonly content: ReactNode;
+};
+
+const offset = 8;
+const zIndex = 1500;
+// Estimated tooltip height for viewport boundary detection
+const estimatedTooltipHeight = 100;

Review Comment:
   This won't be true for `task groups` the height of the tooltip seems bigger 
than this, so it would still be able to overflow without the flip actually 
occurring.
   
   We can either put a safer value there, (but I don't like that). Or actually 
use the `ref.current.clientHeight` to get the real value.



##########
airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridTI.tsx:
##########
@@ -106,35 +109,44 @@ const Instance = ({ dagId, instance, isGroup, isMapped, 
onClick, runId, taskId }
       py={0}
       transition="background-color 0.2s"
     >
-      <Link
-        id={`grid-${runId}-${taskId}`}
-        onClick={onClick}
-        replace
-        to={{
-          pathname: getTaskUrl(),
-          search: redirectionSearch,
-        }}
+      <BasicTooltip
+        content={
+          <>
+            {translate("taskId")}: {taskId}
+            <br />
+            {translate("state")}:{" "}
+            {instance.state
+              ? translate(`common:states.${instance.state}`)
+              : translate("common:states.no_status")}
+            {instance.min_start_date !== null && (
+              <>
+                <br />
+                {translate("startDate")}: <Time 
datetime={instance.min_start_date} />
+              </>
+            )}
+            {instance.max_end_date !== null && (
+              <>
+                <br />
+                {translate("endDate")}: <Time datetime={instance.max_end_date} 
/>
+              </>
+            )}
+            {Boolean(duration) && (
+              <>
+                <br />
+                {translate("duration")}: {duration}
+              </>
+            )}
+          </>
+        }
       >

Review Comment:
   Adding the duration seems outside the scope of this PR. 
   
   Do you mind removing so we limit the scope of this one. It will only make 
sense for 'groups' for now and we can discuss about it if we want to expand 
more.



##########
airflow-core/src/airflow/ui/src/components/BasicTooltip.tsx:
##########
@@ -0,0 +1,123 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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 { Box, Portal } from "@chakra-ui/react";
+import type { ReactElement, ReactNode } from "react";
+import { cloneElement, useCallback, useEffect, useRef, useState } from "react";
+
+type Props = {
+  readonly children: ReactElement;
+  readonly content: ReactNode;
+};
+
+const offset = 8;
+const zIndex = 1500;

Review Comment:
   `popover` chakra semantic token:
   `system.tokens.categoryMap.get("zIndex")?.get("popover")?.value`
   
   Or something like it



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: [email protected]

For queries about this service, please contact Infrastructure at:
[email protected]

Reply via email to