feat: Simplify CogniteTimeSeries tab with single View dropdown (#642)

## Summary

Simplifies the CogniteTimeSeries tab by replacing separate Space,
Version, and View dropdowns with a single View dropdown that fetches
views from the container inspect API.

## Changes

### CogniteTimeSeries Tab
- **Before:** Users had to select Space, enter Version, then select View
separately
- **After:** Single View dropdown shows all views implementing the
CogniteTimeSeries container
- Views are fetched from `/models/containers/inspect` API endpoint
- Dropdown shows format: `ViewName (space) version`

### Variable Query Editor
- Switched data models list from GraphQL to REST API (`GET
/models/datamodels`)
- Added `includeGlobal=true` parameter to include global data models

### Tests
- Updated e2e tests for new View dropdown UI
- All CogniteTimeSeries tests passing (7/7)

## API Used
```
POST /models/containers/inspect
{
  "items": [{ "space": "cdf_cdm", "externalId": "CogniteTimeSeries" }],
  "inspectionOperations": {
    "involvedViews": { "allVersions": true }
  }
}
```

Author: muradsater

src/cdf/client.ts

@@ -21,6 +21,8 @@ import {
   DMSListRequest,
   DMSListResponse,
   CogniteUnit,
+  InvolvedView,
+  ContainerInspectResponse,
 } from '../types/dms';
 import {
   Tab,
@@ -620,4 +622,45 @@ export async function getTimeSeriesUnit(
   return undefined;
 }
 
+// Fetch views that implement the CogniteTimeSeries container
+export async function fetchCogniteTimeSeriesViews(
+  connector: Connector
+): Promise<InvolvedView[]> {
+  try {
+    const response = await retryOnRateLimit(() =>
+      connector.fetchData<{ data: ContainerInspectResponse }>({
+        method: HttpMethod.POST,
+        path: '/models/containers/inspect',
+        data: {
+          items: [
+            {
+              space: 'cdf_cdm',
+              externalId: 'CogniteTimeSeries',
+            },
+          ],
+          inspectionOperations: {
+            involvedViews: {
+              allVersions: true,
+            },
+            totalInvolvedViewCount: {
+              allVersions: true,
+              includeUnavailableViews: true,
+            },
+          },
+        },
+        cacheTime: CacheTime.ResourceByIds,
+      })
+    );
+
+    const item = response.data?.items?.[0];
+    if (item?.inspectionResults?.involvedViews) {
+      return item.inspectionResults.involvedViews;
+    }
+    return [];
+  } catch (err) {
+    console.warn('Failed to fetch CogniteTimeSeries views:', err);
+    return [];
+  }
+}
+
 

src/components/cogniteTimeSeriesSearchTab.tsx

@@ -1,9 +1,9 @@
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
-import { Select, AsyncSelect, Alert, InlineFieldRow, InlineField, Input, InlineSwitch } from '@grafana/ui';
+import { Select, AsyncSelect, Alert, InlineFieldRow, InlineField, InlineSwitch } from '@grafana/ui';
 import { SelectableValue } from '@grafana/data';
 import { SelectedProps } from '../types';
-import { fetchDMSSpaces, fetchDMSViews, searchDMSInstances, fetchCogniteUnits, getTimeSeriesUnit, stringifyError } from '../cdf/client';
-import { DMSSpace, DMSView, DMSInstance, DMSSearchRequest, CogniteUnit } from '../types/dms';
+import { searchDMSInstances, fetchCogniteUnits, getTimeSeriesUnit, stringifyError, fetchCogniteTimeSeriesViews } from '../cdf/client';
+import { DMSInstance, DMSSearchRequest, CogniteUnit, InvolvedView } from '../types/dms';
 import { CommonEditors, LabelEditor } from './commonEditors';
 import { Connector } from '../connector';
 
@@ -36,8 +36,7 @@ export const CogniteTimeSeriesSearchTab: React.FC<CogniteTimeSeriesSearchTabProp
   onQueryChange,
   connector,
 }) => {
-  const [spaces, setSpaces] = useState<SelectableValue[]>([]);
-  const [views, setViews] = useState<SelectableValue[]>([]);
+  const [viewOptions, setViewOptions] = useState<Array<SelectableValue<InvolvedView>>>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [units, setUnits] = useState<CogniteUnit[]>([]);
@@ -54,37 +53,19 @@ export const CogniteTimeSeriesSearchTab: React.FC<CogniteTimeSeriesSearchTabProp
     [cogniteTimeSeries.instanceId]
   );
 
-  const loadSpaces = useCallback(async () => {
+  const loadViews = useCallback(async () => {
     try {
       setLoading(true);
-      const spacesData = await fetchDMSSpaces(connector);
-      const spaceOptions = spacesData.map((space: DMSSpace) => ({
-        label: space.name || space.space,
-        value: space.space,
-        description: space.description,
+      const views = await fetchCogniteTimeSeriesViews(connector);
+      const options = views.map((view: InvolvedView) => ({
+        label: `${view.externalId} (${view.space}) ${view.version}`,
+        value: view,
+        description: `Space: ${view.space}, Version: ${view.version}`,
       }));
-      setSpaces(spaceOptions);
+      setViewOptions(options);
       setError(null);
     } catch (err) {
-      setError(`Failed to load spaces: ${stringifyError(err)}`);
-    } finally {
-      setLoading(false);
-    }
-  }, [connector]);
-
-  const loadViews = useCallback(async (space: string) => {
-    try {
-      setLoading(true);
-      const viewsData = await fetchDMSViews(connector, space);
-      const viewOptions = viewsData.map((view: DMSView) => ({
-        label: view.name || view.externalId,
-        value: view.externalId,
-        description: view.description,
-      }));
-      setViews(viewOptions);
-      setError(null);
-    } catch (err) {
-      setError(`Failed to load views for space ${space}: ${stringifyError(err)}`);
+      setError(`Failed to load CogniteTimeSeries views: ${stringifyError(err)}`);
     } finally {
       setLoading(false);
     }
@@ -135,14 +116,8 @@ export const CogniteTimeSeriesSearchTab: React.FC<CogniteTimeSeriesSearchTabProp
   }, [connector, cogniteTimeSeries.space, cogniteTimeSeries.externalId, cogniteTimeSeries.version]);
 
   useEffect(() => {
-    loadSpaces();
-  }, [loadSpaces]);
-
-  useEffect(() => {
-    if (cogniteTimeSeries.space) {
-      loadViews(cogniteTimeSeries.space);
-    }
-  }, [cogniteTimeSeries.space, loadViews]);
+    loadViews();
+  }, [loadViews]);
 
   // Load available units
   useEffect(() => {
@@ -182,33 +157,15 @@ export const CogniteTimeSeriesSearchTab: React.FC<CogniteTimeSeriesSearchTabProp
     fetchUnit();
   }, [connector, instanceIdKey, cogniteTimeSeries.instanceId]);
 
-  const handleSpaceChange = (selectedSpace: SelectableValue | null) => {
-    onQueryChange({
-      cogniteTimeSeries: {
-        ...cogniteTimeSeries,
-        space: selectedSpace?.value || '',
-        externalId: '', // Reset external ID when space changes
-        instanceId: undefined, // Reset selected timeseries
-      },
-    });
-  };
-
-  const handleVersionChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    onQueryChange({
-      cogniteTimeSeries: {
-        ...cogniteTimeSeries,
-        version: event.target.value,
-        instanceId: undefined, // Reset selected timeseries when version changes
-      },
-    });
-  };
-
-  const handleExternalIdChange = (selectedView: SelectableValue | null) => {
+  const handleViewChange = (selectedOption: SelectableValue<InvolvedView> | null) => {
+    const view = selectedOption?.value;
     onQueryChange({
       cogniteTimeSeries: {
         ...cogniteTimeSeries,
-        externalId: selectedView?.value || '',
-        instanceId: undefined, // Reset selected timeseries
+        space: view?.space || '',
+        externalId: view?.externalId || '',
+        version: view?.version || '',
+        instanceId: undefined, // Reset selected timeseries when view changes
       },
     });
   };
@@ -288,56 +245,36 @@ export const CogniteTimeSeriesSearchTab: React.FC<CogniteTimeSeriesSearchTabProp
 
   const isUnitConversionEnabled = !!timeSeriesUnit && !!cogniteTimeSeries.instanceId;
 
+  // Find the currently selected view option
+  const selectedViewOption = useMemo(() => {
+    if (cogniteTimeSeries.space && cogniteTimeSeries.externalId && cogniteTimeSeries.version) {
+      return viewOptions.find(
+        (opt) =>
+          opt.value?.space === cogniteTimeSeries.space &&
+          opt.value?.externalId === cogniteTimeSeries.externalId &&
+          opt.value?.version === cogniteTimeSeries.version
+      );
+    }
+    return null;
+  }, [viewOptions, cogniteTimeSeries.space, cogniteTimeSeries.externalId, cogniteTimeSeries.version]);
+
   return (
     <div>
       <div className="gf-form-group">
-        <InlineFieldRow>
-          <InlineField
-            label="Space"
-            labelWidth={14}
-            tooltip="Select the space to search in"
-          >
-            <Select
-              options={spaces}
-              value={cogniteTimeSeries.space}
-              onChange={handleSpaceChange}
-              placeholder="Select space"
-              isClearable
-              isLoading={loading}
-              width={20}
-            />
-          </InlineField>
-        </InlineFieldRow>
-
-        <InlineFieldRow>
-          <InlineField
-            label="Version"
-            labelWidth={14}
-            tooltip="Version of the view"
-          >
-            <Input
-              value={cogniteTimeSeries.version}
-              onChange={handleVersionChange}
-              placeholder="v1"
-              width={20}
-            />
-          </InlineField>
-        </InlineFieldRow>
-
         <InlineFieldRow>
           <InlineField
             label="View"
             labelWidth={14}
-            tooltip="Select the view to search in"
+            tooltip="Select a CogniteTimeSeries view to search in"
           >
             <Select
-              options={views}
-              value={cogniteTimeSeries.externalId}
-              onChange={handleExternalIdChange}
-              placeholder="Select view"
+              options={viewOptions}
+              value={selectedViewOption}
+              onChange={handleViewChange}
+              placeholder="Select a CogniteTimeSeries view"
               isClearable
               isLoading={loading}
-              width={20}
+              width={40}
             />
           </InlineField>
         </InlineFieldRow>
@@ -349,7 +286,7 @@ export const CogniteTimeSeriesSearchTab: React.FC<CogniteTimeSeriesSearchTabProp
             tooltip="Search for timeseries by name or description"
           >
             <AsyncSelect
-              key={`${cogniteTimeSeries.space}-${cogniteTimeSeries.version}-${cogniteTimeSeries.externalId}`}
+              key={`${cogniteTimeSeries.space}-${cogniteTimeSeries.externalId}-${cogniteTimeSeries.version}`}
               loadOptions={searchTimeseries}
               value={getCurrentTimeseriesValue()}
               onChange={handleTimeseriesSelection}

src/datasources/FlexibleDataModelingDatasource.spec.ts

@@ -13,34 +13,28 @@ describe('FlexibleDataModellingDatasource', () => {
 
   describe('listFlexibleDataModelling', () => {
     it('should return data when successful', async () => {
-      // Mock the fetchQuery method of the connector to return a successful response
-      connectorMock.fetchQuery = jest.fn().mockResolvedValue({
-        data: {
-          listGraphQlDmlVersions: {
-            items: [
-              {
-                space: 'test',
-                externalId: 'test',
-                version: '1',
-                name: 'test',
-                description: 'test',
-                graphQlDml: 'test',
-                createdTime: 'test',
-                lastUpdatedTime: 'test',
-              },
-            ],
-          },
+      // Mock the fetchItems method of the connector to return a successful response
+      // Uses REST API: GET /models/datamodels with includeGlobal=true
+      connectorMock.fetchItems = jest.fn().mockResolvedValue([
+        {
+          space: 'test',
+          externalId: 'test',
+          version: '1',
+          name: 'test',
+          description: 'test',
         },
-      });
+      ]);
 
       const result = await datasource.listFlexibleDataModelling('test-ref-id');
 
       expect(result.listGraphQlDmlVersions.items).toHaveLength(1);
+      expect(result.listGraphQlDmlVersions.items[0].space).toBe('test');
+      expect(result.listGraphQlDmlVersions.items[0].externalId).toBe('test');
     });
 
     it('should return an empty list when an error occurs', async () => {
-      // Mock the fetchQuery method of the connector to throw an error
-      connectorMock.fetchQuery = jest.fn().mockRejectedValue(new Error('Test error'));
+      // Mock the fetchItems method of the connector to throw an error
+      connectorMock.fetchItems = jest.fn().mockRejectedValue(new Error('Test error'));
 
       const result = await datasource.listFlexibleDataModelling('test-ref-id');
 

src/datasources/FlexibleDataModellingDatasource.ts

@@ -65,37 +65,37 @@ export class FlexibleDataModellingDatasource {
     }>
   > {
     try {
-      const { data } = await this.connector.fetchQuery<{
+      // Use REST API instead of GraphQL to support includeGlobal parameter
+      // https://api-docs.cognite.com/20230101/tag/Data-models/operation/listDataModels
+      const items = await this.connector.fetchItems<{
         space: string;
         externalId: string;
         version: string;
         name: string;
         description: string;
-        graphQlDml: string;
+        isGlobal?: boolean;
       }>({
-        path: '/dml/graphql',
-        method: HttpMethod.POST,
-        data: JSON.stringify({
-          query: `
-             query listDataModelVersions($limit: Int) {
-               listGraphQlDmlVersions(limit: $limit) {
-                 items {
-                    space
-                    externalId
-                    version
-                    name
-                    description
-                    graphQlDml
-                    createdTime
-                    lastUpdatedTime
-                 }
-               }
-             }
-             `,
-          variables: { limit: 1000 },
-        }),
+        path: '/models/datamodels',
+        method: HttpMethod.GET,
+        data: undefined,
+        params: { limit: 1000, includeGlobal: true },
       });
-      return data;
+      
+      // Map to expected format (graphQlDml will be fetched separately when needed)
+      const mappedItems = items.map((item) => ({
+        space: item.space,
+        externalId: item.externalId,
+        version: item.version,
+        name: item.name || item.externalId,
+        description: item.description || '',
+        graphQlDml: '', // Will be fetched when a specific model is selected
+      }));
+      
+      return {
+        listGraphQlDmlVersions: {
+          items: mappedItems,
+        },
+      };
     } catch (error) {
       handleError(error, refId);
       return {