hunk.code_window:   return (
       <div className="row">
         <Widget>
           <WidgetTitle icon="fa-laptop" title="Edge Compute settings" />
           <WidgetBody>
             <Formik
               initialValues={settings}
  
hunk.labels: keep keep keep keep replace keep keep keep
hunk.after_edit:         <WidgetTitle icon="svg-laptop" title="Edge Compute settings" />
  
hunk.file_path: app/portainer/settings/edge-compute/EdgeComputeSettings/EdgeComputeSettings.tsx
hunk.type: replace
file: <div class="service-datatable">
    <table class="table table-condensed table-hover nowrap-cells">
      <thead>
        <tr>
          <th uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.filters.state.open" style="width: 10%">
            <a ng-click="$ctrl.changeOrderBy('Status.State')">
              Status
              <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Status.State' && !$ctrl.state.reverseOrder"></i>
              <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Status.State' && $ctrl.state.reverseOrder"></i>
            </a>
            <span class="space-left">
              <span uib-dropdown-toggle class="table-filter" ng-if="!$ctrl.filters.state.enabled">Filter <i class="fa fa-filter" aria-hidden="true"></i></span>
              <span uib-dropdown-toggle class="table-filter filter-active" ng-if="$ctrl.filters.state.enabled">Filter <i class="fa fa-check" aria-hidden="true"></i></span>
            </span>
            <div class="dropdown-menu" uib-dropdown-menu>
              <div class="tableMenu">
                <div class="menuHeader"> Filter by state </div>
                <div class="menuContent">
                  <div class="md-checkbox" ng-repeat="filter in $ctrl.filters.state.values track by $index">
                    <input id="filter_state_{{ $ctrl.serviceId }}_{{ $index }}" type="checkbox" ng-model="filter.display" ng-change="$ctrl.onStateFilterChange()" />
                    <label for="filter_state_{{ $ctrl.serviceId }}_{{ $index }}">{{ filter.label }}</label>
                  </div>
                </div>
                <div>
                  <a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.filters.state.open = false;">Close</a>
                </div>
              </div>
            </div>
          </th>
          <th style="width: 22%">Task</th>
          <th>Actions</th>
          <th>
            <a ng-click="$ctrl.changeOrderBy('Slot')">
              Slot
              <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Slot' && !$ctrl.state.reverseOrder"></i>
              <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Slot' && $ctrl.state.reverseOrder"></i>
            </a>
          </th>
          <th>
            <a ng-click="$ctrl.changeOrderBy('NodeId')">
              Node
              <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'NodeId' && !$ctrl.state.reverseOrder"></i>
              <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'NodeId' && $ctrl.state.reverseOrder"></i>
            </a>
          </th>
          <th>
            <a ng-click="$ctrl.changeOrderBy('Updated')">
              Last Update
              <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Updated' && !$ctrl.state.reverseOrder"></i>
              <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Updated' && $ctrl.state.reverseOrder"></i>
            </a>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr
          ng-repeat="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter: $ctrl.applyFilters | filter:$ctrl.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder))"
        >
          <td class="text-center">
            <span class="label label-{{ item.Status.State | taskstatusbadge }} space-right">{{ item.Status.State }}</span>
          </td>
          <td>
            <a ng-if="!$ctrl.agentProxy || !item.Container" ui-sref="docker.tasks.task({id: item.Id})" class="monospaced">{{ item.Id }}</a>
            <a ng-if="$ctrl.agentProxy && item.Container" ui-sref="docker.containers.container({ id: item.Container.Id, nodeName: item.Container.NodeName })" class="monospaced">{{
              item.Id
            }}</a>
          </td>
          <td>
            <container-quick-actions
              ng-if="!$ctrl.agentProxy || !item.Container"
              container-id="item.ContainerId"
              task-id="item.Id"
              status="item.Status.State"
              state="$ctrl.state"
            ></container-quick-actions>
            <container-quick-actions
              ng-if="$ctrl.agentProxy && item.Container"
              container-id="item.Container.Id"
              node-name="item.Container.NodeName"
              status="item.Status.State"
              state="$ctrl.state"
            ></container-quick-actions>
          </td>
          <td>{{ item.Slot ? item.Slot : '-' }}</td>
          <td>{{ item.NodeId | tasknodename: $ctrl.nodes }}</td>
          <td>{{ item.Updated | getisodate }}</td>
        </tr>
        <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
          <td colspan="5" class="text-center text-muted">No task matching filter.</td>
        </tr>
      </tbody>
    </table>
  </div>
  