feat(ui): Filterable pod logs

assets/swagger.json

@@ -784,6 +784,11 @@
             "type": "string",
             "name": "untilTime",
             "in": "query"
+          },
+          {
+            "type": "string",
+            "name": "filter",
+            "in": "query"
           }
         ],
         "responses": {

server/application/application.go

@@ -1081,6 +1081,23 @@ func (s *Server) PodLogs(q *application.ApplicationPodLogsQuery, ws application.
 	if q.TailLines > 0 {
 		tailLines = &q.TailLines
 	}
+
+	type filterData struct {
+		literal string
+		inverse bool
+	}
+
+	filter := filterData{
+		literal: "",
+		inverse: false,
+	}
+	if q.Filter != nil {
+		filter.literal = *q.Filter
+		if filter.literal[0] == '!' {
+			filter.literal = filter.literal[1:]
+			filter.inverse = true
+		}
+	}
 	stream, err := kubeClientset.CoreV1().Pods(pod.Namespace).GetLogs(*q.PodName, &v1.PodLogOptions{
 		Container:    q.Container,
 		Follow:       q.Follow,
@@ -1118,6 +1135,12 @@ func (s *Server) PodLogs(q *application.ApplicationPodLogsQuery, ws application.
 						close(done)
 						return
 					}
+					if q.Filter != nil {
+						lineContainsFilter := strings.Contains(line, filter.literal)
+						if (filter.inverse && lineContainsFilter) || (!filter.inverse && !lineContainsFilter) {
+							continue
+						}
+					}
 					err = ws.Send(&application.LogEntry{
 						Content:      line,
 						TimeStamp:    metaLogTime,

server/application/application.proto

@@ -164,6 +164,7 @@ message ApplicationPodLogsQuery {
 	required int64 tailLines = 7 [(gogoproto.nullable) = false];
 	required bool follow = 8 [(gogoproto.nullable) = false];
 	optional string untilTime = 9;
+	optional string filter = 10;
 }
 
 message LogEntry {

ui/src/app/applications/components/pod-logs-viewer/pod-logs-viewer.tsx

@@ -21,6 +21,16 @@ export const PodsLogsViewer = (props: {applicationName: string; pod: models.Reso
     const [selectedLine, setSelectedLine] = useState(-1);
     const bottom = React.useRef<HTMLInputElement>(null);
     const [page, setPage] = useState<{number: number; untilTimes: string[]}>({number: 0, untilTimes: []});
+
+    interface FilterData {
+        literal: string;
+        inverse: boolean;
+    }
+    const [filter, setFilter] = useState({inverse: false} as FilterData);
+
+    const filterQuery = () => {
+        return filter.literal && `${filter.inverse ? '!' : ''}${filter.literal}`;
+    };
     return (
         <DataLoader load={() => services.viewPreferences.getPreferences()}>
             {prefs => (
@@ -85,6 +95,25 @@ export const PodsLogsViewer = (props: {applicationName: string; pod: models.Reso
                             }}>
                             {prefs.appDetails.darkMode ? <i className='fa fa-sun' /> : <i className='fa fa-moon' />}
                         </div>
+                        <div style={{display: 'flex', marginLeft: 'auto'}}>
+                            <button
+                                className={`argo-button argo-button--base${filter.inverse ? '' : '-o'}`}
+                                onClick={() => setFilter({...filter, inverse: !filter.inverse})}
+                                style={{marginRight: '10px'}}>
+                                !
+                            </button>
+                            <input
+                                type='text'
+                                placeholder='Filter string'
+                                className='argo-field'
+                                value={filter.literal}
+                                onChange={e => setFilter({...filter, literal: e.target.value})}
+                                style={{padding: 0}}
+                            />
+                            <button onClick={() => loader.reload()} className='argo-button argo-button--base' style={{width: '150px'}}>
+                                FILTER <i className='fa fa-filter' />
+                            </button>
+                        </div>
                     </div>
                     <DataLoader
                         ref={l => (loader = l)}
@@ -104,7 +133,8 @@ export const PodsLogsViewer = (props: {applicationName: string; pod: models.Reso
                                         container.name,
                                         maxLines * (page.number + 1),
                                         prefs.appDetails.followLogs && page.number === 0,
-                                        page.untilTimes[page.untilTimes.length - 1]
+                                        page.untilTimes[page.untilTimes.length - 1],
+                                        filterQuery()
                                     )
                                     // show only current page lines
                                     .scan((lines, logEntry) => {

ui/src/app/shared/services/applications-service.ts

@@ -168,7 +168,8 @@ export class ApplicationsService {
         containerName: string,
         tail?: number,
         follow?: boolean,
-        untilTime?: string
+        untilTime?: string,
+        filter?: string
     ): Observable<models.LogEntry> {
         if (follow === undefined || follow === null) {
             follow = true;
@@ -177,7 +178,7 @@ export class ApplicationsService {
             .loadEventSource(
                 `/applications/${applicationName}/pods/${podName}/logs?container=${containerName}&follow=${follow}&namespace=${namespace}${tail ? '&tailLines=' + tail : ''}${
                     untilTime ? '&untilTime=' + untilTime : ''
-                }`
+                }${filter ? '&filter=' + filter : ''}`
             )
             .map(data => JSON.parse(data).result as models.LogEntry);
         return new Observable(observer => {