fix(docker/container): container logs viewer error when logging is disabled (#10384)

* fix(docker/container-logs): invalid string breadcrumb

* fix(docker/container): let docker select the logging driver by default on container create

* fix(docker/container-logs): information panel in container logs when logging is disabled

* fix(docker/container): dont include HostConfig.LogConfig if no driver is selected

app/docker/react/views/containers.ts

@@ -6,6 +6,7 @@ import { ListView } from '@/react/docker/containers/ListView';
 import { withCurrentUser } from '@/react-tools/withCurrentUser';
 import { withReactQuery } from '@/react-tools/withReactQuery';
 import { withUIRouter } from '@/react-tools/withUIRouter';
+import { LogView } from '@/react/docker/containers/LogView';
 
 export const containersModule = angular
   .module('portainer.docker.react.views.containers', [])
@@ -13,6 +14,13 @@ export const containersModule = angular
     'containersView',
     r2a(withUIRouter(withReactQuery(withCurrentUser(ListView))), ['endpoint'])
   )
+  // the view only contains the information panel when logging is disabled
+  // this is a temporary solution to avoid creating a publicly exposed component
+  // or an AngularJS component until the logs view is migrated to React
+  .component(
+    'containerLogView',
+    r2a(withUIRouter(withReactQuery(withCurrentUser(LogView))), [])
+  )
 
   .config(config).name;
 

app/docker/views/containers/logs/containerLogsController.js

@@ -75,7 +75,13 @@ angular.module('portainer.docker').controller('ContainerLogsController', [
         .then(function success(data) {
           var container = data;
           $scope.container = container;
+
+          const logsEnabled = container.HostConfig && container.HostConfig.LogConfig && container.HostConfig.LogConfig.Type && container.HostConfig.LogConfig.Type !== 'none';
+          $scope.logsEnabled = logsEnabled;
+
+          if (logsEnabled) {
             startLogPolling(!container.Config.Tty);
+          }
         })
         .catch(function error(err) {
           Notifications.error('Failure', err, 'Unable to retrieve container information');

app/docker/views/containers/logs/containerlogs.html

@@ -5,14 +5,16 @@
     { 
       label:(container.Name | trimcontainername),
       link: 'docker.containers.container', 
-      linkParams:container.Id
+      linkParams: { id: container.Id }
     }, 'Logs']"
 >
 </page-header>
 
+<container-log-view ng-if="!logsEnabled"></container-log-view>
+
 <log-viewer
   data="logs"
-  ng-if="logs"
+  ng-if="logs && logsEnabled"
   log-collection-change="changeLogCollection"
   display-timestamps="state.displayTimestamps"
   line-count="state.lineCount"

app/react/docker/containers/CreateView/CommandsTab/LoggerConfig.tsx

@@ -58,7 +58,7 @@ export function LoggerConfig({
       <TextTip color="blue">
         Logging driver that will override the default docker daemon driver.
         Select Default logging driver if you don&apos;t want to override it.
-        Supported logging drivers can be found
+        Supported logging drivers can be found{' '}
         <a
           href="https://docs.docker.com/engine/admin/logging/overview/#supported-logging-drivers"
           target="_blank"
@@ -133,6 +133,6 @@ export function validation(): SchemaOf<LogConfig> {
         value: string().required('Value is required'),
       })
     ),
-    type: string().default('none'),
+    type: string().default(''),
   });
 }

app/react/docker/containers/CreateView/CommandsTab/toRequest.ts

@@ -34,6 +34,11 @@ export function toRequest(
     delete config.Entrypoint;
   }
 
+  // don't include LogConfig object if "Default logging driver" (type === '') is selected
+  if (values.logConfig.type === '') {
+    delete config.HostConfig.LogConfig;
+  }
+
   return config;
 
   function getLogConfig(

app/react/docker/containers/CreateView/CommandsTab/toViewModel.tsx

@@ -39,7 +39,7 @@ export function toViewModel(config: ContainerJSON): Values {
 function getLogConfig(value?: HostConfig['LogConfig']): LogConfig {
   if (!value || !value.Type) {
     return {
-      type: 'none',
+      type: '',
       options: [],
     };
   }

app/react/docker/containers/LogView/LogView.tsx

@@ -0,0 +1,46 @@
+import { useCurrentStateAndParams } from '@uirouter/react';
+
+import { useContainer } from '@/react/docker/containers/queries/container';
+
+import { InformationPanel } from '@@/InformationPanel';
+import { TextTip } from '@@/Tip/TextTip';
+import { Link } from '@@/Link';
+
+export function LogView() {
+  const {
+    params: { endpointId: environmentId, id: containerId },
+  } = useCurrentStateAndParams();
+
+  const containerQuery = useContainer(environmentId, containerId);
+  if (!containerQuery.data || containerQuery.isLoading) {
+    return null;
+  }
+
+  const logsEnabled =
+    containerQuery.data.HostConfig?.LogConfig?.Type && // if a portion of the object path doesn't exist, logging is likely disabled
+    containerQuery.data.HostConfig.LogConfig.Type !== 'none'; // if type === none logging is disabled
+
+  return <>{!logsEnabled && <LogsDisabledInfoPanel />}</>;
+}
+
+function LogsDisabledInfoPanel() {
+  const {
+    params: { id: containerId, nodeName },
+  } = useCurrentStateAndParams();
+
+  return (
+    <InformationPanel>
+      <TextTip color="blue">
+        Logging is disabled for this container. If you want to re-enable
+        logging, please{' '}
+        <Link
+          to="docker.containers.new"
+          params={{ from: containerId, nodeName }}
+        >
+          redeploy your container
+        </Link>{' '}
+        and select a logging driver in the &quot;Command & logging&quot; panel.
+      </TextTip>
+    </InformationPanel>
+  );
+}

app/react/docker/containers/LogView/index.ts

@@ -0,0 +1 @@
+export { LogView } from './LogView';