refactor(docker/containers): migrate inspect view to react [EE-2190] (#11005)

app/docker/filters/filters.js

@@ -1,5 +1,5 @@
 import _ from 'lodash-es';
-import { hideShaSum, joinCommand, nodeStatusBadge, taskStatusBadge, trimSHA, trimVersionTag } from './utils';
+import { hideShaSum, joinCommand, nodeStatusBadge, taskStatusBadge, trimContainerName, trimSHA, trimVersionTag } from './utils';
 
 function includeString(text, values) {
   return values.some(function (val) {
@@ -76,15 +76,7 @@ angular
     };
   })
   .filter('nodestatusbadge', () => nodeStatusBadge)
-  .filter('trimcontainername', function () {
-    'use strict';
-    return function (name) {
-      if (name) {
-        return name.indexOf('/') === 0 ? name.slice(1) : name;
-      }
-      return '';
-    };
-  })
+  .filter('trimcontainername', () => trimContainerName)
   .filter('getstatetext', function () {
     'use strict';
     return function (state) {

app/docker/filters/utils.ts

@@ -83,3 +83,10 @@ export function nodeStatusBadge(text: NodeStatus['State']) {
 export function hideShaSum(imageName = '') {
   return imageName.split('@sha')[0];
 }
+
+export function trimContainerName(name?: string) {
+  if (name) {
+    return name.indexOf('/') === 0 ? name.slice(1) : name;
+  }
+  return '';
+}

app/docker/react/views/containers.ts

@@ -8,6 +8,7 @@ import { withReactQuery } from '@/react-tools/withReactQuery';
 import { withUIRouter } from '@/react-tools/withUIRouter';
 import { LogView } from '@/react/docker/containers/LogView';
 import { CreateView } from '@/react/docker/containers/CreateView';
+import { InspectView } from '@/react/docker/containers/InspectView/InspectView';
 
 export const containersModule = angular
   .module('portainer.docker.react.views.containers', [])
@@ -26,7 +27,10 @@ export const containersModule = angular
     'containerLogView',
     r2a(withUIRouter(withReactQuery(withCurrentUser(LogView))), [])
   )
-
+  .component(
+    'dockerContainerInspectView',
+    r2a(withUIRouter(withReactQuery(withCurrentUser(InspectView))), [])
+  )
   .config(config).name;
 
 /* @ngInject */
@@ -95,8 +99,7 @@ function config($stateRegistryProvider: StateRegistry) {
     url: '/inspect',
     views: {
       'content@': {
-        templateUrl: '~@/docker/views/containers/inspect/containerinspect.html',
-        controller: 'ContainerInspectController',
+        component: 'dockerContainerInspectView',
       },
     },
   });

app/docker/views/containers/inspect/containerInspectController.js

@@ -1,27 +0,0 @@
-angular.module('portainer.docker').controller('ContainerInspectController', [
-  '$scope',
-  '$transition$',
-  'Notifications',
-  'ContainerService',
-  'HttpRequestHelper',
-  'endpoint',
-  function ($scope, $transition$, Notifications, ContainerService, HttpRequestHelper, endpoint) {
-    $scope.state = {
-      DisplayTextView: false,
-    };
-    $scope.containerInfo = {};
-
-    function initView() {
-      HttpRequestHelper.setPortainerAgentTargetHeader($transition$.params().nodeName);
-      ContainerService.inspect(endpoint.Id, $transition$.params().id)
-        .then(function success(d) {
-          $scope.containerInfo = d;
-        })
-        .catch(function error(e) {
-          Notifications.error('Failure', e, 'Unable to inspect container');
-        });
-    }
-
-    initView();
-  },
-]);

app/docker/views/containers/inspect/containerinspect.html

@@ -1,28 +0,0 @@
-<page-header
-  title="'Container inspect'"
-  breadcrumbs="[
-    { label:'Containers', link:'docker.containers' },
-    {
-      label:(containerInfo.Name | trimcontainername),
-      link: 'docker.containers.container',
-      linkParams: { id: containerInfo.Id },
-    }, 'Inspect']"
->
-</page-header>
-
-<div class="row">
-  <div class="col-lg-12 col-md-12 col-xs-12">
-    <rd-widget>
-      <rd-widget-header icon="circle" title-text="Inspect">
-        <span class="btn-group btn-group-sm">
-          <label class="btn btn-light" ng-model="state.DisplayTextView" uib-btn-radio="false"><pr-icon icon="'code'"></pr-icon>Tree</label>
-          <label class="btn btn-light" ng-model="state.DisplayTextView" uib-btn-radio="true"><pr-icon icon="'file'"></pr-icon>Text</label>
-        </span>
-      </rd-widget-header>
-      <rd-widget-body>
-        <pre ng-show="state.DisplayTextView">{{ containerInfo | json: 4 }}</pre>
-        <json-tree ng-hide="state.DisplayTextView" object="containerInfo" root-name="containerInfo.Id" start-expanded="true"></json-tree>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-</div>