diff --git a/web/gui2/src/main/webapp/app/view/flow/flowdetails/flowdetails/flowdetails.component.ts b/web/gui2/src/main/webapp/app/view/flow/flowdetails/flowdetails/flowdetails.component.ts
new file mode 100644
index 0000000..3197285
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/flow/flowdetails/flowdetails/flowdetails.component.ts
@@ -0,0 +1,158 @@
+/*
+ * Copyright 2018-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Component, OnInit, OnDestroy, OnChanges, Input, Output, EventEmitter } from '@angular/core';
+import { DetailsPanelBaseImpl } from '../../../../fw/widget/detailspanel.base';
+import { FnService } from '../../../../fw/util/fn.service';
+import { LoadingService } from '../../../../fw/layer/loading.service';
+import { LogService } from '../../../../log.service';
+import { WebSocketService } from '../../../../fw/remote/websocket.service';
+import { LionService } from '../../../../fw/util/lion.service';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+
+/**
+ * The details view when a flow is clicked from the flows view
+ *
+ * This is expected to be passed an 'id' and it makes a call
+ * to the WebSocket with a flowDetailsRequest, and gets back a
+ * flowDetailsResponse.
+ *
+ * The animated fly-in is controlled by the animation below
+ * The flowDetailsState is attached to flow-details-panel
+ * and is false (flies out) when id='' and true (flies in) when
+ * id has a value
+ */
+@Component({
+    selector: 'onos-flowdetails',
+    templateUrl: './flowdetails.component.html',
+    styleUrls: [
+        './flowdetails.component.css',
+        '../../../../fw/widget/panel.css', '../../../../fw/widget/panel-theme.css'
+    ],
+    animations: [
+        trigger('flowDetailsState', [
+            state('true', style({
+                transform: 'translateX(-100%)',
+                opacity: '100'
+            })),
+            state('false', style({
+                transform: 'translateX(0%)',
+                opacity: '0'
+            })),
+            transition('0 => 1', animate('100ms ease-in')),
+            transition('1 => 0', animate('100ms ease-out'))
+        ])
+    ]
+})
+export class FlowDetailsComponent extends DetailsPanelBaseImpl implements OnInit, OnDestroy, OnChanges {
+
+    @Input() flowId: string;
+    @Input() appId: string;
+
+    @Output() closeEvent = new EventEmitter<string>();
+
+    lionFn; // Function
+
+    constructor(
+        protected fs: FnService,
+        protected ls: LoadingService,
+        protected log: LogService,
+        protected wss: WebSocketService,
+        protected lion: LionService,
+    ) {
+        super(fs, ls, log, wss, 'flow');
+        if (this.lion.ubercache.length === 0) {
+            this.lionFn = this.dummyLion;
+            this.lion.loadCbs.set('flowdetails', () => this.doLion());
+        } else {
+            this.doLion();
+        }
+    }
+
+    /**
+       * There is a possibility that a previous selection
+       * is already registered for call - if so wait 100ms
+       * for it to deregister - this is because in the list of
+       * flows we might have selected one higher up the list and
+       * it is now being processed here before an older selection
+       * farther down the list has been removed
+       */
+    ngOnInit() {
+        this.init();
+        this.log.debug('Flow Details Component initialized:', this.flowId);
+    }
+
+    /**
+     * Stop listening to flowDetailsResponse on WebSocket
+     */
+    ngOnDestroy() {
+        this.lion.loadCbs.delete('flowdetails');
+        this.destroy();
+        this.log.debug('Flow Details Component destroyed');
+    }
+
+    /**
+     * Details Panel Data Request on row selection changes
+     * Should be called whenever flow id changes
+     * If flowId or appId is empty, no request is made
+     */
+    ngOnChanges() {
+        if (this.flowId === '' || this.appId === '') {
+            return;
+        } else {
+            const query = {
+                'flowId': this.flowId,
+                'appId': this.appId
+            };
+            this.requestDetailsPanelData(query);
+        }
+    }
+
+    /**
+     * Read the LION bundle for Flow and set up the lionFn
+     */
+    doLion() {
+        this.lionFn = this.lion.bundle('core.view.Flow');
+    }
+
+    /**
+     * Return immediate value of flow treatment on flow details request
+     */
+    immed(treatmentData: any) {
+        if (treatmentData === undefined) {
+            return '';
+        } else {
+            return treatmentData.immed;
+        }
+    }
+
+    /**
+     * Return clear deferred value of flow treatment on flow details request
+     */
+    clearDef(treatmentData: any) {
+        if (treatmentData === undefined) {
+            return '';
+        } else {
+            return treatmentData.clearDef;
+        }
+    }
+
+    close() {
+        this.flowId = null;
+        this.appId = null;
+        this.closed = true;
+        this.closeEvent.emit(this.flowId);
+    }
+}