From 74f22b8612fe8031213ad2e85f84cabe1a185f39 Mon Sep 17 00:00:00 2001 From: Jordan Pellizzari Date: Thu, 24 Aug 2023 13:45:41 -0700 Subject: [PATCH 1/4] Add object ID to query response payload --- api/query/query.proto | 1 + api/query/query.swagger.json | 3 +++ pkg/api/query/query.pb.go | 13 +++++++++++-- pkg/query/server/server.go | 1 + ui-cra/src/api/query/query.pb.ts | 1 + 5 files changed, 17 insertions(+), 2 deletions(-) diff --git a/api/query/query.proto b/api/query/query.proto index 5dc4ddf53..fb3df59a0 100644 --- a/api/query/query.proto +++ b/api/query/query.proto @@ -72,6 +72,7 @@ message Object { string message = 8; string category = 9; string unstructured = 10; + string id = 11; } message DebugGetAccessRulesRequest { diff --git a/api/query/query.swagger.json b/api/query/query.swagger.json index afe38df3d..616d59e08 100644 --- a/api/query/query.swagger.json +++ b/api/query/query.swagger.json @@ -226,6 +226,9 @@ }, "unstructured": { "type": "string" + }, + "id": { + "type": "string" } } }, diff --git a/pkg/api/query/query.pb.go b/pkg/api/query/query.pb.go index d541ac80d..3569f44cf 100644 --- a/pkg/api/query/query.pb.go +++ b/pkg/api/query/query.pb.go @@ -175,6 +175,7 @@ type Object struct { Message string `protobuf:"bytes,8,opt,name=message,proto3" json:"message,omitempty"` Category string `protobuf:"bytes,9,opt,name=category,proto3" json:"category,omitempty"` Unstructured string `protobuf:"bytes,10,opt,name=unstructured,proto3" json:"unstructured,omitempty"` + Id string `protobuf:"bytes,11,opt,name=id,proto3" json:"id,omitempty"` } func (x *Object) Reset() { @@ -279,6 +280,13 @@ func (x *Object) GetUnstructured() string { return "" } +func (x *Object) GetId() string { + if x != nil { + return x.Id + } + return "" +} + type DebugGetAccessRulesRequest struct { state protoimpl.MessageState sizeCache protoimpl.SizeCache @@ -678,7 +686,7 @@ var file_api_query_query_proto_rawDesc = []byte{ 0x65, 0x73, 0x70, 0x6f, 0x6e, 0x73, 0x65, 0x12, 0x2a, 0x0a, 0x07, 0x6f, 0x62, 0x6a, 0x65, 0x63, 0x74, 0x73, 0x18, 0x01, 0x20, 0x03, 0x28, 0x0b, 0x32, 0x10, 0x2e, 0x71, 0x75, 0x65, 0x72, 0x79, 0x2e, 0x76, 0x31, 0x2e, 0x4f, 0x62, 0x6a, 0x65, 0x63, 0x74, 0x52, 0x07, 0x6f, 0x62, 0x6a, 0x65, - 0x63, 0x74, 0x73, 0x22, 0x96, 0x02, 0x0a, 0x06, 0x4f, 0x62, 0x6a, 0x65, 0x63, 0x74, 0x12, 0x18, + 0x63, 0x74, 0x73, 0x22, 0xa6, 0x02, 0x0a, 0x06, 0x4f, 0x62, 0x6a, 0x65, 0x63, 0x74, 0x12, 0x18, 0x0a, 0x07, 0x63, 0x6c, 0x75, 0x73, 0x74, 0x65, 0x72, 0x18, 0x01, 0x20, 0x01, 0x28, 0x09, 0x52, 0x07, 0x63, 0x6c, 0x75, 0x73, 0x74, 0x65, 0x72, 0x12, 0x1c, 0x0a, 0x09, 0x6e, 0x61, 0x6d, 0x65, 0x73, 0x70, 0x61, 0x63, 0x65, 0x18, 0x02, 0x20, 0x01, 0x28, 0x09, 0x52, 0x09, 0x6e, 0x61, 0x6d, @@ -695,7 +703,8 @@ var file_api_query_query_proto_rawDesc = []byte{ 0x63, 0x61, 0x74, 0x65, 0x67, 0x6f, 0x72, 0x79, 0x18, 0x09, 0x20, 0x01, 0x28, 0x09, 0x52, 0x08, 0x63, 0x61, 0x74, 0x65, 0x67, 0x6f, 0x72, 0x79, 0x12, 0x22, 0x0a, 0x0c, 0x75, 0x6e, 0x73, 0x74, 0x72, 0x75, 0x63, 0x74, 0x75, 0x72, 0x65, 0x64, 0x18, 0x0a, 0x20, 0x01, 0x28, 0x09, 0x52, 0x0c, - 0x75, 0x6e, 0x73, 0x74, 0x72, 0x75, 0x63, 0x74, 0x75, 0x72, 0x65, 0x64, 0x22, 0x1c, 0x0a, 0x1a, + 0x75, 0x6e, 0x73, 0x74, 0x72, 0x75, 0x63, 0x74, 0x75, 0x72, 0x65, 0x64, 0x12, 0x0e, 0x0a, 0x02, + 0x69, 0x64, 0x18, 0x0b, 0x20, 0x01, 0x28, 0x09, 0x52, 0x02, 0x69, 0x64, 0x22, 0x1c, 0x0a, 0x1a, 0x44, 0x65, 0x62, 0x75, 0x67, 0x47, 0x65, 0x74, 0x41, 0x63, 0x63, 0x65, 0x73, 0x73, 0x52, 0x75, 0x6c, 0x65, 0x73, 0x52, 0x65, 0x71, 0x75, 0x65, 0x73, 0x74, 0x22, 0x49, 0x0a, 0x1b, 0x44, 0x65, 0x62, 0x75, 0x67, 0x47, 0x65, 0x74, 0x41, 0x63, 0x63, 0x65, 0x73, 0x73, 0x52, 0x75, 0x6c, 0x65, diff --git a/pkg/query/server/server.go b/pkg/query/server/server.go index d95fd9e8d..8b367e67f 100644 --- a/pkg/query/server/server.go +++ b/pkg/query/server/server.go @@ -280,6 +280,7 @@ func convertToPbObject(obj []models.Object) []*pb.Object { Message: o.Message, Category: string(o.Category), Unstructured: string(o.Unstructured), + Id: o.GetID(), }) } diff --git a/ui-cra/src/api/query/query.pb.ts b/ui-cra/src/api/query/query.pb.ts index 7e2807905..8c84e5956 100644 --- a/ui-cra/src/api/query/query.pb.ts +++ b/ui-cra/src/api/query/query.pb.ts @@ -29,6 +29,7 @@ export type Object = { message?: string category?: string unstructured?: string + id?: string } export type DebugGetAccessRulesRequest = { From b10232258149fd4528ac7a1850af922149bb8cbd Mon Sep 17 00:00:00 2001 From: Jordan Pellizzari Date: Thu, 24 Aug 2023 13:47:16 -0700 Subject: [PATCH 2/4] Add 'extra columns' functionality to explorer. Exposes the full object to the table, which allows for other data to appear in the table --- ui-cra/src/components/Applications/index.tsx | 43 +++++++++++++++++-- ui-cra/src/components/Explorer/Explorer.tsx | 25 +++++++++-- .../src/components/Explorer/ExplorerTable.tsx | 5 ++- .../Explorer/__tests__/Explorer.test.tsx | 36 ++++++++++++++++ .../__snapshots__/Explorer.test.tsx.snap | 18 ++++---- ui-cra/src/components/Explorer/hooks.tsx | 21 ++++++++- 6 files changed, 131 insertions(+), 17 deletions(-) diff --git a/ui-cra/src/components/Applications/index.tsx b/ui-cra/src/components/Applications/index.tsx index fc23662e5..61eaaa08e 100644 --- a/ui-cra/src/components/Applications/index.tsx +++ b/ui-cra/src/components/Applications/index.tsx @@ -3,18 +3,23 @@ import { Button, Icon, IconType, + Link, + V2Routes, + formatURL, useFeatureFlags, useListAutomations, } from '@weaveworks/weave-gitops'; +import _ from 'lodash'; import { FC } from 'react'; import { useHistory } from 'react-router-dom'; import styled from 'styled-components'; +import { Object } from '../../api/query/query.pb'; import { Routes } from '../../utils/nav'; +import { ActionsWrapper } from '../Clusters'; import OpenedPullRequest from '../Clusters/OpenedPullRequest'; import Explorer from '../Explorer/Explorer'; -import { ActionsWrapper } from '../Clusters'; -import { NotificationsWrapper } from '../Layout/NotificationsWrapper'; import { Page } from '../Layout/App'; +import { NotificationsWrapper } from '../Layout/NotificationsWrapper'; const WGApplicationsDashboard: FC = ({ className }: any) => { const { isFlagEnabled } = useFeatureFlags(); @@ -55,7 +60,39 @@ const WGApplicationsDashboard: FC = ({ className }: any) => {
{useQueryServiceBackend ? ( - + { + const sourceAddr = + o.kind === 'HelmRelease' + ? 'spec.chart.spec.sourceRef.name' + : 'spec.sourceRef.name'; + + const url = formatURL(V2Routes.Sources, { + name: o.name, + namespace: o.namespace, + clusterName: o.cluster, + }); + + const sourceName = _.get(o.parsed, sourceAddr); + + if (!sourceName) { + return '-'; + } + + return ( + + {o.namespace}/{sourceName} + + ); + }, + }, + ]} + /> ) : ( )} diff --git a/ui-cra/src/components/Explorer/Explorer.tsx b/ui-cra/src/components/Explorer/Explorer.tsx index 35d13daad..3752a0af0 100644 --- a/ui-cra/src/components/Explorer/Explorer.tsx +++ b/ui-cra/src/components/Explorer/Explorer.tsx @@ -2,6 +2,7 @@ import { Flex, Icon, IconType } from '@weaveworks/weave-gitops'; // @ts-ignore import { IconButton } from '@material-ui/core'; import { Alert } from '@material-ui/lab'; +import { Field } from '@weaveworks/weave-gitops/ui/components/DataTable'; import _ from 'lodash'; import { useState } from 'react'; import { useHistory } from 'react-router-dom'; @@ -15,16 +16,27 @@ import PaginationControls from './PaginationControls'; import QueryInput from './QueryInput'; import QueryStateChips from './QueryStateChips'; import { QueryStateManager, URLQueryStateManager } from './QueryStateManager'; -import { QueryStateProvider, columnHeaderHandler } from './hooks'; +import { + QueryStateProvider, + columnHeaderHandler, + useGetUnstructuredObjects, +} from './hooks'; type Props = { className?: string; category?: 'automation' | 'source'; enableBatchSync?: boolean; manager?: QueryStateManager; + extraColumns?: Field[]; }; -function Explorer({ className, category, enableBatchSync, manager }: Props) { +function Explorer({ + className, + category, + enableBatchSync, + manager, + extraColumns, +}: Props) { const history = useHistory(); if (!manager) { manager = new URLQueryStateManager(history); @@ -45,6 +57,12 @@ function Explorer({ className, category, enableBatchSync, manager }: Props) { category, }); + const unst = useGetUnstructuredObjects(data?.objects || []); + const rows = _.map(data?.objects, (o: any) => ({ + ...o, + parsed: unst[o.id], + })); + const filteredFacets = filterFacetsForCategory(facetsRes?.facets, category); return ( @@ -60,10 +78,11 @@ function Explorer({ className, category, enableBatchSync, manager }: Props) { ({ // Doing some things here to make this work with the DataTable. // It handles rendering the sync/pause buttons. ...o, - uid: `${o.cluster}/${o.apiGroup}/${o.kind}/${o.namespace}/${o.name}`, + uid: o.id, clusterName: o.cluster, type: o.kind, })); @@ -119,6 +121,7 @@ function ExplorerTable({ value: 'message', defaultSort: sortField === 'message', }, + ...(extraColumns as Field[]), ]} rows={r} hideSearchAndFilters diff --git a/ui-cra/src/components/Explorer/__tests__/Explorer.test.tsx b/ui-cra/src/components/Explorer/__tests__/Explorer.test.tsx index 9116032f1..2240adb50 100644 --- a/ui-cra/src/components/Explorer/__tests__/Explorer.test.tsx +++ b/ui-cra/src/components/Explorer/__tests__/Explorer.test.tsx @@ -124,6 +124,42 @@ describe('Explorer', () => { expect(input?.checked).toBeTruthy(); }); + it('shows extra columns', async () => { + const objects = [ + { + kind: 'Kustomization', + name: 'flux-system', + namespace: 'flux-system', + status: 'Ready', + }, + { + kind: 'HelmRelease', + name: 'flux-system', + namespace: 'flux-system', + status: 'Ready', + }, + ]; + + api.DoQueryReturns = { + objects, + }; + + const extraCols = [ + { + label: 'My Cool Column', + value: (o: any) => `${o.kind}-foo-bar`, + }, + ]; + + let result = {} as RenderResult; + await act(async () => { + const c = wrap(); + result = await render(c); + }); + + expect(result.container).toHaveTextContent('My Cool Column'); + expect(result.container).toHaveTextContent('Kustomization-foo-bar'); + }); describe('snapshots', () => { it('renders', async () => { diff --git a/ui-cra/src/components/Explorer/__tests__/__snapshots__/Explorer.test.tsx.snap b/ui-cra/src/components/Explorer/__tests__/__snapshots__/Explorer.test.tsx.snap index 3591b6ce6..53f37a474 100644 --- a/ui-cra/src/components/Explorer/__tests__/__snapshots__/Explorer.test.tsx.snap +++ b/ui-cra/src/components/Explorer/__tests__/__snapshots__/Explorer.test.tsx.snap @@ -866,7 +866,7 @@ exports[`Explorer snapshots renders 1`] = ` class="c4" >

@@ -977,13 +977,13 @@ exports[`Explorer snapshots renders 1`] = ` >
+ +
+ +
+
+
+ + + + - + +