Grid task log, multi select and ts files migration. (#24623)

* Multi select + ts files migration.

* Fix conflicts and transfert tests to ts files

* Add multi select on file source.

* Update placeholder color

* Update scrollIntoview.

airflow/www/package.json

@@ -82,6 +82,7 @@
     "axios": "^0.26.0",
     "bootstrap-3-typeahead": "^4.0.2",
     "camelcase-keys": "^7.0.0",
+    "chakra-react-select": "^4.0.0",
     "codemirror": "^5.59.1",
     "d3": "^3.4.4",
     "d3-shape": "^2.1.0",

airflow/www/static/js/grid/api/useTaskLog.js → airflow/www/static/js/grid/api/useTaskLog.tsx

@@ -17,23 +17,31 @@
  * under the License.
  */
 
-import axios from 'axios';
+import axios, { AxiosResponse } from 'axios';
 import { useQuery } from 'react-query';
 import { getMetaValue } from '../../utils';
 
 const taskLogApi = getMetaValue('task_log_api');
 
 const useTaskLog = ({
-  dagId, dagRunId, taskId, taskTryNumber, fullContent, enabled,
+  dagId, dagRunId, taskId, taskTryNumber, fullContent,
+}: {
+  dagId: string,
+  dagRunId: string,
+  taskId: string,
+  taskTryNumber: number,
+  fullContent: boolean,
 }) => {
-  const url = taskLogApi.replace('_DAG_RUN_ID_', dagRunId).replace('_TASK_ID_', taskId).replace(/-1$/, taskTryNumber);
+  let url: string = '';
+  if (taskLogApi) {
+    url = taskLogApi.replace('_DAG_RUN_ID_', dagRunId).replace('_TASK_ID_', taskId).replace(/-1$/, taskTryNumber.toString());
+  }
 
   return useQuery(
     ['taskLogs', dagId, dagRunId, taskId, taskTryNumber, fullContent],
-    () => axios.get(url, { headers: { Accept: 'text/plain' }, params: { full_content: fullContent } }),
+    () => axios.get<AxiosResponse, string>(url, { headers: { Accept: 'text/plain' }, params: { full_content: fullContent } }),
     {
       placeholderData: '',
-      enabled,
     },
   );
 };

airflow/www/static/js/grid/components/MultiSelect.tsx

@@ -0,0 +1,53 @@
+/*!
+ * 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 React from 'react';
+import { Select } from 'chakra-react-select';
+import type { SelectComponent } from 'chakra-react-select';
+
+const MultiSelect: SelectComponent = ({ chakraStyles, ...props }) => (
+  <Select
+    size="sm"
+    selectedOptionStyle="check"
+    {...props}
+    chakraStyles={{
+      dropdownIndicator: (provided) => ({
+        ...provided,
+        bg: 'transparent',
+        px: 2,
+        cursor: 'inherit',
+      }),
+      indicatorSeparator: (provided) => ({
+        ...provided,
+        display: 'none',
+      }),
+      menuList: (provided) => ({
+        ...provided,
+        py: 0,
+      }),
+      placeholder: (provided) => ({
+        ...provided,
+        color: 'inherit',
+      }),
+      ...chakraStyles,
+    }}
+  />
+);
+
+export default MultiSelect;

airflow/www/static/js/grid/details/content/taskInstance/Logs/LogLink.test.jsx → airflow/www/static/js/grid/details/content/taskInstance/Logs/LogLink.test.tsx

@@ -40,7 +40,7 @@ describe('Test LogLink Component.', () => {
     const linkElement = container.querySelector('a');
     expect(linkElement).toBeDefined();
     expect(linkElement).not.toHaveAttribute('target');
-    expect(linkElement.href.includes(
+    expect(linkElement?.href.includes(
       `?dag_id=dummyDagId&task_id=dummyTaskId&execution_date=2020%3A01%3A01T01%3A00%2B00%3A00&format=file&try_number=${tryNumber}`,
     )).toBeTruthy();
   });
@@ -60,7 +60,7 @@ describe('Test LogLink Component.', () => {
     const linkElement = container.querySelector('a');
     expect(linkElement).toBeDefined();
     expect(linkElement).toHaveAttribute('target', '_blank');
-    expect(linkElement.href.includes(
+    expect(linkElement?.href.includes(
       `?dag_id=dummyDagId&task_id=dummyTaskId&execution_date=2020%3A01%3A01T01%3A00%2B00%3A00&try_number=${tryNumber}`,
     )).toBeTruthy();
   });

airflow/www/static/js/grid/details/content/taskInstance/Logs/LogLink.jsx → airflow/www/static/js/grid/details/content/taskInstance/Logs/LogLink.tsx

@@ -21,20 +21,29 @@ import React from 'react';
 
 import { getMetaValue } from '../../../../../utils';
 import LinkButton from '../../../../components/LinkButton';
+import type { Dag, DagRun, TaskInstance } from '../../../../types';
 
 const logsWithMetadataUrl = getMetaValue('logs_with_metadata_url');
 const externalLogUrl = getMetaValue('external_log_url');
 
+interface Props {
+  dagId: Dag['id'];
+  taskId: TaskInstance['taskId'];
+  executionDate: DagRun['executionDate'];
+  isInternal?: boolean;
+  tryNumber: TaskInstance['tryNumber'];
+}
+
 const LogLink = ({
   dagId, taskId, executionDate, isInternal, tryNumber,
-}) => {
+}: Props) => {
   let fullMetadataUrl = `${isInternal ? logsWithMetadataUrl : externalLogUrl
   }?dag_id=${encodeURIComponent(dagId)
   }&task_id=${encodeURIComponent(taskId)
   }&execution_date=${encodeURIComponent(executionDate)
   }`;
 
-  if (isInternal) {
+  if (isInternal && tryNumber) {
     fullMetadataUrl += `&format=file${tryNumber > 0 && `&try_number=${tryNumber}`}`;
   } else {
     fullMetadataUrl += `&try_number=${tryNumber}`;